fix(human-app/frontend/logo-icon): handle logo icon click

humanprotocol · Oct 25, 2024 · 846223a · 846223a
1 parent ccb06ae
commit 846223a
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 5 deletions.
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
@@ -16,6 +16,7 @@ import { NAVBAR_PADDING } from '@/components/layout/protected/navbar';
 import { colorPalette } from '@/styles/color-palette';
 import { useColorMode } from '@/hooks/use-color-mode';
 import { onlyDarkModeColor } from '@/styles/dark-color-palette';
+import { useHandleMainNavIconClick } from '@/hooks/use-handle-main-nav-icon-click';
 
 const drawerWidth = 240;
 
@@ -49,6 +50,7 @@ export function DrawerNavigation({
   const navigate = useNavigate();
   const isMobile = useIsMobile();
   const location = useLocation();
+  const handleMainNavIconClick = useHandleMainNavIconClick();
 
   return (
     <Box
@@ -72,7 +74,11 @@ export function DrawerNavigation({
         variant="persistent"
       >
         {!isMobile && (
-          <Stack alignItems="flex-start" sx={{ paddingLeft: '26px' }}>
+          <Stack
+            alignItems="flex-start"
+            sx={{ paddingLeft: '26px', cursor: 'pointer' }}
+            onClick={handleMainNavIconClick}
+          >
             <HumanLogoNavbarIcon />
           </Stack>
         )}

diff --git a/packages/apps/human-app/frontend/src/components/layout/protected/navbar.tsx b/packages/apps/human-app/frontend/src/components/layout/protected/navbar.tsx
@@ -7,6 +7,7 @@ import { useIsMobile } from '@/hooks/use-is-mobile';
 import { Button } from '@/components/ui/button';
 import { useIsHCaptchaLabelingPage } from '@/hooks/use-is-hcaptcha-labeling-page';
 import { useColorMode } from '@/hooks/use-color-mode';
+import { useHandleMainNavIconClick } from '@/hooks/use-handle-main-nav-icon-click';
 
 export const NAVBAR_PADDING = '16px';
 
@@ -23,6 +24,7 @@ export function Navbar({
   userStatsDrawerOpen,
   toggleUserStatsDrawer,
 }: NavbarProps) {
+  const handleMainNavIconClick = useHandleMainNavIconClick();
   const { colorPalette } = useColorMode();
   const isMobile = useIsMobile();
   const isHCaptchaLabelingPage = useIsHCaptchaLabelingPage();
@@ -79,9 +81,17 @@ export function Navbar({
         top: open ? '0' : 'unset',
       }}
     >
-      <Stack sx={{ paddingLeft: '8px' }}>
+      <Grid
+        sx={{ cursor: 'pointer', paddingLeft: '8px' }}
+        onClick={() => {
+          handleMainNavIconClick();
+        }}
+        role="button"
+        tabIndex={0}
+        aria-hidden="true"
+      >
         <HumanLogoIcon />
-      </Stack>
+      </Grid>
       <Grid
         sx={{
           display: 'flex',

diff --git a/packages/apps/human-app/frontend/src/components/layout/unprotected/navbar.tsx b/packages/apps/human-app/frontend/src/components/layout/unprotected/navbar.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Box, Drawer, IconButton } from '@mui/material';
+import { Box, Drawer, Grid, IconButton } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import MenuIcon from '@mui/icons-material/Menu';
 import { Link } from 'react-router-dom';
@@ -10,6 +10,7 @@ import { breakpoints } from '@/styles/breakpoints';
 import { env } from '@/shared/env';
 import { useHomePageState } from '@/contexts/homepage-state';
 import { DarkModeSwitch } from '@/components/ui/dark-mode-switch';
+import { useHandleMainNavIconClick } from '@/hooks/use-handle-main-nav-icon-click';
 
 interface NavbarProps {
   withNavigation: boolean;
@@ -20,6 +21,7 @@ export function Navbar({ withNavigation }: NavbarProps) {
   const { t } = useTranslation();
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
   const isMobile = useIsMobile();
+  const handleMainNavIconClick = useHandleMainNavIconClick();
 
   return (
     <Box
@@ -40,7 +42,17 @@ export function Navbar({ withNavigation }: NavbarProps) {
         },
       }}
     >
-      {isMobile ? <HumanLogoIcon /> : <HumanLogoNavbarIcon />}
+      <Grid
+        sx={{ cursor: 'pointer' }}
+        onClick={() => {
+          handleMainNavIconClick();
+        }}
+        role="button"
+        tabIndex={0}
+        aria-hidden="true"
+      >
+        {isMobile ? <HumanLogoIcon /> : <HumanLogoNavbarIcon />}
+      </Grid>
       {withNavigation ? (
         <Box
           sx={{

diff --git a/packages/apps/human-app/frontend/src/hooks/use-handle-main-nav-icon-click.tsx b/packages/apps/human-app/frontend/src/hooks/use-handle-main-nav-icon-click.tsx
@@ -0,0 +1,28 @@
+import { useNavigate } from 'react-router-dom';
+import { useWeb3Auth } from '@/auth-web3/use-web3-auth';
+import { useAuth } from '@/auth/use-auth';
+import { useHomePageState } from '@/contexts/homepage-state';
+import { routerPaths } from '@/router/router-paths';
+
+export const useHandleMainNavIconClick = () => {
+  const navigate = useNavigate();
+  const { user: web3User } = useWeb3Auth();
+  const { user: web2Auth } = useAuth();
+  const { setPageView } = useHomePageState();
+
+  const handleIconClick = () => {
+    if (web3User) {
+      navigate(routerPaths.operator.profile);
+      return;
+    }
+
+    if (web2Auth) {
+      navigate(routerPaths.worker.profile);
+      return;
+    }
+    setPageView('welcome');
+    navigate(routerPaths.homePage);
+  };
+
+  return handleIconClick;
+};