refactor(app): refactor according to review

blockydevs · Jun 20, 2024 · d0a8292 · d0a8292
1 parent ca75913
commit d0a8292
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 27 deletions.
diff --git a/packages/apps/human-app/frontend/src/api/servieces/worker/get-kyc-session-id.ts b/packages/apps/human-app/frontend/src/api/servieces/worker/get-kyc-session-id.ts
@@ -21,14 +21,6 @@ type KycSessionIdMutationResult =
   | (KycSessionIdSuccessSchema & { error?: never })
   | { session_id?: never; error: KycError };
 
-// 401 - unauthenticated also means that email not verified
-// 400 - bad request also means that KYC already approved
-
-// normally if app receives 401 status code it tries to obtain
-// access token with refresh token, kycSessionIdMutation has to
-// implement its own flow to handle that case because 401 that
-// can be revived for "kyc/start" doesn't mean that JWT token expired
-
 export function useKycSessionIdMutation(callbacks: {
   onError?: (error: ResponseError) => void;
   onSuccess?: () => void;
@@ -81,6 +73,13 @@ export function useKycSessionIdMutation(callbacks: {
         });
         return response;
       } catch (error) {
+        // 401 - unauthenticated also means that email not verified
+        // 400 - bad request also means that KYC already approved
+
+        // normally if app receives 401 status code it tries to obtain
+        // access token with refresh token, kycSessionIdMutation has to
+        // implement its own flow to handle that case because 401 that
+        // can be revived for "kyc/start" doesn't mean that JWT token expired
         if (error instanceof FetchError) {
           if (error.status === 401) {
             return { error: 'emailNotVerified' };

diff --git a/...s/human-app/frontend/src/components/layout/drawer-menu-items/drawer-menu-items-worker.tsx b/...s/human-app/frontend/src/components/layout/drawer-menu-items/drawer-menu-items-worker.tsx
@@ -7,10 +7,10 @@ import type {
 } from '@/components/layout/protected/drawer-navigation';
 import { HelpIcon, UserOutlinedIcon, WorkIcon } from '@/components/ui/icons';
 import { routerPaths } from '@/router/router-paths';
-import { useAuth } from '@/auth/use-auth';
 
-export const WorkerDrawerTopMenuItems = (): TopMenuItem[] => {
-  const { user } = useAuth();
+export const workerDrawerTopMenuItems = (
+  disableLabeling: boolean
+): TopMenuItem[] => {
   return [
     <Grid
       key={crypto.randomUUID()}
@@ -29,7 +29,7 @@ export const WorkerDrawerTopMenuItems = (): TopMenuItem[] => {
     {
       label: t('components.DrawerNavigation.captchaLabelling'),
       link: routerPaths.worker.enableLabeler,
-      disabled: Boolean(!user?.address),
+      disabled: disableLabeling,
     },
     {
       label: t('components.DrawerNavigation.jobsDiscovery'),
@@ -38,7 +38,6 @@ export const WorkerDrawerTopMenuItems = (): TopMenuItem[] => {
   ];
 };
 
-// eslint-disable-next-line react-refresh/only-export-components -- ...
 export const workerDrawerBottomMenuItems: BottomMenuItem[] = [
   {
     label: t('components.DrawerNavigation.profile'),

diff --git a/packages/apps/human-app/frontend/src/components/layout/protected/drawer-navigation.tsx b/packages/apps/human-app/frontend/src/components/layout/protected/drawer-navigation.tsx
@@ -91,11 +91,12 @@ export function DrawerNavigation({
 
               const { link, label, disabled } = item;
               return (
-                <ListItem disablePadding disabled={disabled} key={link}>
+                <ListItem disablePadding key={link}>
                   <ListItemButton
+                    disabled={disabled}
                     onClick={() => {
+                      if (disabled) return;
                       if (link) {
-                        if (disabled) return;
                         navigate(link);
                       }
                     }}

diff --git a/packages/apps/human-app/frontend/src/hooks/use-kyc-notification.tsx b/packages/apps/human-app/frontend/src/hooks/use-kyc-notification.tsx
@@ -2,15 +2,13 @@ import { useProtectedLayoutNotification } from '@/hooks/use-protected-layout-not
 import { defaultErrorMessage } from '@/shared/helpers/default-error-message';
 import type { ResponseError } from '@/shared/types/global.type';
 
-export function useKycNotifications() {
+export function useKycErrorNotifications() {
   const { setTopNotification } = useProtectedLayoutNotification();
 
-  return {
-    onError: (error: ResponseError) => {
-      setTopNotification({
-        type: 'warning',
-        content: defaultErrorMessage(error),
-      });
-    },
+  return (error: ResponseError) => {
+    setTopNotification({
+      type: 'warning',
+      content: defaultErrorMessage(error),
+    });
   };
 }
diff --git a/packages/apps/human-app/frontend/src/pages/worker/profile/profile-actions.tsx b/packages/apps/human-app/frontend/src/pages/worker/profile/profile-actions.tsx
@@ -14,13 +14,13 @@ import { RegisterAddressAction } from '@/pages/worker/profile/register-address-a
 import { RequireWalletConnect } from '@/auth-web3/require-wallet-connect';
 import { useResendEmailVerificationWorkerMutation } from '@/api/servieces/worker/resend-email-verification';
 import { WalletConnectDone } from '@/pages/worker/profile/wallet-connect-done';
-import { useKycNotifications } from '@/hooks/use-kyc-notification';
+import { useKycErrorNotifications } from '@/hooks/use-kyc-notification';
 
 export function ProfileActions() {
   const navigation = useNavigate();
   const { mutate: resendEmailVerificationMutation } =
     useResendEmailVerificationWorkerMutation();
-  const { onError } = useKycNotifications();
+  const onError = useKycErrorNotifications();
   const {
     data: kycSessionIdData,
     mutate: kycSessionIdMutation,

diff --git a/packages/apps/human-app/frontend/src/router/router.tsx b/packages/apps/human-app/frontend/src/router/router.tsx
@@ -12,14 +12,16 @@ import { RequireWalletConnect } from '@/auth-web3/require-wallet-connect';
 import { RequireWeb3Auth } from '@/auth-web3/require-web3-auth';
 import { DrawerNavigation } from '@/components/layout/protected/drawer-navigation';
 import {
-  WorkerDrawerTopMenuItems,
+  workerDrawerTopMenuItems,
   workerDrawerBottomMenuItems,
 } from '@/components/layout/drawer-menu-items/drawer-menu-items-worker';
 import { operatorDrawerBottomMenuItems } from '@/components/layout/drawer-menu-items/drawer-menu-items-operator';
 import { browserAuthProvider } from '@/shared/helpers/browser-auth-provider';
 import { UserStatsDrawer } from '@/pages/worker/hcaptcha-labeling/hcaptcha-labeling/user-stats-drawer';
+import { useAuth } from '@/auth/use-auth';
 
 export function Router() {
+  const { user } = useAuth();
   return (
     <Routes>
       <Route element={<LayoutUnprotected />}>
@@ -54,7 +56,7 @@ export function Router() {
                       window.location.reload();
                     });
                   }}
-                  topMenuItems={WorkerDrawerTopMenuItems()}
+                  topMenuItems={workerDrawerTopMenuItems(!user?.address)}
                 />
               )}
               renderHCaptchaStatisticsDrawer={(isOpen) => (