From 00265471ba98e30acb52c32377295e1ccd72b910 Mon Sep 17 00:00:00 2001
From: Cole Lawrence <cole@colelawrence.com>
Date: Thu, 21 Jul 2022 14:04:00 -0400
Subject: [PATCH] Fix namespace and object with same name ordering in
 OutlinePanel (#262)

Fix P-206 namespace and object name rendered in wrong order
---
 .../OutlinePanel/ObjectsList/ObjectsList.tsx  | 58 +++++++++----------
 1 file changed, 28 insertions(+), 30 deletions(-)

diff --git a/theatre/studio/src/panels/OutlinePanel/ObjectsList/ObjectsList.tsx b/theatre/studio/src/panels/OutlinePanel/ObjectsList/ObjectsList.tsx
index 10a3e38..5946130 100644
--- a/theatre/studio/src/panels/OutlinePanel/ObjectsList/ObjectsList.tsx
+++ b/theatre/studio/src/panels/OutlinePanel/ObjectsList/ObjectsList.tsx
@@ -39,42 +39,40 @@ function NamespaceTree(props: {
   return (
     <>
       {[...props.namespace.entries()].map(([label, {object, nested}]) => {
-        const children = (
+        const nestedChildrenElt = nested && (
+          <NamespaceTree
+            namespace={nested}
+            // Question: will there be key conflict if two components have the same labels?
+            key={'namespaceTree(' + label + ')'}
+            visualIndentation={props.visualIndentation + 1}
+          />
+        )
+        const sameNameElt = object && (
+          <ObjectItem
+            depth={props.visualIndentation}
+            // key is useful for navigating react dev component tree
+            key={'objectPath(' + object.address.objectKey + ')'}
+            // object entries should not allow this to be undefined
+            sheetObject={object}
+            overrideLabel={label}
+          />
+        )
+
+        return (
           <React.Fragment key={`${label} - ${props.visualIndentation}`}>
-            {object && (
-              <ObjectItem
+            {sameNameElt}
+            {nestedChildrenElt && (
+              <BaseItem
+                selectionStatus="not-selectable"
+                label={label}
+                // key necessary for no duplicate keys (next to other React.Fragments)
+                key={`baseItem(${label})`}
                 depth={props.visualIndentation}
-                // key is useful for navigating react dev component tree
-                key={'objectPath(' + object.address.objectKey + ')'}
-                // object entries should not allow this to be undefined
-                sheetObject={object}
-                overrideLabel={label}
-              />
-            )}
-            {nested && (
-              <NamespaceTree
-                namespace={nested}
-                // Question: will there be key conflict if two components have the same labels?
-                key={'namespaceTree(' + label + ')'}
-                visualIndentation={props.visualIndentation + 1}
+                children={nestedChildrenElt}
               />
             )}
           </React.Fragment>
         )
-
-        return nested ? (
-          <BaseItem
-            selectionStatus="not-selectable"
-            label={label}
-            // key necessary for no duplicate keys (next to other React.Fragments)
-            key={`baseItem(${label})`}
-            depth={props.visualIndentation}
-            children={children}
-          />
-        ) : (
-          // if we don't have any nested items, just render the children with no wrapper, here.
-          children
-        )
       })}
     </>
   )