Tauri events for request model updates

src-tauri/src/main.rs

@@ -138,20 +138,29 @@ async fn send_request(
 async fn create_request(
     workspace_id: &str,
     name: &str,
+    app_handle: AppHandle<Wry>,
     db_instance: State<'_, Mutex<Pool<Sqlite>>>,
-) -> Result<models::HttpRequest, String> {
+) -> Result<String, String> {
     let pool = &*db_instance.lock().await;
     let headers = Vec::new();
-    models::upsert_request(None, workspace_id, name, "GET", None, "", headers, pool)
-        .await
-        .map_err(|e| e.to_string())
+    let created_request =
+        models::upsert_request(None, workspace_id, name, "GET", None, "", headers, pool)
+            .await
+            .expect("Failed to create request");
+
+    app_handle
+        .emit_all("created_request", &created_request)
+        .unwrap();
+
+    Ok(created_request.id)
 }
 
 #[tauri::command]
 async fn update_request(
     request: models::HttpRequest,
+    app_handle: AppHandle<Wry>,
     db_instance: State<'_, Mutex<Pool<Sqlite>>>,
-) -> Result<models::HttpRequest, String> {
+) -> Result<(), String> {
     let pool = &*db_instance.lock().await;
 
     // TODO: Figure out how to make this better
@@ -164,7 +173,7 @@ async fn update_request(
         None => None,
     };
 
-    models::upsert_request(
+    let updated_request = models::upsert_request(
         Some(request.id.as_str()),
         request.workspace_id.as_str(),
         request.name.as_str(),
@@ -175,7 +184,13 @@ async fn update_request(
         pool,
     )
     .await
-    .map_err(|e| e.to_string())
+    .expect("Failed to update request");
+
+    app_handle
+        .emit_all("updated_request", updated_request)
+        .unwrap();
+
+    Ok(())
 }
 
 #[tauri::command]

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([
   {