fix(logout): fix logic code undefined in invoke api

src/App.tsx

@@ -6,6 +6,7 @@ import { MAIN_MENU, SUB_MENU } from '@constants';
 import { useUserQuery } from '@hooks';
 import { AppLayout, AuthLayout } from '@layouts';
 import { AuthPage, HomePage } from '@pages';
+import { authService } from './services/auth.service';
 
 export default function App() {
   const navigate: NavigateFunction = useNavigate();
@@ -84,8 +85,7 @@ export default function App() {
           {
             type: 'logout-btn',
             name: SUB_MENU.logout,
-            onClick() {}
-            //onClick: () => authService.logout().then(() => getData())
+            onClick: () => authService.logout().then(() => refetch())
           }
         ]}
       />

src/components/common/AppNavigation.tsx

@@ -4,10 +4,15 @@ 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 {
+  useScreenSize,
+  useUserQuery,
+  usePrintingRequestQuery,
+  useAuthMutation,
+  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,
@@ -32,9 +37,7 @@ 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'>
@@ -62,7 +65,7 @@ export const AppNavigation: Component<{ mainMenu: RouteMenu; subMenu: RouteMenu
           )}
           <img className='w-7 h-7 lg:w-10 lg:h-10' src={coin} alt='coin'></img>
           <PowerIcon
-            onClick={handleLogout}
+            onClick={() => logout.mutateAsync()}
             className='w-10 h-10 hidden lg:block lg:opacity-40 lg:ml-6 lg:cursor-pointer'
           />
         </div>

src/components/common/SidebarMenu.tsx

@@ -5,10 +5,8 @@ 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 =
@@ -56,9 +54,6 @@ export function useSidebarMenu() {
                     );
                   }
                 })}
-                <ListItem className={ITEM_CLASSNAME} onClick={() => logout.mutateAsync()}>
-                  Log out
-                </ListItem>
               </List>
               <List className='p-0'>
                 {subMenu.map((menuItem, idx) => {
@@ -81,6 +76,12 @@ export function useSidebarMenu() {
                         </ListItem>
                       </Link>
                     );
+                  } else if (menuItem.type === 'logout-btn') {
+                    return (
+                      <ListItem key={idx} className={ITEM_CLASSNAME} onClick={menuItem.onClick}>
+                        {menuItem.name}
+                      </ListItem>
+                    );
                   }
                 })}
               </List>

src/components/order/desktop/TopUpWalletDesktop.tsx

@@ -1,9 +1,6 @@
 import { InformationCircleIcon, BanknotesIcon, WalletIcon } from '@heroicons/react/24/outline';
 import { Button, Radio } from '@material-tailwind/react';
 import coinImage from '@assets/coin.png';
-import momoImage from '@assets/momo.png';
-import zaloImage from '@assets/zalo.png';
-import VNPayImage from '@assets/VNPay.png';
 
 export const TopUpWalletDestop = () => {
   const currentBalance = 202;
@@ -12,15 +9,15 @@ export const TopUpWalletDestop = () => {
   const amountLevel = 100000;
   const methodList = [
     {
-      image: momoImage,
+      image: coinImage,
       method: 'Momo'
     },
     {
-      image: zaloImage,
+      image: coinImage,
       method: 'Zalo'
     },
     {
-      image: VNPayImage,
+      image: coinImage,
       method: 'VNPay'
     }
   ];

src/hooks/index.ts

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

src/hooks/useAuthMutation.ts → src/hooks/useAuthMutation.hook.ts

@@ -3,13 +3,15 @@ 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()
+        queryFn: () => userService.getInfo(),
+        retry: 0
       });
     }
   });

src/hooks/usePrintingRequestMutation.hook.ts

@@ -1,5 +1,6 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { printingRequestService, buyCoinService, userService } from '@services';
+import { retryQueryFn } from '@utils';
 
 export function usePrintingRequestMutation() {
   const queryClient = useQueryClient();
@@ -65,7 +66,8 @@ export function usePrintingRequestMutation() {
     onSuccess: () => {
       queryClient.prefetchQuery({
         queryKey: ['/api/user/remain-coins'],
-        queryFn: () => userService.getRemainCoins()
+        queryFn: () => userService.getRemainCoins(),
+        retry: retryQueryFn
       });
     }
   });

src/services/common.ts

@@ -8,6 +8,6 @@ export const apiClient = createClient<paths>({
 
 export async function invoke<T = unknown>(call: Promise<FetchResponse<T>>) {
   const { data, error } = await call;
-  if (data) return data;
+  if (data !== undefined) return data;
   throw (error as ResponseError).message;
 }