fix: reset a selected item if the current panel has been changed

koba04 · Aug 9, 2021 · e97e775 · e97e775
1 parent dab2f6a
commit e97e775
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 9 deletions.
diff --git a/packages/swr-devtools/src/components/Panel.tsx b/packages/swr-devtools/src/components/Panel.tsx
@@ -2,20 +2,20 @@ import React, { useState } from "react";
 import styled from "styled-components";
 
 import { SWRCacheData } from "../cache";
-import { PanelType } from "./SWRDevTool";
+import { PanelType, ItemKey } from "./SWRDevTool";
 import { CacheData } from "./CacheData";
 
 export const Panel = ({
   data: cacheData,
   type,
+  selectedItemKey,
+  onSelectItem,
 }: {
   data: SWRCacheData[];
   type: PanelType;
+  selectedItemKey: ItemKey | null;
+  onSelectItem: (itemKey: ItemKey) => void;
 }) => {
-  const [selectedItemKey, setSelectedItemKey] = useState<{
-    key: string;
-    timestamp: Date;
-  } | null>(null);
   const currentData =
     selectedItemKey &&
     cacheData.find(
@@ -35,9 +35,7 @@ export const Panel = ({
                 (type === "current" || selectedItemKey?.timestamp === timestamp)
               }
             >
-              <CacheItemButton
-                onClick={() => setSelectedItemKey({ key, timestamp })}
-              >
+              <CacheItemButton onClick={() => onSelectItem({ key, timestamp })}>
                 {key} ({timestampString})
               </CacheItemButton>
             </CacheItem>

diff --git a/packages/swr-devtools/src/components/SWRDevTool.tsx b/packages/swr-devtools/src/components/SWRDevTool.tsx
@@ -25,19 +25,34 @@ type Props = {
   isFixedPosition?: boolean;
 };
 
+export type ItemKey = {
+  key: string;
+  timestamp: Date;
+};
+
 export const SWRDevTools = ({ cache }: Props) => {
   const [latestCache, cacheLogs] = useSWRCache(cache);
   const [activePanel, setActivePanel] = useState<Panel["key"]>("current");
+  const [selectedItemKey, setSelectedItemKey] = useState<ItemKey | null>(null);
   return (
     <DevToolWindow>
       <Header>
         <HeaderTitle>SWR</HeaderTitle>
-        <Tab panels={panels} current={activePanel} onChange={setActivePanel} />
+        <Tab
+          panels={panels}
+          current={activePanel}
+          onChange={(panel: PanelType) => {
+            setActivePanel(panel);
+            setSelectedItemKey(null);
+          }}
+        />
       </Header>
       <PanelWrapper>
         <Panel
           data={activePanel === "logs" ? cacheLogs : latestCache}
           type={activePanel}
+          selectedItemKey={selectedItemKey}
+          onSelectItem={setSelectedItemKey}
         />
       </PanelWrapper>
     </DevToolWindow>