Implement request deletion

src-web/App.tsx

@@ -6,8 +6,14 @@ import { Sidebar } from './components/Sidebar';
 import { UrlBar } from './components/UrlBar';
 import { Grid } from './components/Grid';
 import { useParams } from 'react-router-dom';
-import { useRequests, useRequestUpdate, useSendRequest } from './hooks/useRequest';
+import {
+  useDeleteRequest,
+  useRequests,
+  useRequestUpdate,
+  useSendRequest,
+} from './hooks/useRequest';
 import { ResponsePane } from './components/ResponsePane';
+import { IconButton } from './components/IconButton';
 
 type Params = {
   workspaceId: string;
@@ -22,6 +28,7 @@ function App() {
 
   const updateRequest = useRequestUpdate(request ?? null);
   const sendRequest = useSendRequest(request ?? null);
+  const deleteRequest = useDeleteRequest(request ?? null);
 
   useEffect(() => {
     const listener = async (e: KeyboardEvent) => {
@@ -41,6 +48,7 @@ function App() {
           <VStack className="w-full">
             <HStack as={WindowDragRegion} items="center" className="pl-3 pr-1.5">
               Test Request
+              <IconButton size="sm" icon="trash" onClick={() => deleteRequest.mutate()} />
             </HStack>
             <VStack className="pl-3 px-1.5 py-3" space={3}>
               <UrlBar

src-web/components/Icon.tsx

@@ -12,6 +12,7 @@ import {
   PlusIcon,
   QuestionMarkIcon,
   SunIcon,
+  TrashIcon,
   TriangleDownIcon,
   UpdateIcon,
 } from '@radix-ui/react-icons';
@@ -33,6 +34,7 @@ type IconName =
   | 'plus-circled'
   | 'sun'
   | 'code'
+  | 'trash'
   | 'moon';
 
 const icons: Record<IconName, NamedExoticComponent<{ className: string }>> = {
@@ -51,6 +53,7 @@ const icons: Record<IconName, NamedExoticComponent<{ className: string }>> = {
   question: QuestionMarkIcon,
   eye: EyeOpenIcon,
   code: CodeIcon,
+  trash: TrashIcon,
 };
 
 export interface IconProps {

src-web/hooks/useRequest.ts

@@ -2,10 +2,14 @@ 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';
+import { useNavigate } from 'react-router-dom';
+
+export function requestsQueryKey(workspaceId: string) {
+  return ['requests', { workspaceId }];
+}
 
 export function useRequests(workspaceId: string) {
-  return useQuery(['requests'], async () => {
+  return useQuery(requestsQueryKey(workspaceId), async () => {
     const requests = (await invoke('requests', { workspaceId })) as HttpRequest[];
     return requests.map(convertDates);
   });
@@ -40,6 +44,7 @@ export function useRequestCreate({
   return useMutation<string, unknown, Pick<HttpRequest, 'name'>>({
     mutationFn: async (patch) => invoke('create_request', { ...patch, workspaceId }),
     onSuccess: async (requestId) => {
+      console.log('DONE', { requestId, navigateAfter });
       if (navigateAfter) {
         navigate(`/workspaces/${workspaceId}/requests/${requestId}`);
       }
@@ -60,3 +65,17 @@ export function useSendRequest(request: HttpRequest | null) {
     },
   });
 }
+
+export function useDeleteRequest(request: HttpRequest | null) {
+  const queryClient = useQueryClient();
+  return useMutation<void, string>({
+    mutationFn: async () => {
+      if (request == null) return;
+      await invoke('delete_request', { requestId: request.id });
+    },
+    onSuccess: async () => {
+      if (request == null) return;
+      await queryClient.invalidateQueries(requestsQueryKey(request.workspaceId));
+    },
+  });
+}

src-web/main.tsx

@@ -12,6 +12,7 @@ import { Layout } from './components/Layout';
 import { Workspaces } from './pages/Workspaces';
 import './main.css';
 import { convertDates, HttpRequest } from './lib/models';
+import { requestsQueryKey } from './hooks/useRequest';
 
 setTheme();
 
@@ -20,16 +21,24 @@ await init();
 greet();
 
 const queryClient = new QueryClient();
+
 await listen('updated_request', ({ payload: request }: { payload: HttpRequest }) => {
-  queryClient.setQueryData(['requests'], (requests: HttpRequest[] = []) =>
+  queryClient.setQueryData(requestsQueryKey(request.workspaceId), (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),
-  ]);
+  queryClient.setQueryData(
+    requestsQueryKey(request.workspaceId),
+    (requests: HttpRequest[] = []) => [...requests, convertDates(request)],
+  );
+});
+
+await listen('deleted_request', ({ payload: request }: { payload: HttpRequest }) => {
+  queryClient.setQueryData(requestsQueryKey(request.workspaceId), (requests: HttpRequest[] = []) =>
+    requests.filter((r) => r.id !== request.id),
+  );
 });
 
 const router = createBrowserRouter([