feat: add logout button

apps/frontend/src/api/user/all/mutations/logoutMutation/logoutMutation.ts

@@ -5,19 +5,25 @@ import { type LogoutUserBody, type LogoutUserPathParams } from '@common/contract
 import { HttpService } from '../../../../../services/httpService/httpService';
 import { UserApiError } from '../../../errors/userApiError';
 
-type LogoutUserPayload = LogoutUserBody & LogoutUserPathParams;
+type LogoutUserPayload = LogoutUserBody &
+  LogoutUserPathParams & {
+    accessToken: string;
+  };
 
 export const useLogoutUserMutation = (
   options: UseMutationOptions<void, UserApiError, LogoutUserPayload>,
 ): UseMutationResult<void, UserApiError, LogoutUserPayload, unknown> => {
   const logoutUser = async (values: LogoutUserPayload): Promise<void> => {
-    const { id, refreshToken } = values;
+    const { id, refreshToken, accessToken } = values;
 
     const logoutUserResponse = await HttpService.post<void>({
-      url: `/users/login/${id}/logout`,
+      url: `/users/${id}/logout`,
       body: {
         refreshToken,
       },
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
     });
 
     if (logoutUserResponse.success === false) {

apps/frontend/src/routes/__root.tsx

@@ -2,9 +2,11 @@ import { createRootRoute, Link, Outlet } from '@tanstack/react-router';
 import { TanStackRouterDevtools } from '@tanstack/router-devtools';
 import { useEffect } from 'react';
 
+import { useLogoutUserMutation } from '../api/user/all/mutations/logoutMutation/logoutMutation';
 import { useFindMeQuery } from '../api/user/all/queries/findMeQuery/findMe';
 import { useUserStore } from '../core/stores/userStore/userStore';
 import { useUserTokensStore } from '../core/stores/userTokens/userTokens';
+import { CookieService } from '../services/cookieService/cookieService';
 
 import { ModeToggle } from '@/components/mode-toggle';
 import { ThemeProvider } from '@/components/theme-provider';
@@ -16,6 +18,14 @@ export const Route = createRootRoute({
 function RootComponent(): JSX.Element {
   const accessToken = useUserTokensStore((userTokens) => userTokens.accessToken);
 
+  const refreshToken = useUserTokensStore((userTokens) => userTokens.refreshToken);
+
+  const { mutateAsync: logout } = useLogoutUserMutation({});
+
+  const removeTokens = useUserTokensStore((state) => state.removeTokens);
+
+  const removeUserDetails = useUserStore((state) => state.removeUser);
+
   const { data } = useFindMeQuery({
     accessToken: accessToken as string,
   });
@@ -66,6 +76,26 @@ function RootComponent(): JSX.Element {
                 >
                   Dashboard
                 </Link>
+                <Link
+                  to="/"
+                  onClick={async () => {
+                    await logout({
+                      id: data?.id as string,
+                      refreshToken: refreshToken as string,
+                      accessToken: accessToken as string,
+                    });
+
+                    removeTokens();
+
+                    removeUserDetails();
+
+                    CookieService.removeUserDataCookie();
+
+                    CookieService.removeUserTokensCookie();
+                  }}
+                >
+                  Logout
+                </Link>
               </>
             ) : (
               <>

apps/frontend/src/routes/dashboard/index.tsx

@@ -28,8 +28,6 @@ function Dashboard(): JSX.Element {
 
   const userId = useUserStore((state) => state.user.id);
 
-  // const buckets = useSuspenseQuery(findBucketsQueryOptions(tokens.getState().accessToken as string));
-
   const bucketsQuery = findBucketsQueryOptions({
     accessToken: accessToken as string,
     userId: userId as string,
@@ -67,12 +65,12 @@ function Dashboard(): JSX.Element {
   return (
     <div className="w-full flex justify-center p-4">
       <select>
-        {bucketsData?.map((option) => (
+        {bucketsData?.data?.map((option) => (
           <option
-            key={option}
-            value={option}
+            key={option.name}
+            value={option.name}
           >
-            {option}
+            {option.name}
           </option>
         ))}
       </select>