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

code/frontend/src/components/Header.tsx

@@ -1,12 +1,12 @@
 import "./header.css";
 import React, { useState } from "react";
 import {
-	List,
+  List,
-	ListItem,
+  ListItem,
-	ListItemButton,
+  ListItemButton,
-	ListItemIcon,
+  ListItemIcon,
-	ListItemText,
+  ListItemText,
-	SwipeableDrawer,
+  SwipeableDrawer,
 } from "@mui/material";
 import Box from "@mui/material/Box";
 import AddAPhotoIcon from "@mui/icons-material/AddAPhoto";
@@ -16,137 +16,124 @@ 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() {
-	const [isOpen, setIsOpen] = useState(false);
+  interface ListItemAttributes {
-	const toggleMenu = () => {
+    text: string;
-		setIsOpen(!isOpen);
+    icon: React.ElementType;
-	};
+    onClick: () => void;
-	const { logout, user } = useAuth();
+    onlyShowWhen: "loggedIn" | "loggedOut" | "always";
-	const iconList = [
+  }
-		DynamicFeedIcon,
+  const navigate = useNavigate();
-		AddAPhotoIcon,
+  const [isOpen, setIsOpen] = useState(false);
-		PersonIcon,
+  const toggleMenu = () => {
-		InfoIcon,
+    setIsOpen(!isOpen);
-		LogoutIcon,
+  };
-		ExitToAppIcon,
+  const { logout, user } = useAuth();
-		FollowTheSignsIcon,
+  const ListItems: ListItemAttributes[] = [
-	];
+    {
-	const routerLinksList = [
+      text: "Feed",
-		"/feed",
+      icon: DynamicFeedIcon,
-		"/createpost",
+      onClick: () => navigate("/feed", { replace: true }),
-		"/profile",
+      onlyShowWhen: "always",
-		"/about",
+    },
-		"/login",
+    {
-		"/register",
+      text: "Create Post",
-	];
+      icon: AddAPhotoIcon,
+      onClick: () => navigate("/createpost", { replace: true }),
+      onlyShowWhen: "loggedIn",
+    },
+    {
+      text: "Profile",
+      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 = (
+  const DrawerList = (
-		<Box role="menu" onClick={() => setIsOpen(false)}>
+    <Box role="menu" onClick={() => setIsOpen(false)}>
-			<List className="drawer-list">
+      <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}
+            <ListItem
-							to={routerLinksList[index]}
+              className="drawer-list-item"
-						>
+              key={ListItemObject.text}
-							<ListItemIcon className="drawer-list-item">
+              disablePadding
-								{React.createElement(iconList[index])}
+            >
-							</ListItemIcon>
+              <ListItemButton
-							<ListItemText className="drawer-list-item" primary={text} />
+                className="drawer-list-item-button"
-						</ListItemButton>
+                onClick={ListItemObject.onClick}
-					</ListItem>
+              >
-				))}
+                <ListItemIcon className="drawer-list-item">
-				{user && (
+                  {React.createElement(ListItemObject.icon)}
-					<ListItem
+                </ListItemIcon>
-						className="drawer-list-item-button"
+                <ListItemText
-						key={"Log Out"}
+                  className="drawer-list-item"
-						disablePadding
+                  primary={ListItemObject.text}
-					>
+                />
-						<ListItemButton
+              </ListItemButton>
-							className="drawer-list-item-button"
+            </ListItem>
-							onClick={logout}
+          ) : null
-						>
+        )}
-							<ListItemIcon className="drawer-list-item">
+      </List>
-								{React.createElement(iconList[4])}
+    </Box>
-							</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"}
-								/>
-							</ListItemButton>
-						</ListItem>{" "}
-					</>
-				)}
-			</List>
-		</Box>
-	);
 
-	return (
+  return (
-		<>
+    <>
-			<header className="base-header blue-background">
+      <header className="base-header blue-background">
-				<img
+        <img
-					className="header-icon header-icon-feather"
+          className="header-icon header-icon-feather"
-					src="/assets/icons/BirdIconO.ico"
+          src="/assets/icons/BirdIconO.ico"
-					alt="featherIcon"
+          alt="featherIcon"
-				/>
+        />
-				<p className="header-title small-title">Feather Feed</p>
+        <p className="header-title small-title">Feather Feed</p>
-				<img
+        <img
-					className="header-icon header-icon-menu"
+          className="header-icon header-icon-menu"
-					src="/assets/icons/menu_orange.svg"
+          src="/assets/icons/menu_orange.svg"
-					alt="menu"
+          alt="menu"
-					onClick={toggleMenu}
+          onClick={toggleMenu}
-				/>
+        />
-			</header>
+      </header>
-			<SwipeableDrawer
+      <SwipeableDrawer
-				anchor={"right"}
+        anchor={"right"}
-				open={isOpen}
+        open={isOpen}
-				onClose={() => setIsOpen(false)}
+        onClose={() => setIsOpen(false)}
-				onOpen={() => setIsOpen(true)}
+        onOpen={() => setIsOpen(true)}
-			>
+      >
-				{DrawerList}
+        {DrawerList}
-			</SwipeableDrawer>
+      </SwipeableDrawer>
-		</>
+    </>
-	);
+  );
 }
 
-// EXPORT VARIABLES
 export default Header;