feat(GIST-42): implemented gist update action

src/app/(gistLayout)/mygist/[gistId]/page.tsx

@@ -1,36 +1,63 @@
-'use client'
-import React from 'react'
-import MyGistIdPage from './page-ui'
-import { useGist } from '@/lib/queries/gists.queries'
-import { useToast } from '@/components/shadcn/use-toast'
+"use client";
+import React from "react";
+import MyGistIdPage from "./page-ui";
+import {
+  useGist,
+  usePatchGistContent,
+  usePatchGistName,
+} from "@/lib/queries/gists.queries";
+import { useToast } from "@/components/shadcn/use-toast";
 
 interface MyGistIdFeaturePageProps {
   params: {
-    gistId: string
-  }
+    gistId: string;
+  };
 }
 
-export default function MyGistIdFeaturePage({ params }: MyGistIdFeaturePageProps) {
-  const { gistId } = params
-  const { data } = useGist(gistId)
-  const { toast } = useToast()
+export default function MyGistIdFeaturePage({
+  params,
+}: MyGistIdFeaturePageProps) {
+  const { gistId } = params;
+  const { data } = useGist(gistId);
+  const { toast } = useToast();
+
+  const { mutate: updateName } = usePatchGistName({
+    onSuccess: () => {
+      toast({
+        title: "Gist Saved",
+        description: "Your gist has been saved successfully",
+      });
+    },
+  });
+
+  const { mutate: updateContent } = usePatchGistContent({
+    onSuccess: () => {
+      console.log("Gist content updated");
+    },
+  });
 
   const onDownloadClick = () => {
-    console.log('Downloading gist')
+    console.log("Downloading gist");
     toast({
-      title: 'Gist Downloaded',
-      description: 'Your gist has been downloaded successfully',
-    })
-  }
+      title: "Gist Downloaded",
+      description: "Your gist has been downloaded successfully",
+    });
+  };
   const onSaveClick = (name: string, code: string) => {
-    console.log('Saving gist with name:', name, 'and code:', code)
-    toast({
-      title: 'Gist Saved',
-      description: 'Your gist has been saved successfully',
-    })
-  }
+    console.log("Saving gist with name:", name, "and code:", code);
+
+    updateContent({ id: gistId, content: code });
+
+    updateName({ id: gistId, name });
+  };
   if (!data) {
-    return null
+    return null;
   }
-  return <MyGistIdPage gist={data} onDownloadClick={onDownloadClick} onSaveClick={onSaveClick} />
+  return (
+    <MyGistIdPage
+      gist={data}
+      onDownloadClick={onDownloadClick}
+      onSaveClick={onSaveClick}
+    />
+  );
 }

src/app/(gistLayout)/team/[teamId]/gist/[gistId]/page.tsx

@@ -1,42 +1,69 @@
-'use client'
-import { useToast } from '@/components/shadcn/use-toast'
-import GistDetails from '@/components/ui/gist-details'
-import { useGist } from '@/lib/queries/gists.queries'
-import React from 'react'
+"use client";
+import { useToast } from "@/components/shadcn/use-toast";
+import GistDetails from "@/components/ui/gist-details";
+import {
+  useGist,
+  usePatchGistContent,
+  usePatchGistName,
+} from "@/lib/queries/gists.queries";
+import React from "react";
 
 interface MyTeamGistIdFeaturePageProps {
   params: {
-    teamId: string
-    gistId: string
-  }
+    teamId: string;
+    gistId: string;
+  };
 }
 
-const folderMock = 'Team A'
+const folderMock = "Team A";
+
+export default function MyTeamGistIdFeaturePage({
+  params,
+}: MyTeamGistIdFeaturePageProps) {
+  const { teamId, gistId } = params;
+  const { data } = useGist(gistId);
+  const { toast } = useToast();
+  const { mutate: updateName } = usePatchGistName({
+    onSuccess: () => {
+      toast({
+        title: "Gist Saved",
+        description: "Your gist has been saved successfully a ",
+      });
+    },
+  });
 
-export default function MyTeamGistIdFeaturePage({ params }: MyTeamGistIdFeaturePageProps) {
-  const { teamId, gistId } = params
-  const { data } = useGist(gistId)
-  const { toast } = useToast()
+  const { mutate: updateContent } = usePatchGistContent({
+    onSuccess: () => {
+      console.log("Gist content updated");
+    },
+  });
 
   const onDownloadClick = () => {
-    console.log('Downloading gist')
+    console.log("Downloading gist");
     toast({
-      title: 'Gist Downloaded',
-      description: 'Your gist has been downloaded successfully',
-    })
-  }
+      title: "Gist Downloaded",
+      description: "Your gist has been downloaded successfully",
+    });
+  };
 
   const onSaveClick = (name: string, code: string) => {
-    console.log('Saving gist with name:', name, 'and code:', code)
-    toast({
-      title: 'Gist Saved',
-      description: 'Your gist has been saved successfully',
-    })
-  }
+    console.log("Saving gist with name:", name, "and code:", code);
+
+    updateContent({ id: gistId, content: code });
+
+    updateName({ id: gistId, name });
+  };
 
   if (!data) {
-    return null
+    return null;
   }
 
-  return <GistDetails folder={folderMock} gist={data} onDownloadClick={onDownloadClick} onSaveClick={onSaveClick} />
+  return (
+    <GistDetails
+      folder={folderMock}
+      gist={data}
+      onDownloadClick={onDownloadClick}
+      onSaveClick={onSaveClick}
+    />
+  );
 }

src/lib/queries/gists.queries.tsx

@@ -63,6 +63,49 @@ const fetchCreateGist = async (gist: CreateGistPayload): Promise<Gist> => {
   };
 };
 
+export interface PatchGistNamePayload {
+  id: string;
+  name: string;
+}
+
+const fetchPatchGistName = async (
+  payload: PatchGistNamePayload,
+): Promise<Gist> => {
+  const json = await ky
+    .patch(`${getBackendURL()}/gists/${payload.id}/name`, {
+      credentials: "include",
+      json: { name: payload.name },
+    })
+    .json<ApiGist>();
+  return {
+    id: json.id,
+    name: json.name,
+    code: json.content,
+  };
+};
+
+export interface PatchGistContentPayload {
+  id: string;
+  content: string;
+}
+
+const fetchPatchGistContent = async (
+  payload: PatchGistContentPayload,
+): Promise<Gist> => {
+  const json = await ky
+    .patch(`${getBackendURL()}/gists/${payload.id}/content`, {
+      credentials: "include",
+      json: { content: payload.content },
+    })
+    .json<ApiGist>();
+
+  return {
+    id: json.id,
+    name: json.name,
+    code: json.content,
+  };
+};
+
 //hooks
 
 export const useGists = () => {
@@ -103,3 +146,53 @@ export const useCreateGist = ({ onSuccess }: { onSuccess: () => void }) => {
   });
   return { mutate, error, data, isPending };
 };
+
+function updateNewGistInCache(queryClient: any, newGist: Gist) {
+  queryClient.setQueryData(["gists"], (oldData: any) => {
+    // Assuming oldData is an array, you might need to adjust this based on your actual data structure
+    return oldData.map((gist: Gist) => {
+      if (gist.id === newGist.id) {
+        return newGist;
+      }
+      return gist;
+    });
+  });
+}
+
+export const usePatchGistName = ({ onSuccess }: { onSuccess: () => void }) => {
+  const queryClient = useQueryClient(); // Access the Query Client
+
+  const { mutate, error, data, isPending } = useMutation({
+    mutationFn: (payload: PatchGistNamePayload) => {
+      return fetchPatchGistName(payload);
+    },
+    onSuccess: (newGist) => {
+      updateNewGistInCache(queryClient, newGist); // Call the onSuccess callback if provided
+      if (onSuccess) {
+        onSuccess();
+      }
+    },
+  });
+  return { mutate, error, data, isPending };
+};
+
+export const usePatchGistContent = ({
+  onSuccess,
+}: {
+  onSuccess: () => void;
+}) => {
+  const queryClient = useQueryClient(); // Access the Query Client
+
+  const { mutate, error, data, isPending } = useMutation({
+    mutationFn: (payload: PatchGistContentPayload) => {
+      return fetchPatchGistContent(payload);
+    },
+    onSuccess: (newGist) => {
+      updateNewGistInCache(queryClient, newGist); // Call the onSuccess callback if provided
+      if (onSuccess) {
+        onSuccess();
+      }
+    },
+  });
+  return { mutate, error, data, isPending };
+};