feat(GIST-53): delete gist on ui (#15)

src/components/feature/mygist-list-feature.tsx

@@ -1,39 +1,45 @@
-'use client'
-import { Gist } from '@/types'
-import MyGistList from '../ui/mygist-list'
-import { useGists } from '@/lib/queries/gists.queries'
+"use client";
+import { Gist } from "@/types";
+import MyGistList from "../ui/mygist-list";
+import { useDeleteGist, useGists } from "@/lib/queries/gists.queries";
 
 // TODO: Get the gists list
 
 const gistMock: Gist[] = [
   {
-    id: '1',
-    name: 'My first Gist',
+    id: "1",
+    name: "My first Gist",
     code: 'console.log("Hello, World!")',
   },
   {
-    id: '2',
-    name: 'My second Gist',
+    id: "2",
+    name: "My second Gist",
     code: 'console.log("Hello, World!")',
   },
   {
-    id: '3',
-    name: 'My third Gist',
+    id: "3",
+    name: "My third Gist",
     code: 'console.log("Hello, World!")',
   },
   {
-    id: '4',
-    name: 'My fourth Gist',
+    id: "4",
+    name: "My fourth Gist",
     code: 'console.log("Hello, World!")',
   },
-]
+];
 
-const handleDeleteGist = (id: string) => {
-  console.log(`Deleting gist with ID: ${id}`)
-}
+const handleDeleteGist = (id: string) => {};
 
 export function MyGistListFeature() {
-  const { data } = useGists()
+  const { data } = useGists();
+  const { mutate: deleteGist } = useDeleteGist({
+    onSuccess: (id) => {
+      console.log(`Deleting gist with ID: ${id}`);
+    },
+  });
+  const handleDeleteGist = (id: string) => {
+    deleteGist(id);
+  };
 
-  return <MyGistList gists={data || []} onDeleteGist={handleDeleteGist} />
+  return <MyGistList gists={data || []} onDeleteGist={handleDeleteGist} />;
 }

src/lib/queries/gists.queries.tsx

@@ -106,6 +106,15 @@ const fetchPatchGistContent = async (
   };
 };
 
+const fetchDeleteGist = async (id: string) => {
+  await ky
+    .delete(`${getBackendURL()}/gists/${id}`, {
+      credentials: "include",
+    })
+    .then();
+  return id;
+};
+
 //hooks
 
 export const useGists = () => {
@@ -196,3 +205,25 @@ export const usePatchGistContent = ({
   });
   return { mutate, error, data, isPending };
 };
+
+export const useDeleteGist = ({
+  onSuccess,
+}: {
+  onSuccess: (id: string) => void;
+}) => {
+  const queryClient = useQueryClient();
+
+  const { mutate, error, data, isPending } = useMutation({
+    mutationFn: (id: string) => {
+      return fetchDeleteGist(id);
+    },
+    onSuccess: (gistID) => {
+      queryClient.setQueryData(["gists"], (oldData: any) => {
+        return oldData.filter((gist: Gist) => gist.id !== gistID.toString());
+      });
+      onSuccess(gistID.toString());
+    },
+  });
+
+  return { mutate, error, data, isPending };
+};