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

change about us to about, use useNavigate instead of component/to, intitialize List items as Objects

Browse source
This commit is contained in:
Niklas 2025-06-29 14:26:56 +02:00 • committed by BlankAccountsUsername
parent a3196004ac
commit b3083134e0
3 changed files with 141 additions and 154 deletions
Download patch file Download diff file Expand all files Collapse all files

42
code/frontend/src/App.tsx
View file

@ -11,27 +11,27 @@ import { Auth } from "./api/Auth";
function App() { function App() {
return ( return (
<Auth> <Auth>
<Router> <Router>
<div className="App"> <div className="App">
<Header /> <Header />
<Routes> <Routes>
<Route <Route
path="/login" path="/login"
element={<LoginAndSignUpPage signupProp={false} />} element={<LoginAndSignUpPage signupProp={false} />}
></Route> ></Route>
<Route <Route
path="/register" path="/register"
element={<LoginAndSignUpPage signupProp={true} />} element={<LoginAndSignUpPage signupProp={true} />}
></Route> ></Route>
<Route path="/profile" element={<Profile />}></Route> <Route path="/profile" element={<Profile />}></Route>
</Routes> </Routes>
<Footer /> <Footer />
</div> </div>
</Router> </Router>
</Auth> </Auth>
); );
} }
export default App; export default App;

251
code/frontend/src/components/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";
@ -16,139 +16,126 @@ import InfoIcon from "@mui/icons-material/Info";
import LogoutIcon from "@mui/icons-material/Logout"; import LogoutIcon from "@mui/icons-material/Logout";
import ExitToAppIcon from "@mui/icons-material/ExitToApp"; import ExitToAppIcon from "@mui/icons-material/ExitToApp";
import FollowTheSignsIcon from "@mui/icons-material/FollowTheSigns"; import FollowTheSignsIcon from "@mui/icons-material/FollowTheSigns";
import { Link } from "react-router-dom"; import { useNavigate, replace } from "react-router-dom";
import { useAuth } from "../api/Auth"; import { useAuth } from "../api/Auth";
// TODO: Dinge so umstrukturieren, dass der State für das offene menü in Header ist und das Menü auch in Header, sodass es mit width 100% die volle breite einnehmen kann // TODO: Dinge so umstrukturieren, dass der State für das offene menü in Header ist und das Menü auch in Header, sodass es mit width 100% die volle breite einnehmen kann
function Header() { function Header() {
const [isOpen, setIsOpen] = useState(false); interface ListItemAttributes {
const toggleMenu = () => { text: string;
setIsOpen(!isOpen); icon: React.ElementType;
}; onClick: () => void;
const { logout, user } = useAuth(); onlyShowWhen: "loggedIn" | "loggedOut" | "always";
const iconList = [ }
DynamicFeedIcon, const navigate = useNavigate();
AddAPhotoIcon, const [isOpen, setIsOpen] = useState(false);
PersonIcon, const toggleMenu = () => {
InfoIcon, setIsOpen(!isOpen);
LogoutIcon, };
ExitToAppIcon, const { logout, user } = useAuth();
FollowTheSignsIcon, const ListItems: ListItemAttributes[] = [
]; {
const routerLinksList = [ text: "Feed",
"/feed", icon: DynamicFeedIcon,
"/createpost", onClick: () => navigate("/feed", { replace: true }),
"/profile", onlyShowWhen: "always",
"/about", },
"/login", {
"/register", 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 DrawerList = (
<Box role="menu" onClick={() => setIsOpen(false)}> <Box role="menu" onClick={() => setIsOpen(false)}>
<List className="drawer-list"> <List className="drawer-list">
{["Feed", "Create Post", "Profile", "About Us"].map((text, index) => ( {ListItems.map((ListItemObject, index) =>
<ListItem className="drawer-list-item" key={text} disablePadding> ListItemObject.onlyShowWhen == "always" ||
<ListItemButton (ListItemObject.onlyShowWhen == "loggedIn" && user) ||
className="drawer-list-item-button" (ListItemObject.onlyShowWhen == "loggedOut" && !user) ? (
component={Link} <ListItem
to={routerLinksList[index]} className="drawer-list-item"
> key={ListItemObject.text}
<ListItemIcon className="drawer-list-item"> disablePadding
{React.createElement(iconList[index])} >
</ListItemIcon> <ListItemButton
<ListItemText className="drawer-list-item" primary={text} /> className="drawer-list-item-button"
</ListItemButton> onClick={ListItemObject.onClick}
</ListItem> >
))} <ListItemIcon className="drawer-list-item">
{user && ( {React.createElement(ListItemObject.icon)}
<ListItem </ListItemIcon>
className="drawer-list-item-button" <ListItemText
key={"Log Out"} className="drawer-list-item"
disablePadding primary={ListItemObject.text}
> />
<ListItemButton </ListItemButton>
className="drawer-list-item-button" </ListItem>
onClick={logout} ) : null
> )}
<ListItemIcon className="drawer-list-item"> </List>
{React.createElement(iconList[4])} </Box>
</ListItemIcon> );
<ListItemText className="drawer-list-item" primary={"Log Out"} />
</ListItemButton>
</ListItem>
)}
{!user && (
<>
<ListItem
className="drawer-list-item-button"
key={"Login"}
disablePadding
>
<ListItemButton
className="drawer-list-item-button"
component={Link}
to={routerLinksList[4]}
>
<ListItemIcon className="drawer-list-item">
{React.createElement(iconList[5])}
</ListItemIcon>
<ListItemText className="drawer-list-item" primary={"Login"} />
</ListItemButton>
</ListItem>
<ListItem
className="drawer-list-item-button"
key={"Sign up"}
disablePadding
>
<ListItemButton
className="drawer-list-item-button"
component={Link}
to={routerLinksList[5]}
>
<ListItemIcon className="drawer-list-item">
{React.createElement(iconList[6])}
</ListItemIcon>
<ListItemText
className="drawer-list-item"
primary={"Sign up"}
/>
</ListItemButton>
</ListItem>{" "}
</>
)}
</List>
</Box>
);
return ( return (
<> <>
<header className="base-header blue-background"> <header className="base-header blue-background">
<img <img
className="header-icon header-icon-feather" className="header-icon header-icon-feather"
src="/assets/icons/BirdIconO.ico" src="/assets/icons/BirdIconO.ico"
alt="featherIcon" alt="featherIcon"
/> />
<p className="header-title small-title">Feather Feed</p> <p className="header-title small-title">Feather Feed</p>
<img <img
className="header-icon header-icon-menu" className="header-icon header-icon-menu"
src="/assets/icons/menu_orange.svg" src="/assets/icons/menu_orange.svg"
alt="menu" alt="menu"
onClick={toggleMenu} onClick={toggleMenu}
/> />
</header> </header>
<SwipeableDrawer <SwipeableDrawer
anchor={"right"} anchor={"right"}
open={isOpen} open={isOpen}
onClose={() => setIsOpen(false)} onClose={() => setIsOpen(false)}
onOpen={() => setIsOpen(true)} onOpen={() => setIsOpen(true)}
> >
{DrawerList} {DrawerList}
</SwipeableDrawer> </SwipeableDrawer>
</> </>
); );
} }
// EXPORT VARIABLES
export default Header; export default Header;

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

@ -6,7 +6,7 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
flex-shrink: 0; flex-shrink: 0;
position: fixed; position: sticky;
top: 0; top: 0;
left: 0; left: 0;
border-radius: 0rem !important; border-radius: 0rem !important;