Better model updates

src-web/hooks/Confirm.tsx

@@ -2,20 +2,27 @@ import type { ButtonProps } from '../components/core/Button';
 import { Button } from '../components/core/Button';
 import { HStack } from '../components/core/Stacks';
 
-interface Props {
+export interface ConfirmProps {
   hide: () => void;
   onResult: (result: boolean) => void;
-  confirmButtonColor?: ButtonProps['color'];
-  confirmButtonText?: string;
+  variant?: 'delete' | 'confirm';
 }
-export function Confirm({
-  hide,
-  onResult,
-  confirmButtonColor = 'primary',
-  confirmButtonText = 'Confirm',
-}: Props) {
+
+const colors: Record<NonNullable<ConfirmProps['variant']>, ButtonProps['color']> = {
+  delete: 'danger',
+  confirm: 'primary',
+};
+
+const confirmButtonTexts: Record<NonNullable<ConfirmProps['variant']>, string> = {
+  delete: 'Delete',
+  confirm: 'Confirm',
+};
+
+export function Confirm({ hide, onResult, variant = 'confirm' }: ConfirmProps) {
   const focusRef = (el: HTMLButtonElement | null) => {
-    el?.focus();
+    setTimeout(() => {
+      el?.focus();
+    });
   };
 
   const handleHide = () => {
@@ -33,8 +40,8 @@ export function Confirm({
       <Button className="focus" color="gray" onClick={handleHide}>
         Cancel
       </Button>
-      <Button className="focus" ref={focusRef} color={confirmButtonColor} onClick={handleSuccess}>
-        {confirmButtonText}
+      <Button className="focus" ref={focusRef} color={colors[variant]} onClick={handleSuccess}>
+        {confirmButtonTexts[variant]}
       </Button>
     </HStack>
   );

src-web/hooks/useConfirm.ts

@@ -0,0 +1,26 @@
+import type { DialogProps } from '../components/core/Dialog';
+import { useDialog } from '../components/DialogContext';
+import type { ConfirmProps } from './Confirm';
+import { Confirm } from './Confirm';
+
+export function useConfirm() {
+  const dialog = useDialog();
+  return ({
+    title,
+    description,
+    variant,
+  }: {
+    title: DialogProps['title'];
+    description?: DialogProps['description'];
+    variant: ConfirmProps['variant'];
+  }) =>
+    new Promise((onResult: ConfirmProps['onResult']) => {
+      dialog.show({
+        title,
+        description,
+        hideX: true,
+        size: 'sm',
+        render: ({ hide }) => Confirm({ hide, variant, onResult }),
+      });
+    });
+}

src-web/hooks/useConfirm.tsx

@@ -1,34 +0,0 @@
-import type { ButtonProps } from '../components/core/Button';
-import { useDialog } from '../components/DialogContext';
-import { Confirm } from './Confirm';
-
-export function useConfirm() {
-  const dialog = useDialog();
-  return ({
-    title,
-    description,
-    confirmButtonColor,
-    confirmButtonText,
-  }: {
-    title: string;
-    description?: string;
-    confirmButtonColor?: ButtonProps['color'];
-    confirmButtonText?: string;
-  }) => {
-    return new Promise((resolve: (r: boolean) => void) => {
-      dialog.show({
-        title,
-        description,
-        hideX: true,
-        render: ({ hide }) => (
-          <Confirm
-            hide={hide}
-            onResult={resolve}
-            confirmButtonColor={confirmButtonColor}
-            confirmButtonText={confirmButtonText}
-          />
-        ),
-      });
-    });
-  };
-}

src-web/hooks/useCreateRequest.ts

@@ -1,26 +1,31 @@
-import { useMutation } from '@tanstack/react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { invoke } from '@tauri-apps/api';
 import type { HttpRequest } from '../lib/models';
-import { useActiveWorkspace } from './useActiveWorkspace';
-import { useRequests } from './useRequests';
+import { useActiveWorkspaceId } from './useActiveWorkspaceId';
+import { requestsQueryKey, useRequests } from './useRequests';
 import { useRoutes } from './useRoutes';
 
 export function useCreateRequest({ navigateAfter }: { navigateAfter: boolean }) {
-  const workspace = useActiveWorkspace();
+  const workspaceId = useActiveWorkspaceId();
   const routes = useRoutes();
   const requests = useRequests();
+  const queryClient = useQueryClient();
 
-  return useMutation<string, unknown, Partial<Pick<HttpRequest, 'name' | 'sortPriority'>>>({
+  return useMutation<HttpRequest, unknown, Partial<Pick<HttpRequest, 'name' | 'sortPriority'>>>({
     mutationFn: (patch) => {
-      if (workspace === null) {
+      if (workspaceId === null) {
         throw new Error("Cannot create request when there's no active workspace");
       }
       const sortPriority = maxSortPriority(requests) + 1000;
-      return invoke('create_request', { sortPriority, workspaceId: workspace.id, ...patch });
+      return invoke('create_request', { sortPriority, workspaceId, ...patch });
     },
-    onSuccess: async (requestId) => {
-      if (navigateAfter && workspace !== null) {
-        routes.navigate('request', { workspaceId: workspace.id, requestId });
+    onSuccess: async (request) => {
+      queryClient.setQueryData<HttpRequest[]>(
+        requestsQueryKey({ workspaceId: request.workspaceId }),
+        (requests) => [...(requests ?? []), request],
+      );
+      if (navigateAfter) {
+        routes.navigate('request', { workspaceId: request.workspaceId, requestId: request.id });
       }
     },
   });

src-web/hooks/useCreateWorkspace.ts

@@ -1,17 +1,23 @@
-import { useMutation } from '@tanstack/react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { invoke } from '@tauri-apps/api';
 import type { Workspace } from '../lib/models';
 import { useRoutes } from './useRoutes';
+import { workspacesQueryKey } from './useWorkspaces';
 
 export function useCreateWorkspace({ navigateAfter }: { navigateAfter: boolean }) {
   const routes = useRoutes();
-  return useMutation<string, unknown, Pick<Workspace, 'name'>>({
+  const queryClient = useQueryClient();
+  return useMutation<Workspace, unknown, Pick<Workspace, 'name'>>({
     mutationFn: (patch) => {
       return invoke('create_workspace', patch);
     },
-    onSuccess: async (workspaceId) => {
+    onSuccess: async (workspace) => {
+      queryClient.setQueryData<Workspace[]>(workspacesQueryKey({}), (workspaces) => [
+        ...(workspaces ?? []),
+        workspace,
+      ]);
       if (navigateAfter) {
-        routes.navigate('workspace', { workspaceId });
+        routes.navigate('workspace', { workspaceId: workspace.id });
       }
     },
   });

src-web/hooks/useDeleteRequest.ts

@@ -1,19 +1,25 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { invoke } from '@tauri-apps/api';
-import { useActiveWorkspaceId } from './useActiveWorkspaceId';
+import type { HttpRequest } from '../lib/models';
+import { useActiveRequestId } from './useActiveRequestId';
 import { requestsQueryKey } from './useRequests';
+import { responsesQueryKey } from './useResponses';
+import { useRoutes } from './useRoutes';
 
 export function useDeleteRequest(id: string | null) {
-  const workspaceId = useActiveWorkspaceId();
   const queryClient = useQueryClient();
-  return useMutation<void, string>({
-    mutationFn: async () => {
-      if (id === null) return;
-      await invoke('delete_request', { requestId: id });
-    },
-    onSuccess: async () => {
-      if (workspaceId === null || id === null) return;
-      await queryClient.invalidateQueries(requestsQueryKey({ workspaceId }));
+  const activeRequestId = useActiveRequestId();
+  const routes = useRoutes();
+  return useMutation<HttpRequest, string>({
+    mutationFn: async () => invoke('delete_request', { requestId: id }),
+    onSuccess: async ({ workspaceId, id: requestId }) => {
+      queryClient.setQueryData(responsesQueryKey({ requestId }), []); // Responses were deleted
+      queryClient.setQueryData<HttpRequest[]>(requestsQueryKey({ workspaceId }), (requests) =>
+        (requests ?? []).filter((r) => r.id !== requestId),
+      );
+      if (activeRequestId === requestId) {
+        routes.navigate('workspace', { workspaceId });
+      }
     },
   });
 }

src-web/hooks/useDeleteResponse.ts

@@ -1,11 +1,18 @@
-import { useMutation } from '@tanstack/react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { invoke } from '@tauri-apps/api';
+import type { HttpResponse } from '../lib/models';
+import { responsesQueryKey } from './useResponses';
 
 export function useDeleteResponse(id: string | null) {
-  return useMutation({
+  const queryClient = useQueryClient();
+  return useMutation<HttpResponse>({
     mutationFn: async () => {
-      if (id === null) return;
-      await invoke('delete_response', { id: id });
+      return await invoke('delete_response', { id: id });
+    },
+    onSuccess: ({ requestId, id: responseId }) => {
+      queryClient.setQueryData<HttpResponse[]>(responsesQueryKey({ requestId }), (responses) =>
+        (responses ?? []).filter((response) => response.id !== responseId),
+      );
     },
   });
 }

src-web/hooks/useDeleteResponses.ts

@@ -11,7 +11,7 @@ export function useDeleteResponses(requestId?: string) {
     },
     onSuccess: async () => {
       if (!requestId) return;
-      await queryClient.invalidateQueries(responsesQueryKey({ requestId }));
+      queryClient.setQueryData(responsesQueryKey({ requestId }), []);
     },
   });
 }

src-web/hooks/useDeleteWorkspace.ts

@@ -1,6 +1,8 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { invoke } from '@tauri-apps/api';
+import type { Workspace } from '../lib/models';
 import { useActiveWorkspaceId } from './useActiveWorkspaceId';
+import { requestsQueryKey } from './useRequests';
 import { useRoutes } from './useRoutes';
 import { workspacesQueryKey } from './useWorkspaces';
 
@@ -8,17 +10,21 @@ export function useDeleteWorkspace(id: string | null) {
   const queryClient = useQueryClient();
   const activeWorkspaceId = useActiveWorkspaceId();
   const routes = useRoutes();
-  return useMutation<void, string>({
-    mutationFn: async () => {
-      if (id === null) return;
-      await invoke('delete_workspace', { id });
+  return useMutation<Workspace, string>({
+    mutationFn: () => {
+      return invoke('delete_workspace', { id });
     },
-    onSuccess: async () => {
-      if (id === null) return;
-      await queryClient.invalidateQueries(workspacesQueryKey());
-      if (id === activeWorkspaceId) {
+    onSuccess: async ({ id: workspaceId }) => {
+      queryClient.setQueryData<Workspace[]>(workspacesQueryKey({}), (workspaces) =>
+        workspaces?.filter((workspace) => workspace.id !== workspaceId),
+      );
+      if (workspaceId === activeWorkspaceId) {
         routes.navigate('workspaces');
       }
+
+      // Also clean up other things that may have been deleted
+      queryClient.setQueryData(requestsQueryKey({ workspaceId }), []);
+      await queryClient.invalidateQueries(requestsQueryKey({ workspaceId }));
     },
   });
 }

src-web/hooks/useKeyValue.ts

@@ -33,7 +33,7 @@ export function useKeyValue<T extends Object | null>({
   const mutate = useMutation<void, unknown, T>({
     mutationFn: (value) => setKeyValue<T>({ namespace, key, value }),
     // k/v should be as fast as possible, so optimistically update the cache
-    onMutate: (value) => queryClient.setQueryData(keyValueQueryKey({ namespace, key }), value),
+    onMutate: (value) => queryClient.setQueryData<T>(keyValueQueryKey({ namespace, key }), value),
   });
 
   const set = useCallback(

src-web/hooks/useSendRequest.ts

@@ -1,11 +1,19 @@
-import { useMutation } from '@tanstack/react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { invoke } from '@tauri-apps/api';
+import type { HttpResponse } from '../lib/models';
+import { responsesQueryKey } from './useResponses';
 
 export function useSendRequest(id: string | null) {
-  return useMutation<void, string>({
+  const queryClient = useQueryClient();
+  return useMutation<HttpResponse, string>({
     mutationFn: async () => {
-      if (id === null) return;
-      await invoke('send_request', { requestId: id });
+      return invoke('send_request', { requestId: id });
+    },
+    onSuccess: (response) => {
+      queryClient.setQueryData<HttpResponse[]>(responsesQueryKey(response), (responses) => [
+        ...(responses ?? []),
+        response,
+      ]);
     },
   }).mutate;
 }

src-web/hooks/useTauriListeners.ts

@@ -1,13 +1,14 @@
 import { useQueryClient } from '@tanstack/react-query';
 import { invoke } from '@tauri-apps/api';
 import type { EventCallback } from '@tauri-apps/api/event';
+import { listen as tauriListen } from '@tauri-apps/api/event';
 import { appWindow } from '@tauri-apps/api/window';
 import { matchPath } from 'react-router-dom';
 import { useEffectOnce } from 'react-use';
 import { DEFAULT_FONT_SIZE } from '../lib/constants';
 import { debounce } from '../lib/debounce';
-import { extractKeyValue, NAMESPACE_NO_SYNC } from '../lib/keyValueStore';
-import type { HttpRequest, HttpResponse, KeyValue, Model, Workspace } from '../lib/models';
+import { NAMESPACE_NO_SYNC } from '../lib/keyValueStore';
+import type { HttpRequest, HttpResponse, Model, Workspace } from '../lib/models';
 import { modelsEq } from '../lib/models';
 import { keyValueQueryKey } from './useKeyValue';
 import { requestsQueryKey } from './useRequests';
@@ -30,7 +31,7 @@ export function useTauriListeners() {
 
     // eslint-disable-next-line @typescript-eslint/ban-types
     function listen<T>(event: string, fn: EventCallback<T>) {
-      appWindow.listen(event, fn).then((unsub) => {
+      tauriListen(event, fn).then((unsub) => {
         if (unmounted) unsub();
         else unsubFns.push(unsub);
       });
@@ -43,13 +44,10 @@ export function useTauriListeners() {
     listen('toggle_sidebar', sidebarDisplay.toggle);
     listen('refresh', () => location.reload());
 
-    listenDebounced('updated_key_value', ({ payload: keyValue }: { payload: KeyValue }) => {
-      if (keyValue.namespace !== NAMESPACE_NO_SYNC) {
-        queryClient.setQueryData(keyValueQueryKey(keyValue), extractKeyValue(keyValue));
-      }
-    });
+    listenDebounced<Model>('created_model', ({ payload, windowLabel }) => {
+      const cameFromSameWindow = windowLabel === appWindow.label;
+      if (cameFromSameWindow) return;
 
-    listenDebounced('created_model', ({ payload }: { payload: Model }) => {
       const queryKey =
         payload.model === 'http_request'
           ? requestsQueryKey(payload)
@@ -71,11 +69,14 @@ export function useTauriListeners() {
       const skipSync = payload.model === 'key_value' && payload.namespace === NAMESPACE_NO_SYNC;
 
       if (!skipSync) {
-        queryClient.setQueryData(queryKey, (values: Model[] = []) => [...values, payload]);
+        queryClient.setQueryData<Model[]>(queryKey, (values) => [...(values ?? []), payload]);
       }
     });
 
-    listenDebounced('updated_model', ({ payload }: { payload: Model }) => {
+    listenDebounced<Model>('updated_model', ({ payload, windowLabel }) => {
+      const cameFromSameWindow = windowLabel === appWindow.label;
+      if (cameFromSameWindow) return;
+
       const queryKey =
         payload.model === 'http_request'
           ? requestsQueryKey(payload)
@@ -94,26 +95,30 @@ export function useTauriListeners() {
 
       const skipSync = payload.model === 'key_value' && payload.namespace === NAMESPACE_NO_SYNC;
 
+      if (payload.model === 'http_request') {
+        wasUpdatedExternally(payload.id);
+      }
+
       if (!skipSync) {
-        queryClient.setQueryData(queryKey, (values: Model[] = []) =>
-          values.map((v) => (modelsEq(v, payload) ? payload : v)),
+        queryClient.setQueryData<Model[]>(queryKey, (values) =>
+          values?.map((v) => (modelsEq(v, payload) ? payload : v)),
         );
       }
     });
 
-    listen('deleted_model', ({ payload: model }: { payload: Model }) => {
+    listen<Model>('deleted_model', ({ payload }) => {
       function removeById<T extends { id: string }>(model: T) {
         return (entries: T[] | undefined) => entries?.filter((e) => e.id !== model.id);
       }
 
-      if (model.model === 'workspace') {
-        queryClient.setQueryData(workspacesQueryKey(), removeById<Workspace>(model));
-      } else if (model.model === 'http_request') {
-        queryClient.setQueryData(requestsQueryKey(model), removeById<HttpRequest>(model));
-      } else if (model.model === 'http_response') {
-        queryClient.setQueryData(responsesQueryKey(model), removeById<HttpResponse>(model));
-      } else if (model.model === 'key_value') {
-        queryClient.setQueryData(keyValueQueryKey(model), undefined);
+      if (payload.model === 'workspace') {
+        queryClient.setQueryData<Workspace[]>(workspacesQueryKey(), removeById(payload));
+      } else if (payload.model === 'http_request') {
+        queryClient.setQueryData<HttpRequest[]>(requestsQueryKey(payload), removeById(payload));
+      } else if (payload.model === 'http_response') {
+        queryClient.setQueryData<HttpResponse[]>(responsesQueryKey(payload), removeById(payload));
+      } else if (payload.model === 'key_value') {
+        queryClient.setQueryData(keyValueQueryKey(payload), undefined);
       }
     });
 

src-web/hooks/useUpdateAnyRequest.ts

@@ -19,8 +19,8 @@ export function useUpdateAnyRequest() {
     onMutate: async ({ id, update }) => {
       const request = await getRequest(id);
       if (request === null) return;
-      queryClient.setQueryData(requestsQueryKey(request), (requests: HttpRequest[] | undefined) =>
-        requests?.map((r) => (r.id === request.id ? update(r) : r)),
+      queryClient.setQueryData<HttpRequest[]>(requestsQueryKey(request), (requests) =>
+        (requests ?? []).map((r) => (r.id === request.id ? update(r) : r)),
       );
     },
   });

src-web/hooks/useUpdateRequest.ts

@@ -21,8 +21,8 @@ export function useUpdateRequest(id: string | null) {
       if (request === null) return;
 
       const newRequest = typeof v === 'function' ? v(request) : { ...request, ...v };
-      queryClient.setQueryData(requestsQueryKey(request), (requests: HttpRequest[] | undefined) =>
-        requests?.map((r) => (r.id === newRequest.id ? newRequest : r)),
+      queryClient.setQueryData<HttpRequest[]>(requestsQueryKey(request), (requests) =>
+        (requests ?? []).map((r) => (r.id === newRequest.id ? newRequest : r)),
       );
     },
   });