feat: filter cache data (#36)

koba04 · Nov 11, 2021 · acb9013 · acb9013 · vercel · Nov 11, 2021
1 parent 75efbcc
commit acb9013
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 16 deletions.
diff --git a/packages/swr-devtools-panel/src/components/Panel.tsx b/packages/swr-devtools-panel/src/components/Panel.tsx
@@ -1,11 +1,12 @@
-import React from "react";
+import React, { useState } from "react";
 import styled from "styled-components";
 import { Cache } from "swr";
 
 import { PanelType, ItemKey } from "./SWRDevToolPanel";
 import { CacheData } from "./CacheData";
 import { CacheKey } from "./CacheKey";
 import { useDevToolsCache } from "../devtools-cache";
+import { SearchInput } from "./SearchInput";
 
 export const Panel = ({
   cache,
@@ -19,6 +20,7 @@ export const Panel = ({
   onSelectItem: (itemKey: ItemKey) => void;
 }) => {
   const [currentCache, historyCache] = useDevToolsCache(cache);
+  const [filterText, setFilterText] = useState("");
   const cacheData = type === "history" ? historyCache : currentCache;
 
   const currentData =
@@ -31,22 +33,31 @@ export const Panel = ({
   return (
     <PanelWrapper>
       <PanelItem>
+        <SearchInput
+          value={filterText}
+          onChange={(text: string) => setFilterText(text)}
+        />
         <CacheItems>
-          {cacheData.map(({ key, timestampString, timestamp }) => (
-            <CacheItem
-              key={`${type}--${key}--${
-                type === "history" ? timestamp.getTime() : ""
-              }`}
-              isSelected={
-                selectedItemKey?.key === key &&
-                (type === "current" || selectedItemKey?.timestamp === timestamp)
-              }
-            >
-              <CacheItemButton onClick={() => onSelectItem({ key, timestamp })}>
-                <CacheKey cacheKey={key} /> ({timestampString})
-              </CacheItemButton>
-            </CacheItem>
-          ))}
+          {cacheData
+            .filter(({ key }) => filterText === "" || key.includes(filterText))
+            .map(({ key, timestampString, timestamp }) => (
+              <CacheItem
+                key={`${type}--${key}--${
+                  type === "history" ? timestamp.getTime() : ""
+                }`}
+                isSelected={
+                  selectedItemKey?.key === key &&
+                  (type === "current" ||
+                    selectedItemKey?.timestamp === timestamp)
+                }
+              >
+                <CacheItemButton
+                  onClick={() => onSelectItem({ key, timestamp })}
+                >
+                  <CacheKey cacheKey={key} /> ({timestampString})
+                </CacheItemButton>
+              </CacheItem>
+            ))}
         </CacheItems>
       </PanelItem>
       <Hr />

diff --git a/packages/swr-devtools-panel/src/components/SearchInput.tsx b/packages/swr-devtools-panel/src/components/SearchInput.tsx
@@ -0,0 +1,45 @@
+import React from "react";
+import styled from "styled-components";
+import { SearchIcon } from "./icons/SearchIcon";
+
+type Props = {
+  onChange: (value: string) => void;
+  value: string;
+};
+
+export const SearchInput = (props: Props) => (
+  <SearchArea>
+    <SearchIcon />
+    <Input
+      type="text"
+      value={props.value}
+      onChange={(e) => props.onChange(e.currentTarget.value)}
+      aria-label="Search"
+      placeholder="Input a search query"
+    />
+  </SearchArea>
+);
+
+const SearchArea = styled.label`
+  top: 0;
+  position: sticky;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 2rem;
+  margin: 0;
+  padding: 0;
+  border-bottom: solid 1px var(--swr-devtools-border-color);
+`;
+
+const Input = styled.input`
+  width: 100%;
+  height: 100%;
+  background-color: var(--swr-devtools-bg-color);
+  border: solid 1px var(--swr-devtools-border-color);
+  border: 0;
+  margin: 0;
+  padding: 0;
+  color: var(--swr-devtools-text-color);
+`;
diff --git a/packages/swr-devtools-panel/src/components/icons/SearchIcon.tsx b/packages/swr-devtools-panel/src/components/icons/SearchIcon.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import styled from "styled-components";
+
+export const SearchIcon = () => (
+  <IconWrapper>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      x="0px"
+      y="0px"
+      width="24"
+      height="24"
+      viewBox="0 0 16 16"
+      style={{ fill: "var(--swr-devtools-text-color)" }}
+    >
+      <path d="M 10.5 1 C 8.019531 1 6 3.019531 6 5.5 C 6 6.558594 6.382813 7.523438 7 8.292969 L 2.023438 13.269531 L 2.726563 13.980469 L 7.707031 9 C 8.476563 9.617188 9.441406 10 10.5 10 C 12.980469 10 15 7.980469 15 5.5 C 15 3.019531 12.980469 1 10.5 1 Z M 10.5 2 C 12.4375 2 14 3.5625 14 5.5 C 14 7.4375 12.4375 9 10.5 9 C 8.5625 9 7 7.4375 7 5.5 C 7 3.5625 8.5625 2 10.5 2 Z" />
+    </svg>
+  </IconWrapper>
+);
+
+const IconWrapper = styled.span`
+  display: inline-block;
+`;