[Human App] HUM-39: click on logo redirects to home page (#2678)

Author: KacperKoza343

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,13 @@ 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>
         )}

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,20 @@ export function Navbar({
         top: open ? '0' : 'unset',
       }}
     >
-      <Stack sx={{ paddingLeft: '8px' }}>
+      <Grid
+        sx={{ cursor: 'pointer', paddingLeft: '8px' }}
+        onClick={() => {
+          if (isMobile) {
+            setOpen(false);
+          }
+          handleMainNavIconClick();
+        }}
+        role="button"
+        tabIndex={0}
+        aria-hidden="true"
+      >
         <HumanLogoIcon />
-      </Stack>
+      </Grid>
       <Grid
         sx={{
           display: 'flex',

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={{

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;
+};

packages/apps/human-app/frontend/src/pages/worker/jobs/components/available-jobs/mobile/available-jobs-drawer-mobile.tsx

@@ -8,16 +8,18 @@ import type { Dispatch, SetStateAction } from 'react';
 import { HumanLogoIcon } from '@/components/ui/icons';
 import { AvailableJobsNetworkFilterMobile } from '@/pages/worker/jobs/components/available-jobs/mobile/available-jobs-network-filter-mobile';
 import { AvailableJobsStatusFilterMobile } from '@/pages/worker/jobs/components/available-jobs/mobile/available-jobs-status-filter-mobile';
+import { useHandleMainNavIconClick } from '@/hooks/use-handle-main-nav-icon-click';
 import { AvailableJobsJobTypeFilterMobile } from '@/pages/worker/jobs/components/available-jobs/mobile/available-jobs-job-type-filter-mobile';
-import { useColorMode } from '@/hooks/use-color-mode';
 import { AvailableJobsRewardAmountSortMobile } from '@/pages/worker/jobs/components/available-jobs/mobile/available-jobs-reward-amount-sort-mobile';
+import { useColorMode } from '@/hooks/use-color-mode';
 
 interface DrawerMobileProps {
   setIsMobileFilterDrawerOpen: Dispatch<SetStateAction<boolean>>;
 }
 export function AvailableJobsDrawerMobile({
   setIsMobileFilterDrawerOpen,
 }: DrawerMobileProps) {
+  const handleMainNavIconClick = useHandleMainNavIconClick();
   const { colorPalette } = useColorMode();
   const { t } = useTranslation();
 
@@ -55,7 +57,14 @@ export function AvailableJobsDrawerMobile({
             zIndex: '999999',
           }}
         >
-          <HumanLogoIcon />
+          <Stack
+            sx={{ cursor: 'pointer' }}
+            onClick={() => {
+              handleMainNavIconClick();
+            }}
+          >
+            <HumanLogoIcon />
+          </Stack>
 
           <IconButton
             onClick={() => {

packages/apps/human-app/frontend/src/pages/worker/jobs/components/my-jobs/mobile/my-jobs-drawer-mobile.tsx

@@ -9,6 +9,7 @@ import { HumanLogoIcon } from '@/components/ui/icons';
 import { useColorMode } from '@/hooks/use-color-mode';
 import { MyJobsRewardAmountSortMobile } from '@/pages/worker/jobs/components/my-jobs/mobile/my-jobs-reward-amount-sort-mobile';
 import { MyJobsExpiresAtSortMobile } from '@/pages/worker/jobs/components/my-jobs/mobile/my-jobs-expires-at-sort-mobile';
+import { useHandleMainNavIconClick } from '@/hooks/use-handle-main-nav-icon-click';
 import { MyJobsNetworkFilterMobile } from './my-jobs-network-filter-mobile';
 import { MyJobsJobTypeFilterMobile } from './my-jobs-job-type-filter-mobile';
 import { MyJobsStatusFilterMobile } from './my-jobs-status-filter-mobile';
@@ -19,6 +20,7 @@ interface DrawerMobileProps {
 export function MyJobsDrawerMobile({
   setIsMobileFilterDrawerOpen,
 }: DrawerMobileProps) {
+  const handleMainNavIconClick = useHandleMainNavIconClick();
   const { colorPalette } = useColorMode();
   const { t } = useTranslation();
 
@@ -56,7 +58,14 @@ export function MyJobsDrawerMobile({
             zIndex: '999999',
           }}
         >
-          <HumanLogoIcon />
+          <Stack
+            sx={{ cursor: 'pointer' }}
+            onClick={() => {
+              handleMainNavIconClick();
+            }}
+          >
+            <HumanLogoIcon />
+          </Stack>
 
           <IconButton
             onClick={() => {