Better recent work/env/req logic

src-web/hooks/useCreateGrpcRequest.ts

@@ -1,19 +1,16 @@
-import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useMutation } from '@tanstack/react-query';
 import { invoke } from '@tauri-apps/api';
 import { trackEvent } from '../lib/analytics';
 import type { GrpcRequest } from '../lib/models';
 import { useActiveEnvironmentId } from './useActiveEnvironmentId';
 import { useActiveWorkspaceId } from './useActiveWorkspaceId';
 import { useAppRoutes } from './useAppRoutes';
-import { grpcRequestsQueryKey } from './useGrpcRequests';
 
 export function useCreateGrpcRequest() {
   const workspaceId = useActiveWorkspaceId();
   const activeEnvironmentId = useActiveEnvironmentId();
-  // const activeRequest = useActiveRequest();
   const activeRequest = null;
   const routes = useAppRoutes();
-  const queryClient = useQueryClient();
 
   return useMutation<
     GrpcRequest,
@@ -38,11 +35,6 @@ export function useCreateGrpcRequest() {
     },
     onSettled: () => trackEvent('GrpcRequest', 'Create'),
     onSuccess: async (request) => {
-      queryClient.setQueryData<GrpcRequest[]>(
-        grpcRequestsQueryKey({ workspaceId: request.workspaceId }),
-        (requests) => [...(requests ?? []), request],
-      );
-      // TODO: This should navigate to the new request
       routes.navigate('request', {
         workspaceId: request.workspaceId,
         requestId: request.id,

src-web/hooks/useCreateHttpRequest.ts

@@ -1,4 +1,4 @@
-import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useMutation } from '@tanstack/react-query';
 import { invoke } from '@tauri-apps/api';
 import { trackEvent } from '../lib/analytics';
 import type { HttpRequest } from '../lib/models';
@@ -6,19 +6,17 @@ import { useActiveEnvironmentId } from './useActiveEnvironmentId';
 import { useActiveRequest } from './useActiveRequest';
 import { useActiveWorkspaceId } from './useActiveWorkspaceId';
 import { useAppRoutes } from './useAppRoutes';
-import { httpRequestsQueryKey } from './useHttpRequests';
 
 export function useCreateHttpRequest() {
   const workspaceId = useActiveWorkspaceId();
   const activeEnvironmentId = useActiveEnvironmentId();
   const activeRequest = useActiveRequest();
   const routes = useAppRoutes();
-  const queryClient = useQueryClient();
 
   return useMutation<
     HttpRequest,
     unknown,
-    Partial<Pick<HttpRequest, 'name' | 'sortPriority' | 'folderId'>>
+    Partial<Pick<HttpRequest, 'name' | 'sortPriority' | 'folderId' | 'bodyType' | 'method'>>
   >({
     mutationFn: (patch) => {
       if (workspaceId === null) {
@@ -38,10 +36,6 @@ export function useCreateHttpRequest() {
     },
     onSettled: () => trackEvent('HttpRequest', 'Create'),
     onSuccess: async (request) => {
-      queryClient.setQueryData<HttpRequest[]>(
-        httpRequestsQueryKey({ workspaceId: request.workspaceId }),
-        (requests) => [...(requests ?? []), request],
-      );
       routes.navigate('request', {
         workspaceId: request.workspaceId,
         requestId: request.id,

src-web/hooks/useRecentRequests.ts

@@ -1,30 +1,45 @@
-import { useEffect } from 'react';
-import { createGlobalState, useEffectOnce, useLocalStorage } from 'react-use';
+import { useEffect, useMemo } from 'react';
+import { createGlobalState, useEffectOnce } from 'react-use';
+import { getKeyValue, NAMESPACE_GLOBAL } from '../lib/keyValueStore';
 import { useActiveRequestId } from './useActiveRequestId';
 import { useActiveWorkspaceId } from './useActiveWorkspaceId';
+import { useGrpcRequests } from './useGrpcRequests';
+import { useHttpRequest } from './useHttpRequest';
+import { useHttpRequests } from './useHttpRequests';
+import { useKeyValue } from './useKeyValue';
 
 const useHistoryState = createGlobalState<string[]>([]);
 
+const kvKey = (workspaceId: string) => 'recent_requests::' + workspaceId;
+const namespace = NAMESPACE_GLOBAL;
+const defaultValue: string[] = [];
+
 export function useRecentRequests() {
+  const httpRequests = useHttpRequests();
+  const grpcRequests = useGrpcRequests();
+  const requests = useMemo(() => [...httpRequests, ...grpcRequests], [httpRequests, grpcRequests]);
   const activeWorkspaceId = useActiveWorkspaceId();
   const activeRequestId = useActiveRequestId();
+
   const [history, setHistory] = useHistoryState();
-  const [lsState, setLSState] = useLocalStorage<string[]>(
-    'recent_requests::' + activeWorkspaceId,
-    [],
-  );
+  const kv = useKeyValue<string[]>({
+    key: kvKey(activeWorkspaceId ?? 'n/a'),
+    namespace,
+    defaultValue,
+  });
 
   // Load local storage state on initial render
   useEffectOnce(() => {
-    if (lsState) {
-      setHistory(lsState);
+    if (kv.value) {
+      setHistory(kv.value);
     }
   });
 
   // Update local storage state when history changes
   useEffect(() => {
-    setLSState(history);
-  }, [history, setLSState]);
+    kv.set(history);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [history]);
 
   // Set history when active request changes
   useEffect(() => {
@@ -35,5 +50,18 @@ export function useRecentRequests() {
     });
   }, [activeRequestId, setHistory]);
 
-  return history;
+  const onlyValidIds = useMemo(
+    () => history.filter((id) => requests.some((r) => r.id === id)),
+    [history, requests],
+  );
+
+  return onlyValidIds;
+}
+
+export async function getRecentRequests(workspaceId: string) {
+  return getKeyValue<string[]>({
+    namespace,
+    key: kvKey(workspaceId),
+    fallback: defaultValue,
+  });
 }

src-web/hooks/useRecentWorkspaces.ts

@@ -1,34 +1,45 @@
 import { useEffect, useMemo } from 'react';
-import { createGlobalState, useEffectOnce, useLocalStorage } from 'react-use';
+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[] = [];
+
 export function useRecentWorkspaces() {
   const workspaces = useWorkspaces();
   const activeWorkspaceId = useActiveWorkspaceId();
   const [history, setHistory] = useHistoryState();
-  const [lsState, setLSState] = useLocalStorage<string[]>('recent_workspaces', []);
+  const kv = useKeyValue<string[]>({
+    key: kvKey(),
+    namespace,
+    defaultValue,
+  });
 
   // Load local storage state on initial render
   useEffectOnce(() => {
-    if (lsState) {
-      setHistory(lsState);
+    if (kv.value) {
+      setHistory(kv.value);
     }
   });
 
   // Update local storage state when history changes
   useEffect(() => {
-    setLSState(history);
-  }, [history, setLSState]);
+    kv.set(history);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [history]);
 
   // Set history when active request changes
   useEffect(() => {
     setHistory((currentHistory: string[]) => {
       if (activeWorkspaceId === null) return currentHistory;
-      const withoutCurrentWorkspace = currentHistory.filter((id) => id !== activeWorkspaceId);
-      return [activeWorkspaceId, ...withoutCurrentWorkspace];
+      const withoutCurrent = currentHistory.filter((id) => id !== activeWorkspaceId);
+      return [activeWorkspaceId, ...withoutCurrent];
     });
   }, [activeWorkspaceId, setHistory]);
 
@@ -39,3 +50,11 @@ export function useRecentWorkspaces() {
 
   return onlyValidIds;
 }
+
+export async function getRecentWorkspaces() {
+  return getKeyValue<string[]>({
+    namespace,
+    key: kvKey(),
+    fallback: defaultValue,
+  });
+}