From 29004e0f302b8e103a9cd7b406d38cc8fbabd2a3 Mon Sep 17 00:00:00 2001
From: Mark Murphy <boathouse2112@gmail.com>
Date: Thu, 9 Jun 2022 00:49:00 -0400
Subject: [PATCH 1/2] fix(devtools): stop devtools explorer from un-expanding
 when data is fetched

---
 src/devtools/Explorer.tsx | 18 ++++++------------
 1 file changed, 6 insertions(+), 12 deletions(-)

diff --git a/src/devtools/Explorer.tsx b/src/devtools/Explorer.tsx
index 0c4ed42687..9d76c8a3db 100644
--- a/src/devtools/Explorer.tsx
+++ b/src/devtools/Explorer.tsx
@@ -67,7 +67,7 @@ type Entry = {
 }
 
 type RendererProps = {
-  HandleEntry: HandleEntryComponent
+  handleEntry: (entry: Entry) => JSX.Element,
   label?: string
   value: unknown
   subEntries: Entry[]
@@ -101,7 +101,7 @@ export function chunkArray<T>(array: T[], size: number): T[][] {
 type Renderer = (props: RendererProps) => JSX.Element
 
 export const DefaultRenderer: Renderer = ({
-  HandleEntry,
+  handleEntry,
   label,
   value,
   subEntries = [],
@@ -127,9 +127,7 @@ export const DefaultRenderer: Renderer = ({
           {expanded ? (
             subEntryPages.length === 1 ? (
               <SubEntries>
-                {subEntries.map(entry => (
-                  <HandleEntry key={entry.label} entry={entry} />
-                ))}
+                {subEntries.map(handleEntry)}
               </SubEntries>
             ) : (
               <SubEntries>
@@ -150,9 +148,7 @@ export const DefaultRenderer: Renderer = ({
                       </LabelButton>
                       {expandedPages.includes(index) ? (
                         <SubEntries>
-                          {entries.map(entry => (
-                            <HandleEntry key={entry.label} entry={entry} />
-                          ))}
+                          {entries.map(handleEntry)}
                         </SubEntries>
                       ) : null}
                     </Entry>
@@ -171,8 +167,6 @@ export const DefaultRenderer: Renderer = ({
   )
 }
 
-type HandleEntryComponent = (props: { entry: Entry }) => JSX.Element
-
 type ExplorerProps = Partial<RendererProps> & {
   renderer?: Renderer
   defaultExpanded?: true | Record<string, boolean>
@@ -246,8 +240,8 @@ export default function Explorer({
   const subEntryPages = chunkArray(subEntries, pageSize)
 
   return renderer({
-    HandleEntry: ({ entry }) => (
-      <Explorer value={value} renderer={renderer} {...rest} {...entry} />
+    handleEntry: (entry) => (
+      <Explorer key={entry.label} value={value} renderer={renderer} {...rest} {...entry} />
     ),
     type,
     subEntries,

From 1d5f5bb6651ff2d2e3b62e50c2243b49eefc7f7f Mon Sep 17 00:00:00 2001
From: Mark Murphy <boathouse2112@gmail.com>
Date: Thu, 9 Jun 2022 12:35:35 -0400
Subject: [PATCH 2/2] * Update Explorer.test.tsx to use handleEntry function *
 Fix formatting

---
 src/devtools/Explorer.tsx            | 20 +++++++++++---------
 src/devtools/tests/Explorer.test.tsx |  2 +-
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/devtools/Explorer.tsx b/src/devtools/Explorer.tsx
index 9d76c8a3db..316871a69b 100644
--- a/src/devtools/Explorer.tsx
+++ b/src/devtools/Explorer.tsx
@@ -67,7 +67,7 @@ type Entry = {
 }
 
 type RendererProps = {
-  handleEntry: (entry: Entry) => JSX.Element,
+  handleEntry: (entry: Entry) => JSX.Element
   label?: string
   value: unknown
   subEntries: Entry[]
@@ -126,9 +126,7 @@ export const DefaultRenderer: Renderer = ({
           </ExpandButton>
           {expanded ? (
             subEntryPages.length === 1 ? (
-              <SubEntries>
-                {subEntries.map(handleEntry)}
-              </SubEntries>
+              <SubEntries>{subEntries.map(handleEntry)}</SubEntries>
             ) : (
               <SubEntries>
                 {subEntryPages.map((entries, index) => (
@@ -147,9 +145,7 @@ export const DefaultRenderer: Renderer = ({
                         {index * pageSize + pageSize - 1}]
                       </LabelButton>
                       {expandedPages.includes(index) ? (
-                        <SubEntries>
-                          {entries.map(handleEntry)}
-                        </SubEntries>
+                        <SubEntries>{entries.map(handleEntry)}</SubEntries>
                       ) : null}
                     </Entry>
                   </div>
@@ -240,8 +236,14 @@ export default function Explorer({
   const subEntryPages = chunkArray(subEntries, pageSize)
 
   return renderer({
-    handleEntry: (entry) => (
-      <Explorer key={entry.label} value={value} renderer={renderer} {...rest} {...entry} />
+    handleEntry: entry => (
+      <Explorer
+        key={entry.label}
+        value={value}
+        renderer={renderer}
+        {...rest}
+        {...entry}
+      />
     ),
     type,
     subEntries,
diff --git a/src/devtools/tests/Explorer.test.tsx b/src/devtools/tests/Explorer.test.tsx
index f4077f7015..e417f7d6fa 100644
--- a/src/devtools/tests/Explorer.test.tsx
+++ b/src/devtools/tests/Explorer.test.tsx
@@ -39,7 +39,7 @@ describe('Explorer', () => {
           pageSize={10}
           expanded={false}
           subEntryPages={[[{ label: 'A lovely label' }]]}
-          HandleEntry={() => <></>}
+          handleEntry={() => <></>}
           value={undefined}
           subEntries={[]}
           type="string"