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

Rebase and minor adjustments

Browse source
This commit is contained in:
MisbehavedNinjaRadiator 2025-07-01 09:44:11 +02:00 • committed by MisbehavedNinjaRadiator
parent 133cec2fb4
commit 5aa2463064
5 changed files with 132 additions and 267 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -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 = (
<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"
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;

2
code/frontend/src/components/buttons/SignUpButton.tsx
View file

@ -9,7 +9,7 @@ export default function LogInButton() {
style={"secondary"} style={"secondary"}
label={"Sign Up"} label={"Sign Up"}
type={"button"} type={"button"}
onClick={() => navigate("/login")} onClick={() => navigate("/register")}
/> />
); );
} }

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

@ -1,6 +1,6 @@
import "./footer.css"; import "./footer.css";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { useAuth } from "../api/Auth"; import { useAuth } from "../../api/Auth";
function Footer() { function Footer() {
const { user } = useAuth(); const { user } = useAuth();
const { logout } = useAuth(); const { logout } = useAuth();

10
code/frontend/src/components/footer/footer.css
View file

@ -1,4 +1,4 @@
/*mobile style first*/
.footer { .footer {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -21,8 +21,8 @@
.footer-link { .footer-link {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; /*Gap between icon and logo */ gap: 0.5rem;
text-decoration: none; /*prevents constant underline*/ text-decoration: none;
color: black; color: black;
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
@ -48,7 +48,7 @@
.footer-right { .footer-right {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.4rem; /*gap between the links*/ gap: 0.4rem;
align-items: flex-end; align-items: flex-end;
} }
@ -67,7 +67,7 @@
text-decoration-color: var(--Rotkehlchen-orange-default); text-decoration-color: var(--Rotkehlchen-orange-default);
} }
/*@media adjusts styles for desktop */
@media (min-width: 768px) { @media (min-width: 768px) {
.footer { .footer {

243
code/frontend/src/components/header/Header.tsx
View file

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