From 0dccd3f2672ceb1ef718228fce9e02943e5da5da Mon Sep 17 00:00:00 2001
From: Niklas <198754647+BlankAccountsUsername@users.noreply.github.com>
Date: Sun, 29 Jun 2025 17:29:05 +0200
Subject: [PATCH] reformat Header.tsx, fix index.tsx

---
 code/frontend/src/components/Header.tsx | 238 ++++++++++++------------
 code/frontend/src/index.tsx             |  16 +-
 2 files changed, 128 insertions(+), 126 deletions(-)

diff --git a/code/frontend/src/components/Header.tsx b/code/frontend/src/components/Header.tsx
index 4b2b282..c2ab78d 100644
--- a/code/frontend/src/components/Header.tsx
+++ b/code/frontend/src/components/Header.tsx
@@ -1,12 +1,12 @@
 import "./header.css";
 import React, { useState } from "react";
 import {
-  List,
-  ListItem,
-  ListItemButton,
-  ListItemIcon,
-  ListItemText,
-  SwipeableDrawer,
+	List,
+	ListItem,
+	ListItemButton,
+	ListItemIcon,
+	ListItemText,
+	SwipeableDrawer,
 } from "@mui/material";
 import Box from "@mui/material/Box";
 import AddAPhotoIcon from "@mui/icons-material/AddAPhoto";
@@ -16,124 +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 { useNavigate, replace } from "react-router-dom";
+import { useNavigate } 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 ListItems: ListItemAttributes[] = [
-    {
-      text: "Feed",
-      icon: DynamicFeedIcon,
-      onClick: () => navigate("/feed", { replace: true }),
-      onlyShowWhen: "always",
-    },
-    {
-      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",
-    },
-  ];
+	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 ListItems: ListItemAttributes[] = [
+		{
+			text: "Feed",
+			icon: DynamicFeedIcon,
+			onClick: () => navigate("/feed", { replace: true }),
+			onlyShowWhen: "always",
+		},
+		{
+			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 = (
-    <Box role="menu" onClick={() => setIsOpen(false)}>
-      <List className="drawer-list">
-        {ListItems.map((ListItemObject, index) =>
-          ListItemObject.onlyShowWhen == "always" ||
-          (ListItemObject.onlyShowWhen == "loggedIn" && user) ||
-          (ListItemObject.onlyShowWhen == "loggedOut" && !user) ? (
-            <ListItem
-              className="drawer-list-item"
-              key={ListItemObject.text}
-              disablePadding
-            >
-              <ListItemButton
-                className="drawer-list-item-button"
-                onClick={ListItemObject.onClick}
-              >
-                <ListItemIcon className="drawer-list-item">
-                  {React.createElement(ListItemObject.icon)}
-                </ListItemIcon>
-                <ListItemText
-                  className="drawer-list-item"
-                  primary={ListItemObject.text}
-                />
-              </ListItemButton>
-            </ListItem>
-          ) : null
-        )}
-      </List>
-    </Box>
-  );
+	const DrawerList = (
+		<Box role="menu" onClick={() => setIsOpen(false)}>
+			<List className="drawer-list">
+				{ListItems.map((ListItemObject, index) =>
+					ListItemObject.onlyShowWhen == "always" ||
+					(ListItemObject.onlyShowWhen == "loggedIn" && user) ||
+					(ListItemObject.onlyShowWhen == "loggedOut" && !user) ? (
+						<ListItem
+							className="drawer-list-item"
+							key={ListItemObject.text}
+							disablePadding
+						>
+							<ListItemButton
+								className="drawer-list-item-button"
+								onClick={ListItemObject.onClick}
+							>
+								<ListItemIcon className="drawer-list-item">
+									{React.createElement(ListItemObject.icon)}
+								</ListItemIcon>
+								<ListItemText
+									className="drawer-list-item"
+									primary={ListItemObject.text}
+								/>
+							</ListItemButton>
+						</ListItem>
+					) : null
+				)}
+			</List>
+		</Box>
+	);
 
-  return (
-    <>
-      <header className="base-header blue-background">
-        <img
-          className="header-icon header-icon-feather"
-          src="/assets/icons/BirdIconO.ico"
-          alt="featherIcon"
-        />
-        <p className="header-title small-title">Feather Feed</p>
-        <img
-          className="header-icon header-icon-menu"
-          src="/assets/icons/menu_orange.svg"
-          alt="menu"
-          onClick={toggleMenu}
-        />
-      </header>
-      <SwipeableDrawer
-        anchor={"right"}
-        open={isOpen}
-        onClose={() => setIsOpen(false)}
-        onOpen={() => setIsOpen(true)}
-      >
-        {DrawerList}
-      </SwipeableDrawer>
-    </>
-  );
+	return (
+		<>
+			<header className="base-header blue-background">
+				<img
+					className="header-icon header-icon-feather"
+					src="/assets/icons/BirdIconO.ico"
+					alt="featherIcon"
+				/>
+				<p className="header-title small-title">Feather Feed</p>
+				<img
+					className="header-icon header-icon-menu"
+					src="/assets/icons/menu_orange.svg"
+					alt="menu"
+					onClick={toggleMenu}
+				/>
+			</header>
+			<SwipeableDrawer
+				anchor={"right"}
+				open={isOpen}
+				onClose={() => setIsOpen(false)}
+				onOpen={() => setIsOpen(true)}
+			>
+				{DrawerList}
+			</SwipeableDrawer>
+		</>
+	);
 }
 
 export default Header;
diff --git a/code/frontend/src/index.tsx b/code/frontend/src/index.tsx
index 7902391..1a987aa 100644
--- a/code/frontend/src/index.tsx
+++ b/code/frontend/src/index.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
-import { StyledEngineProvider } from '@mui/material';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
+import { StyledEngineProvider } from "@mui/material";
 
 const root = ReactDOM.createRoot(
 	document.getElementById("root") as HTMLElement
@@ -11,7 +11,9 @@ const root = ReactDOM.createRoot(
 root.render(
 	<React.StrictMode>
 		<StyledEngineProvider injectFirst>
-			<App />
+			<StyledEngineProvider injectFirst>
+				<App />
+			</StyledEngineProvider>
 		</StyledEngineProvider>
 	</React.StrictMode>
 );