feat(GIST-71): sign out (#31)

src/app/(gistLayout)/layout.tsx

@@ -1,23 +1,30 @@
-'use client'
-
-import { ReactNode, useCallback } from 'react'
-import GistLayout from './layout-ui'
-import { useMe } from '@/lib/queries/user.queries'
-import { useToast } from '@/components/shadcn/use-toast'
-import { useCreateGist } from '@/lib/queries/gists.queries'
-import { useCreateOrg } from '@/lib/queries/orgs.queries'
-
-export default function GistLayoutFeature({ children }: { children: ReactNode }) {
-  const { data, error } = useMe()
-  const { toast } = useToast()
+"use client";
+
+import { ReactNode, useCallback } from "react";
+import GistLayout from "./layout-ui";
+import { useMe } from "@/lib/queries/user.queries";
+import { useToast } from "@/components/shadcn/use-toast";
+import { useCreateGist } from "@/lib/queries/gists.queries";
+import { useCreateOrg } from "@/lib/queries/orgs.queries";
+import { useLogout } from "@/lib/queries/auth.queries";
+import { redirect } from "next/navigation";
+import { useRouter } from "next/router";
+
+export default function GistLayoutFeature({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  const { data, error } = useMe();
+  const { toast } = useToast();
   const { mutate: createGist } = useCreateGist({
     onSuccess: () => {
       toast({
-        title: 'Gist Created',
-        description: 'Your gist has been created successfully',
-      })
+        title: "Gist Created",
+        description: "Your gist has been created successfully",
+      });
     },
-  })
+  });
 
   const { mutate: createOrg } = useCreateOrg({
     onSuccess: () => {
@@ -26,25 +33,37 @@ export default function GistLayoutFeature({ children }: { children: ReactNode })
         description: "Your org has been created successfully",
       });
     },
-  })
+  });
+
+  const { mutate: logout } = useLogout({
+    onSuccess: () => {
+      toast({
+        title: "Logged Out",
+        description: "You have been logged out successfully",
+      });
+      window.location.href = "/"; //sorry but couldn't find a way to redirect to the login page
+    },
+  });
 
   const onMyGists = () => {};
 
   const onCreateOrg = useCallback(
     (name: string) => {
-      createOrg(name)
+      createOrg(name);
     },
     [createOrg],
   );
 
-  const onLogout = () => {}
+  const onLogout = () => {
+    logout();
+  };
 
   const onCreateGist = (name: string, content: string) => {
     createGist({
       content,
       name,
-    })
-  }
+    });
+  };
 
   return (
     <GistLayout
@@ -57,5 +76,5 @@ export default function GistLayoutFeature({ children }: { children: ReactNode })
     >
       {children}
     </GistLayout>
-  )
+  );
 }

src/lib/queries/auth.queries.tsx

@@ -1,7 +1,7 @@
 "use client";
 import ky from "ky";
 import { getBackendURL } from "../utils";
-import { useMutation } from "@tanstack/react-query";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import getQueryClient from "./queries";
 
 const fetchLocalAuth = async ({ email }: { email: string }) => {
@@ -30,6 +30,15 @@ const fetchLocalAuthVerify = async ({
   return json;
 };
 
+const fetchLogout = async () => {
+  const json = await ky
+    .post(`${getBackendURL()}/auth/logout`, {
+      credentials: "include",
+    })
+    .json();
+  return json;
+};
+
 export const renewToken = async () => {
   const json = await ky
     .post(`${getBackendURL()}/auth/identity/renew`, {
@@ -61,3 +70,17 @@ export const useLocalAuthVerify = () => {
   });
   return { mutate, error, isPending, data };
 };
+
+export const useLogout = ({ onSuccess }: { onSuccess?: () => void } = {}) => {
+  const queryClient = useQueryClient();
+  const { mutate, error, isPending } = useMutation({
+    mutationFn: () => {
+      return fetchLogout();
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["me"] });
+      onSuccess && onSuccess();
+    },
+  });
+  return { mutate, error, isPending };
+};