From f7c1cda676cdd709ab71fad18d00ba4e278e0bce Mon Sep 17 00:00:00 2001 From: Courtcircuits Date: Fri, 4 Oct 2024 20:17:56 +0200 Subject: [PATCH] feat(GIST-42): implemented gist update action --- src/app/(gistLayout)/mygist/[gistId]/page.tsx | 75 ++++++++++----- .../team/[teamId]/gist/[gistId]/page.tsx | 79 ++++++++++------ src/lib/queries/gists.queries.tsx | 93 +++++++++++++++++++ 3 files changed, 197 insertions(+), 50 deletions(-) diff --git a/src/app/(gistLayout)/mygist/[gistId]/page.tsx b/src/app/(gistLayout)/mygist/[gistId]/page.tsx index ade8cbd..4c77b28 100644 --- a/src/app/(gistLayout)/mygist/[gistId]/page.tsx +++ b/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 + return ( + + ); } diff --git a/src/app/(gistLayout)/team/[teamId]/gist/[gistId]/page.tsx b/src/app/(gistLayout)/team/[teamId]/gist/[gistId]/page.tsx index 1faea73..37c2f24 100644 --- a/src/app/(gistLayout)/team/[teamId]/gist/[gistId]/page.tsx +++ b/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 + return ( + + ); } diff --git a/src/lib/queries/gists.queries.tsx b/src/lib/queries/gists.queries.tsx index b99c30c..6b23afe 100644 --- a/src/lib/queries/gists.queries.tsx +++ b/src/lib/queries/gists.queries.tsx @@ -63,6 +63,49 @@ const fetchCreateGist = async (gist: CreateGistPayload): Promise => { }; }; +export interface PatchGistNamePayload { + id: string; + name: string; +} + +const fetchPatchGistName = async ( + payload: PatchGistNamePayload, +): Promise => { + const json = await ky + .patch(`${getBackendURL()}/gists/${payload.id}/name`, { + credentials: "include", + json: { name: payload.name }, + }) + .json(); + return { + id: json.id, + name: json.name, + code: json.content, + }; +}; + +export interface PatchGistContentPayload { + id: string; + content: string; +} + +const fetchPatchGistContent = async ( + payload: PatchGistContentPayload, +): Promise => { + const json = await ky + .patch(`${getBackendURL()}/gists/${payload.id}/content`, { + credentials: "include", + json: { content: payload.content }, + }) + .json(); + + 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 }; +};