From b5cf9a210accecf33856ad61ce96e469a4399dac Mon Sep 17 00:00:00 2001 From: "luisa.bellitto" Date: Mon, 30 Jun 2025 15:46:26 +0200 Subject: [PATCH] fix styles and routes --- code/frontend/src/components/Footer.tsx | 2 +- code/frontend/src/components/Header.tsx | 239 +++++++++--------- code/frontend/src/components/header.css | 3 +- .../components/profile/QuiltedImageList.tsx | 2 +- .../frontend/src/pages/LoginAndSignUpPage.tsx | 10 +- code/frontend/src/pages/Profile.tsx | 6 +- code/frontend/src/pages/postCreation.css | 2 +- 7 files changed, 135 insertions(+), 129 deletions(-) diff --git a/code/frontend/src/components/Footer.tsx b/code/frontend/src/components/Footer.tsx index 072bb4c..3e00420 100644 --- a/code/frontend/src/components/Footer.tsx +++ b/code/frontend/src/components/Footer.tsx @@ -41,7 +41,7 @@ function Footer() { )} - + Create Post diff --git a/code/frontend/src/components/Header.tsx b/code/frontend/src/components/Header.tsx index c2ab78d..194498a 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"; @@ -20,120 +20,123 @@ 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("/"), + 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 - )} - - - ); + 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 -

Feather Feed

- menu -
- setIsOpen(false)} - onOpen={() => setIsOpen(true)} - > - {DrawerList} - - - ); + return ( + <> +
+ featherIcon navigate("/")} + /> +

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

+ menu +
+ setIsOpen(false)} + onOpen={() => setIsOpen(true)} + > + {DrawerList} + + + ); } export default Header; diff --git a/code/frontend/src/components/header.css b/code/frontend/src/components/header.css index f875dcb..4e8eb03 100644 --- a/code/frontend/src/components/header.css +++ b/code/frontend/src/components/header.css @@ -19,12 +19,12 @@ .header-title { color: var(--Rotkehlchen-orange-default); + cursor: pointer; } .header-icon-feather { height: 35px; } .header-icon-menu { - cursor: pointer; height: 45px; } @@ -34,6 +34,7 @@ flex-direction: column; justify-content: center; align-items: center; + cursor: pointer; } @media only screen and (min-width: 768px) { .header-icon { diff --git a/code/frontend/src/components/profile/QuiltedImageList.tsx b/code/frontend/src/components/profile/QuiltedImageList.tsx index 2dd5377..fffa8b9 100644 --- a/code/frontend/src/components/profile/QuiltedImageList.tsx +++ b/code/frontend/src/components/profile/QuiltedImageList.tsx @@ -69,7 +69,7 @@ export default function StandardImageList({ user }: { user: UserProfile }) { src={item.imageUrl} alt={item.description} onClick={ - () => navigate("/feed", { replace: true }) + () => navigate("/feed") // anchor to post that was clicked } loading="lazy" diff --git a/code/frontend/src/pages/LoginAndSignUpPage.tsx b/code/frontend/src/pages/LoginAndSignUpPage.tsx index 9731aa1..e95cb4a 100644 --- a/code/frontend/src/pages/LoginAndSignUpPage.tsx +++ b/code/frontend/src/pages/LoginAndSignUpPage.tsx @@ -64,7 +64,7 @@ function LoginAndSignUpPage({ signupProp }: { signupProp: boolean }) { localStorage.setItem("refreshToken", refreshToken); } await setUserState(); - navigate(returnTo, { replace: true }); + navigate(returnTo); } catch (err: any) { if (err.response?.data) { setErrorMessages(err.response.data); @@ -84,7 +84,7 @@ function LoginAndSignUpPage({ signupProp }: { signupProp: boolean }) { [name]: value, })); }; - + const theme = createTheme({ breakpoints: { values: { @@ -96,11 +96,13 @@ function LoginAndSignUpPage({ signupProp }: { signupProp: boolean }) { }, }, }); - const matchDownMd = useMediaQuery(theme.breakpoints.down('sm')); + const matchDownMd = useMediaQuery(theme.breakpoints.down("sm")); return (
-
+
diff --git a/code/frontend/src/pages/Profile.tsx b/code/frontend/src/pages/Profile.tsx index 588caba..54830ea 100644 --- a/code/frontend/src/pages/Profile.tsx +++ b/code/frontend/src/pages/Profile.tsx @@ -32,7 +32,7 @@ function Profile() { setUserData(response.data.data); return; } catch (error) { - navigate("/", { replace: true }); /* replace to 404 page */ + navigate("/"); /* replace to 404 page */ console.error("Error fetching user profile:", error); return null; } @@ -40,8 +40,9 @@ function Profile() { const ownAccount = username === user?.username; useEffect(() => { + setUserData(null); userProfile(); - }, []); + }, [username]); const setBio = (bio: string) => { setUserData((prevData) => { @@ -66,7 +67,6 @@ function Profile() { } }; - return (
diff --git a/code/frontend/src/pages/postCreation.css b/code/frontend/src/pages/postCreation.css index 653c8d8..ed3b2f4 100644 --- a/code/frontend/src/pages/postCreation.css +++ b/code/frontend/src/pages/postCreation.css @@ -61,7 +61,7 @@ .create-post-image{ height: 40vh; width: 100%; - object-fit: cover; + object-fit: contain; overflow: hidden; max-width: 600px; display: block;