Tauri events for request model updates

src-web/components/Sidebar.tsx

@@ -16,7 +16,7 @@ interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
 }
 
 export function Sidebar({ className, activeRequestId, workspaceId, requests, ...props }: Props) {
-  const createRequest = useRequestCreate(workspaceId);
+  const createRequest = useRequestCreate({ workspaceId, navigateAfter: true });
   const { toggleTheme } = useTheme();
   return (
     <div
@@ -28,7 +28,9 @@ export function Sidebar({ className, activeRequestId, workspaceId, requests, ...
         <IconButton
           size="sm"
           icon="plus-circled"
-          onClick={() => createRequest.mutate({ name: 'Test Request' })}
+          onClick={async () => {
+            await createRequest.mutate({ name: 'Test Request' });
+          }}
         />
       </HStack>
       <VStack as="ul" className="py-3" space={1}>

src-web/hooks/useRequest.ts

@@ -2,6 +2,7 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { invoke } from '@tauri-apps/api';
 import { convertDates, HttpRequest } from '../lib/models';
 import { responsesQueryKey } from './useResponses';
+import { useNavigate, useNavigation } from 'react-router-dom';
 
 export function useRequests(workspaceId: string) {
   return useQuery(['requests'], async () => {
@@ -11,8 +12,7 @@ export function useRequests(workspaceId: string) {
 }
 
 export function useRequestUpdate(request: HttpRequest | null) {
-  const queryClient = useQueryClient();
-  return useMutation<HttpRequest, unknown, Partial<HttpRequest>>({
+  return useMutation<void, unknown, Partial<HttpRequest>>({
     mutationFn: async (patch) => {
       if (request == null) {
         throw new Error("Can't update a null request");
@@ -24,29 +24,25 @@ export function useRequestUpdate(request: HttpRequest | null) {
       updatedRequest.createdAt = updatedRequest.createdAt.toISOString().replace('Z', '');
       updatedRequest.updatedAt = updatedRequest.updatedAt.toISOString().replace('Z', '');
 
-      const req = await invoke('update_request', { request: updatedRequest });
-      return convertDates(req as HttpRequest);
-    },
-    onSuccess: (req) => {
-      queryClient.setQueryData(['requests'], (requests: HttpRequest[] = []) =>
-        requests.map((r) => (r.id === req.id ? req : r)),
-      );
+      await invoke('update_request', { request: updatedRequest });
     },
   });
 }
 
-export function useRequestCreate(workspaceId: string) {
-  const queryClient = useQueryClient();
-  return useMutation<HttpRequest, unknown, Pick<HttpRequest, 'name'>>({
-    mutationFn: async (patch) => {
-      const req = await invoke('create_request', {
-        ...patch,
-        workspaceId,
-      });
-      return convertDates(req as HttpRequest);
-    },
-    onSuccess: (req) => {
-      queryClient.setQueryData(['requests'], (requests: HttpRequest[] = []) => [...requests, req]);
+export function useRequestCreate({
+  workspaceId,
+  navigateAfter,
+}: {
+  workspaceId: string;
+  navigateAfter: boolean;
+}) {
+  const navigate = useNavigate();
+  return useMutation<string, unknown, Pick<HttpRequest, 'name'>>({
+    mutationFn: async (patch) => invoke('create_request', { ...patch, workspaceId }),
+    onSuccess: async (requestId) => {
+      if (navigateAfter) {
+        navigate(`/workspaces/${workspaceId}/requests/${requestId}`);
+      }
     },
   });
 }

src-web/lib/models.ts

@@ -45,6 +45,9 @@ export function convertDates<T extends BaseModel>(m: T): T {
 }
 
 function convertDate(d: string | Date): Date {
+  if (typeof d !== 'string') {
+    return d;
+  }
   const date = new Date(d);
   const userTimezoneOffset = date.getTimezoneOffset() * 60000;
   return new Date(date.getTime() - userTimezoneOffset);

src-web/main.tsx

@@ -4,13 +4,14 @@ import ReactDOM from 'react-dom/client';
 import App from './App';
 import { HelmetProvider } from 'react-helmet-async';
 import { MotionConfig } from 'framer-motion';
-import { invoke } from '@tauri-apps/api';
+import { listen } from '@tauri-apps/api/event';
 import { setTheme } from './lib/theme';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 import { Layout } from './components/Layout';
 import { Workspaces } from './pages/Workspaces';
 import './main.css';
+import { convertDates, HttpRequest } from './lib/models';
 
 setTheme();
 
@@ -18,9 +19,18 @@ setTheme();
 await init();
 greet();
 
-// Load the database
-// await invoke('load_db');
 const queryClient = new QueryClient();
+await listen('updated_request', ({ payload: request }: { payload: HttpRequest }) => {
+  queryClient.setQueryData(['requests'], (requests: HttpRequest[] = []) =>
+    requests.map((r) => (r.id === request.id ? convertDates(request) : r)),
+  );
+});
+await listen('created_request', ({ payload: request }: { payload: HttpRequest }) => {
+  queryClient.setQueryData(['requests'], (requests: HttpRequest[] = []) => [
+    ...requests,
+    convertDates(request),
+  ]);
+});
 
 const router = createBrowserRouter([
   {