Merge branch 'feature/confirm-order' of github.com:TickLabVN/ssps-fe …

…into feature/confirm-order

src/components/common/AppNavigation.tsx

@@ -1,12 +1,13 @@
 import { useMemo } from 'react';
-import { ChevronLeftIcon, UserCircleIcon } from '@heroicons/react/24/solid';
+import { ChevronLeftIcon, PowerIcon } from '@heroicons/react/24/solid';
 import coin from '@assets/coin.png';
 import { AppDrawer, DesktopNavbar, ToggleSidebarBtn, useSidebarMenu } from '@components/common';
 import { useCloseForm } from '@components/order/common';
 import { ScreenSize } from '@constants';
 import { useScreenSize, useUserQuery, usePrintingRequestQuery, emitEvent } from '@hooks';
 import { useMenuBarStore, useOrderWorkflowStore } from '@states';
 import { formatFileSize } from '@utils';
+import { useAuthMutation } from '@hooks';
 
 export const AppNavigation: Component<{ mainMenu: RouteMenu; subMenu: RouteMenu }> = ({
   mainMenu,
@@ -16,6 +17,7 @@ export const AppNavigation: Component<{ mainMenu: RouteMenu; subMenu: RouteMenu
   const { openSidebar, handleOpenSidebar, SidebarMenu } = useSidebarMenu();
   const { selectedMenu } = useMenuBarStore();
   const { desktopOrderStep } = useOrderWorkflowStore();
+  const { logout } = useAuthMutation();
 
   const { openCloseForm, CloseForm } = useCloseForm();
 
@@ -30,7 +32,9 @@ export const AppNavigation: Component<{ mainMenu: RouteMenu; subMenu: RouteMenu
     () => listFiles?.reduce((totalSize, file) => totalSize + file.fileSize, 0),
     [listFiles]
   );
-
+  const handleLogout = () => {
+    logout.mutateAsync();
+  };
   return (
     <div className='w-full max-h-[768px] py-3 shadow-md lg:sticky my-3 lg:my-0'>
       <div className='flex items-center justify-between px-6 lg:px-9'>
@@ -57,7 +61,10 @@ export const AppNavigation: Component<{ mainMenu: RouteMenu; subMenu: RouteMenu
             </div>
           )}
           <img className='w-7 h-7 lg:w-10 lg:h-10' src={coin} alt='coin'></img>
-          <UserCircleIcon className='w-10 h-10 hidden lg:block lg:opacity-40 lg:ml-6 lg:cursor-pointer' />
+          <PowerIcon
+            onClick={handleLogout}
+            className='w-10 h-10 hidden lg:block lg:opacity-40 lg:ml-6 lg:cursor-pointer'
+          />
         </div>
       </div>
       {screenSize >= ScreenSize.MD && desktopOrderStep > 0 && (

src/components/common/SidebarMenu.tsx

@@ -5,8 +5,10 @@ import logo from '@assets/logobk.png';
 import ticklab from '@assets/ticklab.png';
 import { ToggleSidebarBtn } from '@components/common';
 import { useMenuBarStore } from '@states';
+import { useAuthMutation } from '@hooks';
 
 export function useSidebarMenu() {
+  const { logout } = useAuthMutation();
   const { selectedMenu, setSelectedMenu } = useMenuBarStore();
 
   const ITEM_CLASSNAME =
@@ -54,6 +56,9 @@ export function useSidebarMenu() {
                     );
                   }
                 })}
+                <ListItem className={ITEM_CLASSNAME} onClick={() => logout.mutateAsync()}>
+                  Log out
+                </ListItem>
               </List>
               <List className='p-0'>
                 {subMenu.map((menuItem, idx) => {

src/hooks/index.ts

@@ -2,6 +2,7 @@
  * @file Automatically generated by barrelsby.
  */
 
+export * from './useAuthMutation';
 export * from './useEvent';
 export * from './usePrintingRequestMutation.hook';
 export * from './usePrintingRequestQuery.hook';

src/hooks/useAuthMutation.ts

@@ -0,0 +1,19 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { authService, userService } from '@services';
+
+export function useAuthMutation() {
+  const queryClient = useQueryClient();
+  const logout = useMutation({
+    mutationKey: ['logout'],
+    mutationFn: () => authService.logout(),
+    onSuccess: () => {
+      queryClient.prefetchQuery({
+        queryKey: ['/api/user'],
+        queryFn: () => userService.getInfo()
+      });
+    }
+  });
+  return {
+    logout: logout
+  };
+}

src/services/auth.service.ts

@@ -1,5 +1,6 @@
 import { apiClient, invoke } from './common';
 
 export const authService = {
-  login: (loginData: LoginFormData) => invoke(apiClient.POST('/auth/login', { body: loginData }))
+  login: (loginData: LoginFormData) => invoke(apiClient.POST('/auth/login', { body: loginData })),
+  logout: () => invoke(apiClient.DELETE('/auth/logout'))
 };