Refactor recentRequest/Env/Workspace

src-web/components/GlobalHooks.tsx

@@ -30,7 +30,7 @@ export function GlobalHooks() {
   // if no component references them
   useRecentWorkspaces();
   useRecentEnvironments();
-  useRecentRequests();
+  console.log(useRecentRequests());
 
   useSyncAppearance();
 

src-web/hooks/useRecentEnvironments.ts

@@ -1,12 +1,9 @@
 import { useEffect, useMemo } from 'react';
-import { createGlobalState, useEffectOnce } from 'react-use';
-import { useActiveWorkspaceId } from './useActiveWorkspaceId';
+import { getKeyValue, NAMESPACE_GLOBAL } from '../lib/keyValueStore';
 import { useActiveEnvironmentId } from './useActiveEnvironmentId';
-import { useKeyValue } from './useKeyValue';
-import { NAMESPACE_GLOBAL, getKeyValue } from '../lib/keyValueStore';
+import { useActiveWorkspaceId } from './useActiveWorkspaceId';
 import { useEnvironments } from './useEnvironments';
-
-const useHistoryState = createGlobalState<string[]>([]);
+import { useKeyValue } from './useKeyValue';
 
 const kvKey = (workspaceId: string) => 'recent_environments::' + workspaceId;
 const namespace = NAMESPACE_GLOBAL;
@@ -16,38 +13,25 @@ export function useRecentEnvironments() {
   const environments = useEnvironments();
   const activeWorkspaceId = useActiveWorkspaceId();
   const activeEnvironmentId = useActiveEnvironmentId();
-  const [history, setHistory] = useHistoryState();
   const kv = useKeyValue<string[]>({
     key: kvKey(activeWorkspaceId ?? 'n/a'),
     namespace,
     defaultValue,
   });
 
-  // Load local storage state on initial render
-  useEffectOnce(() => {
-    if (kv.value) {
-      setHistory(kv.value);
-    }
-  });
-
-  // Update local storage state when history changes
-  useEffect(() => {
-    kv.set(history);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [history]);
-
   // Set history when active request changes
   useEffect(() => {
-    setHistory((currentHistory: string[]) => {
+    kv.set((currentHistory: string[]) => {
       if (activeEnvironmentId === null) return currentHistory;
       const withoutCurrentEnvironment = currentHistory.filter((id) => id !== activeEnvironmentId);
       return [activeEnvironmentId, ...withoutCurrentEnvironment];
-    });
-  }, [activeEnvironmentId, setHistory]);
+    }).catch(console.error);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [activeEnvironmentId]);
 
   const onlyValidIds = useMemo(
-    () => history.filter((id) => environments.some((e) => e.id === id)),
-    [history, environments],
+    () => kv.value?.filter((id) => environments.some((e) => e.id === id)) ?? [],
+    [kv.value, environments],
   );
 
   return onlyValidIds;

src-web/hooks/useRecentRequests.ts

@@ -1,5 +1,4 @@
 import { useEffect, useMemo } from 'react';
-import { createGlobalState } from 'react-use';
 import { getKeyValue, NAMESPACE_GLOBAL } from '../lib/keyValueStore';
 import { useActiveRequestId } from './useActiveRequestId';
 import { useActiveWorkspaceId } from './useActiveWorkspaceId';
@@ -7,8 +6,6 @@ import { useGrpcRequests } from './useGrpcRequests';
 import { useHttpRequests } from './useHttpRequests';
 import { useKeyValue } from './useKeyValue';
 
-const useHistoryState = createGlobalState<string[] | null>(null);
-
 const kvKey = (workspaceId: string) => 'recent_requests::' + workspaceId;
 const namespace = NAMESPACE_GLOBAL;
 const defaultValue: string[] = [];
@@ -20,42 +17,25 @@ export function useRecentRequests() {
   const activeWorkspaceId = useActiveWorkspaceId();
   const activeRequestId = useActiveRequestId();
 
-  const [history, setHistory] = useHistoryState();
   const kv = useKeyValue<string[]>({
     key: kvKey(activeWorkspaceId ?? 'n/a'),
     namespace,
     defaultValue,
   });
 
-  // Load local storage state on initial render
-  useEffect(() => {
-    if (kv.value) {
-      console.log('SET HISTORY', kv.value);
-      setHistory(kv.value);
-    }
-  }, [kv.isLoading]);
-
-  // Update local storage state when history changes
-  useEffect(() => {
-    if (history == null) return;
-    console.log('SET KV', history);
-    kv.set(history);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [history]);
-
   // Set history when active request changes
   useEffect(() => {
-    setHistory((currentHistory) => {
-      console.log('ACTIVE REQUEST CHANGED', kv.isLoading, activeRequestId, currentHistory);
-      if (activeRequestId === null || currentHistory == null) return currentHistory;
+    kv.set((currentHistory) => {
+      if (activeRequestId === null) return currentHistory;
       const withoutCurrentRequest = currentHistory.filter((id) => id !== activeRequestId);
       return [activeRequestId, ...withoutCurrentRequest];
-    });
-  }, [activeRequestId, kv.isLoading, setHistory]);
+    }).catch(console.error);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [activeRequestId]);
 
   const onlyValidIds = useMemo(
-    () => history?.filter((id) => requests.some((r) => r.id === id)) ?? [],
-    [history, requests],
+    () => kv.value?.filter((id) => requests.some((r) => r.id === id)) ?? [],
+    [kv.value, requests],
   );
 
   return onlyValidIds;

src-web/hooks/useRecentWorkspaces.ts

@@ -1,12 +1,9 @@
 import { useEffect, useMemo } from 'react';
-import { createGlobalState, useEffectOnce } from 'react-use';
 import { getKeyValue, NAMESPACE_GLOBAL } from '../lib/keyValueStore';
 import { useActiveWorkspaceId } from './useActiveWorkspaceId';
 import { useKeyValue } from './useKeyValue';
 import { useWorkspaces } from './useWorkspaces';
 
-const useHistoryState = createGlobalState<string[]>([]);
-
 const kvKey = () => 'recent_workspaces';
 const namespace = NAMESPACE_GLOBAL;
 const defaultValue: string[] = [];
@@ -14,38 +11,25 @@ const defaultValue: string[] = [];
 export function useRecentWorkspaces() {
   const workspaces = useWorkspaces();
   const activeWorkspaceId = useActiveWorkspaceId();
-  const [history, setHistory] = useHistoryState();
   const kv = useKeyValue<string[]>({
     key: kvKey(),
     namespace,
     defaultValue,
   });
 
-  // Load local storage state on initial render
-  useEffectOnce(() => {
-    if (kv.value) {
-      setHistory(kv.value);
-    }
-  });
-
-  // Update local storage state when history changes
-  useEffect(() => {
-    kv.set(history);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [history]);
-
   // Set history when active request changes
   useEffect(() => {
-    setHistory((currentHistory: string[]) => {
+    kv.set((currentHistory: string[]) => {
       if (activeWorkspaceId === null) return currentHistory;
       const withoutCurrent = currentHistory.filter((id) => id !== activeWorkspaceId);
       return [activeWorkspaceId, ...withoutCurrent];
-    });
-  }, [activeWorkspaceId, setHistory]);
+    }).catch(console.error);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   const onlyValidIds = useMemo(
-    () => history.filter((id) => workspaces.some((w) => w.id === id)),
-    [history, workspaces],
+    () => kv.value?.filter((id) => workspaces.some((w) => w.id === id)) ?? [],
+    [kv.value, workspaces],
   );
 
   return onlyValidIds;