From 5aa24630645888cd8e3d508dd0db05f713771d5d Mon Sep 17 00:00:00 2001 From: MisbehavedNinjaRadiator <120029998+MisbehavedNinjaRadiator@users.noreply.github.com.> Date: Tue, 1 Jul 2025 09:44:11 +0200 Subject: [PATCH] Rebase and minor adjustments --- code/frontend/src/components/Header.tsx | 142 ---------- .../src/components/buttons/SignUpButton.tsx | 2 +- .../frontend/src/components/footer/Footer.tsx | 2 +- .../frontend/src/components/footer/footer.css | 10 +- .../frontend/src/components/header/Header.tsx | 243 +++++++++--------- 5 files changed, 132 insertions(+), 267 deletions(-) delete mode 100644 code/frontend/src/components/Header.tsx diff --git a/code/frontend/src/components/Header.tsx b/code/frontend/src/components/Header.tsx deleted file mode 100644 index 194498a..0000000 --- a/code/frontend/src/components/Header.tsx +++ /dev/null @@ -1,142 +0,0 @@ -import "./header.css"; -import React, { useState } from "react"; -import { - List, - ListItem, - ListItemButton, - ListItemIcon, - ListItemText, - SwipeableDrawer, -} from "@mui/material"; -import Box from "@mui/material/Box"; -import AddAPhotoIcon from "@mui/icons-material/AddAPhoto"; -import DynamicFeedIcon from "@mui/icons-material/DynamicFeed"; -import PersonIcon from "@mui/icons-material/Person"; -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 } 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("/"), - onlyShowWhen: "always", - }, - { - text: "Create Post", - icon: AddAPhotoIcon, - onClick: () => navigate("/createpost"), - onlyShowWhen: "loggedIn", - }, - { - text: "Profile", - icon: PersonIcon, - onClick: () => navigate(`/profile/${user?.username}`), - onlyShowWhen: "loggedIn", - }, - { - text: "About", - icon: InfoIcon, - onClick: () => navigate("/about"), - onlyShowWhen: "always", - }, - { - text: "Log Out", - icon: LogoutIcon, - onClick: logout, - onlyShowWhen: "loggedIn", - }, - { - text: "Log In", - icon: ExitToAppIcon, - onClick: () => navigate("/login"), - onlyShowWhen: "loggedOut", - }, - { - text: "Sign Up", - icon: FollowTheSignsIcon, - onClick: () => navigate("/register"), - onlyShowWhen: "loggedOut", - }, - ]; - - const DrawerList = ( - setIsOpen(false)}> - - {ListItems.map((ListItemObject, index) => - ListItemObject.onlyShowWhen == "always" || - (ListItemObject.onlyShowWhen == "loggedIn" && user) || - (ListItemObject.onlyShowWhen == "loggedOut" && !user) ? ( - - - - {React.createElement(ListItemObject.icon)} - - - - - ) : null - )} - - - ); - - return ( - <> -
- featherIcon navigate("/")} - /> -

navigate("/")}> - Feather Feed -

- menu -
- setIsOpen(false)} - onOpen={() => setIsOpen(true)} - > - {DrawerList} - - - ); -} - -export default Header; diff --git a/code/frontend/src/components/buttons/SignUpButton.tsx b/code/frontend/src/components/buttons/SignUpButton.tsx index 7a3fbaa..b9a8c47 100644 --- a/code/frontend/src/components/buttons/SignUpButton.tsx +++ b/code/frontend/src/components/buttons/SignUpButton.tsx @@ -9,7 +9,7 @@ export default function LogInButton() { style={"secondary"} label={"Sign Up"} type={"button"} - onClick={() => navigate("/login")} + onClick={() => navigate("/register")} /> ); } diff --git a/code/frontend/src/components/footer/Footer.tsx b/code/frontend/src/components/footer/Footer.tsx index 3e00420..026bccf 100644 --- a/code/frontend/src/components/footer/Footer.tsx +++ b/code/frontend/src/components/footer/Footer.tsx @@ -1,6 +1,6 @@ import "./footer.css"; import { Link } from "react-router-dom"; -import { useAuth } from "../api/Auth"; +import { useAuth } from "../../api/Auth"; function Footer() { const { user } = useAuth(); const { logout } = useAuth(); diff --git a/code/frontend/src/components/footer/footer.css b/code/frontend/src/components/footer/footer.css index bbe35f1..3943299 100644 --- a/code/frontend/src/components/footer/footer.css +++ b/code/frontend/src/components/footer/footer.css @@ -1,4 +1,4 @@ -/*mobile style first*/ + .footer { display: flex; flex-direction: row; @@ -21,8 +21,8 @@ .footer-link { display: flex; align-items: center; - gap: 0.5rem; /*Gap between icon and logo */ - text-decoration: none; /*prevents constant underline*/ + gap: 0.5rem; + text-decoration: none; color: black; font-weight: 500; cursor: pointer; @@ -48,7 +48,7 @@ .footer-right { display: flex; flex-direction: column; - gap: 0.4rem; /*gap between the links*/ + gap: 0.4rem; align-items: flex-end; } @@ -67,7 +67,7 @@ text-decoration-color: var(--Rotkehlchen-orange-default); } -/*@media adjusts styles for desktop */ + @media (min-width: 768px) { .footer { diff --git a/code/frontend/src/components/header/Header.tsx b/code/frontend/src/components/header/Header.tsx index 23ec6e2..d4738c6 100644 --- a/code/frontend/src/components/header/Header.tsx +++ b/code/frontend/src/components/header/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"; @@ -20,120 +20,127 @@ 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 DrawerList = ( - setIsOpen(false)}> - - {ListItems.map((ListItemObject, index) => - ListItemObject.onlyShowWhen == "always" || - (ListItemObject.onlyShowWhen == "loggedIn" && user) || - (ListItemObject.onlyShowWhen == "loggedOut" && !user) ? ( - - - - {React.createElement(ListItemObject.icon)} - - - - - ) : null - )} - - - ); + const ListItems: ListItemAttributes[] = [ + { + text: "Feed", + icon: DynamicFeedIcon, + onClick: () => navigate("/feed"), + onlyShowWhen: "always", + }, + { + text: "Create Post", + icon: AddAPhotoIcon, + onClick: () => navigate("/createpost"), + onlyShowWhen: "loggedIn", + }, + { + text: "Profile", + icon: PersonIcon, + onClick: () => user?.username && navigate(`/profile/${user.username}`), + onlyShowWhen: "loggedIn", + }, + { + text: "About", + icon: InfoIcon, + onClick: () => navigate("/about"), + onlyShowWhen: "always", + }, + { + text: "Log Out", + icon: LogoutIcon, + onClick: logout, + onlyShowWhen: "loggedIn", + }, + { + text: "Log In", + icon: ExitToAppIcon, + onClick: () => navigate("/login"), + onlyShowWhen: "loggedOut", + }, + { + text: "Sign Up", + icon: FollowTheSignsIcon, + onClick: () => navigate("/register"), + onlyShowWhen: "loggedOut", + }, + ]; - return ( - <> -
- featherIcon -

Feather Feed

- menu -
- setIsOpen(false)} - onOpen={() => setIsOpen(true)} - > - {DrawerList} - - - ); + const DrawerList = ( + setIsOpen(false)}> + + {ListItems.map((ListItemObject) => + ListItemObject.onlyShowWhen === "always" || + (ListItemObject.onlyShowWhen === "loggedIn" && user) || + (ListItemObject.onlyShowWhen === "loggedOut" && !user) ? ( + + + + {React.createElement(ListItemObject.icon)} + + + + + ) : null + )} + + + ); + + return ( + <> +
+ featherIcon navigate("/feed")} + /> +

navigate("/feed")} + > + Feather Feed +

+ menu +
+ setIsOpen(false)} + onOpen={() => setIsOpen(true)} + > + {DrawerList} + + + ); } export default Header;