fix: hide my account from appbar if not logged in

AAISS · Nov 26, 2023 · 2cf770b · 2cf770b
1 parent a534350
commit 2cf770b
Showing 1 changed file with 52 additions and 24 deletions.
diff --git a/frontend/src/Components/app-bar/AppBar.jsx b/frontend/src/Components/app-bar/AppBar.jsx
@@ -32,7 +32,7 @@ const NavBarImage = () => (
 );
 
 export default function DrawerAppBar() {
-  const { ROUTES, currentRoute, setCurrentRoute } = useConfig();
+  const { ROUTES, currentRoute, setCurrentRoute, accessToken, refreshToken } = useConfig();
   const [mobileOpen, setMobileOpen] = React.useState(false);
 
   const { getVariant } = useNavItem();
@@ -43,22 +43,45 @@ export default function DrawerAppBar() {
     setMobileOpen((prevState) => !prevState);
   };
 
+  const shouldShowRoute = (route) => {
+    if (route.title === 'My Account') {
+      if (accessToken || refreshToken) {
+        return true;
+      }
+      console.log('not signed in');
+      return false;
+    }
+
+    if (route.title === 'Signup') {
+      if (accessToken || refreshToken) {
+        return false;
+      }
+      return true;
+    }
+
+    return true;
+  };
+
   const drawer = (
     <Box onClick={handleDrawerToggle} sx={{ textAlign: 'center' }}>
       <Link to={ROUTES.home.path} className="logo-item" onClick={() => setCurrentRoute(ROUTES.home)}>
         <NavBarImage />
       </Link>
       <Divider style={{ backgroundColor: 'var(--dark-text-color)' }} />
       <List>
-        {appBarPaths.map((name, index) => (
-          <Link to={ROUTES[name].path} style={{ color: 'white', textDecoration: 'none' }} key={index}>
-            <ListItem disablePadding>
-              <ListItemButton sx={{ textAlign: 'center' }}>
-                <ListItemText primary={name} />
-              </ListItemButton>
-            </ListItem>
-          </Link>
-        ))}
+        {appBarPaths.map((name, index) => {
+          return (
+            shouldShowRoute(ROUTES[name]) && (
+              <Link to={ROUTES[name].path} style={{ color: 'white', textDecoration: 'none' }} key={index}>
+                <ListItem disablePadding>
+                  <ListItemButton sx={{ textAlign: 'center' }}>
+                    <ListItemText primary={name} />
+                  </ListItemButton>
+                </ListItem>
+              </Link>
+            )
+          );
+        })}
       </List>
     </Box>
   );
@@ -80,20 +103,25 @@ export default function DrawerAppBar() {
             <NavBarImage />
           </Link>
           <Box sx={{ display: { xs: 'none', sm: 'block' } }}>
-            {appBarPaths.map((name, index) => (
-              <Link to={ROUTES[name].path} key={index}>
-                <Button
-                  variant={getVariant(ROUTES[name].path, currentRoute.path)}
-                  onClick={() => setCurrentRoute(ROUTES[name])}
-                  sx={{
-                    color: '#fff',
-                    paddingRight: 2,
-                  }}
-                >
-                  {name}
-                </Button>
-              </Link>
-            ))}
+            {appBarPaths.map((name, index) => {
+              console.log(shouldShowRoute(name) === false);
+              return (
+                shouldShowRoute(ROUTES[name]) && (
+                  <Button
+                    href={ROUTES[name].path}
+                    key={index}
+                    variant={getVariant(ROUTES[name].path, currentRoute.path)}
+                    onClick={() => setCurrentRoute(ROUTES[name])}
+                    sx={{
+                      color: '#fff',
+                      paddingRight: 2,
+                    }}
+                  >
+                    {name}
+                  </Button>
+                )
+              );
+            })}
           </Box>
         </Toolbar>
       </AppBar>