fix: show only needed links in appbar

openfoodfacts · Nov 20, 2024 · 69e8917 · 69e8917
1 parent f2b862b
commit 69e8917
Showing 1 changed file with 17 additions and 6 deletions.
diff --git a/src/components/AppBar.tsx b/src/components/AppBar.tsx
@@ -21,15 +21,16 @@ import LoginContext from '../contexts/login.tsx';
 
 
 const pages = [
-  { label: "Home", path: '/'}, 
-  { label: "Images", path: '/image-moderation' }, 
-  { label: "Product", path: '/moderation' },
+  { label: "Home", path: '/', showtoUsers: ['moderator', 'user'] }, 
+  { label: "Images", path: '/image-moderation', showtoUsers: ['moderator'] }, 
+  { label: "Product", path: '/moderation', showtoUsers: ['moderator'] },
 ];
 const settings = ['Logout'];
 
 function ResponsiveAppBar() {
 
-  const { isLoggedIn } = useContext(LoginContext);
+  const { isLoggedIn, isModerator } = useContext(LoginContext);
+  console.log(isLoggedIn, isModerator);
   const [anchorElNav, setAnchorElNav] = useState<null | HTMLElement>(null);
   const [anchorElUser, setAnchorElUser] = useState<null | HTMLElement>(null);
 
@@ -60,6 +61,16 @@ function ResponsiveAppBar() {
     window.location.reload();
   }
 
+  const filteredPages = isLoggedIn
+    ? pages.filter((page) =>
+        isModerator ? page.showtoUsers.includes('moderator') : page.showtoUsers.includes('user')
+      )
+    : 
+    pages.filter((page) => page.showtoUsers.includes('user'));
+
+  console.log(filteredPages);
+
+
   return (
     <AppBar position="static" sx={{backgroundColor: '#f2e9e4'}}>
       <Container maxWidth="xl">
@@ -121,7 +132,7 @@ function ResponsiveAppBar() {
                 display: { xs: 'block', md: 'none' },
               }}
             >
-              {pages.map((page) => (
+              {filteredPages.map((page) => (
                 <Link to={page.path} key={page.label}>
                   <MenuItem onClick={handleCloseNavMenu}>                  
                     <Typography 
@@ -169,7 +180,7 @@ function ResponsiveAppBar() {
             NUTRIPATROL
           </Typography>
           <Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
-            {pages.map((page) => (
+            {filteredPages.map((page) => (
               <Link to={page.path} key={page.label}>
                 <Button
                   onClick={handleCloseNavMenu}