mirrors/VogelSocialMedia
1
0
Fork 0
mirror of https://github.com/bubblecup-12/VogelSocialMedia.git synced 2025-07-06 06:28:47 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix styles and routes

Browse source
This commit is contained in:
luisa.bellitto 2025-06-30 15:46:26 +02:00 • committed by Rudi Regentonne
parent d4bbb71fc3
commit b5cf9a210a
7 changed files with 135 additions and 129 deletions
Download patch file Download diff file Expand all files Collapse all files

2
code/frontend/src/components/Footer.tsx
View file

@ -41,7 +41,7 @@ function Footer() {
</Link>
</>
)}
<Link className="footer-link" to="/">
<Link className="footer-link" to="/createPost">
Create Post
</Link>
<Link className="footer-link" to="/about">

239
code/frontend/src/components/Header.tsx
View file

@ -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 = (
<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"
onClick={() => navigate("/")}
/>
<p className="header-title small-title" onClick={() => navigate("/")}>
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;

3
code/frontend/src/components/header.css
View file

@ -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 {

2
code/frontend/src/components/profile/QuiltedImageList.tsx
View file

@ -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"

10
code/frontend/src/pages/LoginAndSignUpPage.tsx
View file

@ -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 (
<div className="background">
<div className={matchDownMd ? "login-login" : "login-login blue-background"}>
<div
className={matchDownMd ? "login-login" : "login-login blue-background"}
>
<div className="login-part">
<div className={signup ? "signup-image" : "login-image"}></div>
</div>

6
code/frontend/src/pages/Profile.tsx
View file

@ -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 (
<StyledEngineProvider injectFirst>
<div className="profile-display">

2
code/frontend/src/pages/postCreation.css
View file

@ -61,7 +61,7 @@
.create-post-image{
height: 40vh;
width: 100%;
object-fit: cover;
object-fit: contain;
overflow: hidden;
max-width: 600px;
display: block;