change about us to about, use useNavigate instead of component/to, intitialize List items as Objects

code/frontend/src/components/Header.tsx

@@ -16,105 +16,93 @@ import InfoIcon from "@mui/icons-material/Info";
 import LogoutIcon from "@mui/icons-material/Logout";
 import ExitToAppIcon from "@mui/icons-material/ExitToApp";
 import FollowTheSignsIcon from "@mui/icons-material/FollowTheSigns";
-import { Link } from "react-router-dom";
+import { useNavigate, replace } from "react-router-dom";
 import { useAuth } from "../api/Auth";
 
 function Header() {
+  interface ListItemAttributes {
+    text: string;
+    icon: React.ElementType;
+    onClick: () => void;
+    onlyShowWhen: "loggedIn" | "loggedOut" | "always";
+  }
+  const navigate = useNavigate();
   const [isOpen, setIsOpen] = useState(false);
   const toggleMenu = () => {
     setIsOpen(!isOpen);
   };
   const { logout, user } = useAuth();
-	const iconList = [
+  const ListItems: ListItemAttributes[] = [
-		DynamicFeedIcon,
+    {
-		AddAPhotoIcon,
+      text: "Feed",
-		PersonIcon,
+      icon: DynamicFeedIcon,
-		InfoIcon,
+      onClick: () => navigate("/feed", { replace: true }),
-		LogoutIcon,
+      onlyShowWhen: "always",
-		ExitToAppIcon,
+    },
-		FollowTheSignsIcon,
+    {
-	];
+      text: "Create Post",
-	const routerLinksList = [
+      icon: AddAPhotoIcon,
-		"/feed",
+      onClick: () => navigate("/createpost", { replace: true }),
-		"/createpost",
+      onlyShowWhen: "loggedIn",
-		"/profile",
+    },
-		"/about",
+    {
-		"/login",
+      text: "Profile",
-		"/register",
+      icon: PersonIcon,
+      onClick: () => navigate("/profile", { replace: true }),
+      onlyShowWhen: "loggedIn",
+    },
+    {
+      text: "About",
+      icon: InfoIcon,
+      onClick: () => navigate("/about", { replace: true }),
+      onlyShowWhen: "always",
+    },
+    {
+      text: "Log Out",
+      icon: LogoutIcon,
+      onClick: logout,
+      onlyShowWhen: "loggedIn",
+    },
+    {
+      text: "Log In",
+      icon: ExitToAppIcon,
+      onClick: () => navigate("/login", { replace: true }),
+      onlyShowWhen: "loggedOut",
+    },
+    {
+      text: "Sign Up",
+      icon: FollowTheSignsIcon,
+      onClick: () => navigate("/register", { replace: true }),
+      onlyShowWhen: "loggedOut",
+    },
   ];
 
   const DrawerList = (
     <Box role="menu" onClick={() => setIsOpen(false)}>
       <List className="drawer-list">
-				{["Feed", "Create Post", "Profile", "About Us"].map((text, index) => (
+        {ListItems.map((ListItemObject, index) =>
-					<ListItem className="drawer-list-item" key={text} disablePadding>
+          ListItemObject.onlyShowWhen == "always" ||
-						<ListItemButton
+          (ListItemObject.onlyShowWhen == "loggedIn" && user) ||
-							className="drawer-list-item-button"
+          (ListItemObject.onlyShowWhen == "loggedOut" && !user) ? (
-							component={Link}
-							to={routerLinksList[index]}
-						>
-							<ListItemIcon className="drawer-list-item">
-								{React.createElement(iconList[index])}
-							</ListItemIcon>
-							<ListItemText className="drawer-list-item" primary={text} />
-						</ListItemButton>
-					</ListItem>
-				))}
-				{user && (
             <ListItem
-						className="drawer-list-item-button"
+              className="drawer-list-item"
-						key={"Log Out"}
+              key={ListItemObject.text}
               disablePadding
             >
               <ListItemButton
                 className="drawer-list-item-button"
-							onClick={logout}
+                onClick={ListItemObject.onClick}
               >
                 <ListItemIcon className="drawer-list-item">
-								{React.createElement(iconList[4])}
+                  {React.createElement(ListItemObject.icon)}
-							</ListItemIcon>
-							<ListItemText className="drawer-list-item" primary={"Log Out"} />
-						</ListItemButton>
-					</ListItem>
-				)}
-				{!user && (
-					<>
-						<ListItem
-							className="drawer-list-item-button"
-							key={"Login"}
-							disablePadding
-						>
-							<ListItemButton
-								className="drawer-list-item-button"
-								component={Link}
-								to={routerLinksList[4]}
-							>
-								<ListItemIcon className="drawer-list-item">
-									{React.createElement(iconList[5])}
-								</ListItemIcon>
-								<ListItemText className="drawer-list-item" primary={"Login"} />
-							</ListItemButton>
-						</ListItem>
-						<ListItem
-							className="drawer-list-item-button"
-							key={"Sign up"}
-							disablePadding
-						>
-							<ListItemButton
-								className="drawer-list-item-button"
-								component={Link}
-								to={routerLinksList[5]}
-							>
-								<ListItemIcon className="drawer-list-item">
-									{React.createElement(iconList[6])}
                 </ListItemIcon>
                 <ListItemText
                   className="drawer-list-item"
-									primary={"Sign up"}
+                  primary={ListItemObject.text}
                 />
               </ListItemButton>
-						</ListItem>{" "}
+            </ListItem>
-					</>
+          ) : null
         )}
       </List>
     </Box>
@@ -148,5 +136,4 @@ function Header() {
   );
 }
 
-// EXPORT VARIABLES
 export default Header;