feat: display cache logs

koba04 · Feb 16, 2021 · 4c85441 · 4c85441
1 parent 9c7e074
commit 4c85441
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 24 deletions.
diff --git a/packages/swr-devtools/src/SWRDevTool.tsx b/packages/swr-devtools/src/SWRDevTool.tsx
@@ -2,37 +2,77 @@ import React from "react";
 import * as CSS from "csstype";
 import { useSWRCache } from "./cache";
 
-const style: CSS.Properties = {
+const devToolWindowStyle: CSS.Properties = {
   position: "fixed",
+  display: "grid",
+  gridTemplateColumns: "1fr 1fr",
   bottom: 0,
+  overflow: "scroll",
   width: "100%",
   height: "200px",
-  opacity: 0.5,
   backgroundColor: "#EEE",
 };
 
-const DataPanel = () => {
-  const cacheData = useSWRCache();
+const titleStyle: CSS.Properties = {
+  position: "sticky",
+  top: 0,
+  margin: "0.5rem",
+  backgroundColor: "#EEE",
+};
+
+const panelStyle: CSS.Properties = {};
+
+const LatestCachePanel = () => {
+  const [cacheData] = useSWRCache();
+  return (
+    <section style={panelStyle}>
+      <h2 style={titleStyle}>Current Cache</h2>
+      <ul>
+        {cacheData.map(
+          ({ key, data, timestampString, isValidating, error }) => (
+            <li key={key}>
+              {key} ({timestampString})
+              <ul>
+                <li>data: {JSON.stringify(data)}</li>
+                <li>isValidating: {isValidating.toString()}</li>
+                <li>error: {error || "null"}</li>
+              </ul>
+            </li>
+          )
+        )}
+      </ul>
+    </section>
+  );
+};
+
+const LogsPanel = () => {
+  const [_, cacheData] = useSWRCache();
   return (
-    <ul>
-      {cacheData.map(({ key, data, timestampString, isValidating, error }) => (
-        <li key={key}>
-          {key} ({timestampString})
-          <ul>
-            <li>data: {JSON.stringify(data)}</li>
-            <li>isValidating: {isValidating.toString()}</li>
-            <li>error: {error || "null"}</li>
-          </ul>
-        </li>
-      ))}
-    </ul>
+    <section style={panelStyle}>
+      <h2 style={titleStyle}>Cache Logs</h2>
+      <ul>
+        {cacheData.map(
+          ({ id, key, data, timestampString, isValidating, error }) => (
+            <li key={id}>
+              {key} ({timestampString})
+              <ul>
+                <li>data: {JSON.stringify(data)}</li>
+                <li>isValidating: {isValidating.toString()}</li>
+                <li>error: {error || "null"}</li>
+              </ul>
+            </li>
+          )
+        )}
+      </ul>
+    </section>
   );
 };
 
 export const SWRDevTools = () => {
   return (
-    <div style={style}>
-      <DataPanel />
+    <div style={devToolWindowStyle}>
+      <LatestCachePanel />
+      <LogsPanel />
     </div>
   );
 };
diff --git a/packages/swr-devtools/src/cache.ts b/packages/swr-devtools/src/cache.ts
@@ -2,6 +2,7 @@ import { useState, useEffect } from "react";
 import { cache } from "swr";
 
 type CacheData = {
+  id: number;
   key: string;
   data: any;
   isValidating: boolean;
@@ -15,28 +16,48 @@ const formatTime = (date: Date) =>
     date.getMinutes()
   ).padStart(2, "0")}:${String(date.getSeconds()).padStart(2, "0")}`;
 
-const retrieveCache = (): CacheData[] => {
+const cacheLogsStore = new Set<any>();
+const latestCacheStore = new Map<any, any>();
+
+let id = 1;
+
+const retrieveCache = (): [CacheData[], CacheData[]] => {
   const date = new Date();
-  return cache
+  const retrieveCacheData = cache
     .keys()
     .filter((key) => !key.startsWith("validating@") && !key.startsWith("err@"))
     .map((key) => {
+      const data = cache.get(key);
+      const devToolsCache = latestCacheStore.get(data);
+      if (devToolsCache) {
+        return devToolsCache;
+      }
+
       const isValidating = cache.get(`validating@${key}`);
       const error = cache.get(`err@${key}`);
-      const data = cache.get(key);
-      return {
+      ++id;
+      const cacheData = {
+        id,
         key,
         data,
         isValidating,
         error,
         timestamp: date,
         timestampString: formatTime(date),
       };
+      latestCacheStore.set(data, cacheData);
+      cacheLogsStore.add(cacheData);
+      return cacheData;
     });
+  return [retrieveCacheData, Array.from(cacheLogsStore).reverse()];
 };
 
-export const useSWRCache = (): CacheData[] => {
-  const [cacheData, setCacheData] = useState<CacheData[]>([]);
+export const useSWRCache = (): [CacheData[], CacheData[]] => {
+  const [cacheData, setCacheData] = useState<[CacheData[], CacheData[]]>([
+    [],
+    [],
+  ]);
+
   useEffect(() => {
     const unsubscribe = cache.subscribe(() => {
       setCacheData(retrieveCache());