From 641177ee41faa6de18056448a5d45bb70c5e6682 Mon Sep 17 00:00:00 2001 From: cmekeirl Date: Mon, 11 Mar 2024 14:45:56 +0100 Subject: [PATCH 1/8] navbar --- frontend/index.html | 2 +- frontend/package-lock.json | 125 ++++++++++++++++++++ frontend/package.json | 3 + frontend/public/locales/en/translation.json | 7 ++ frontend/public/locales/nl/translation.json | 7 ++ frontend/src/App.tsx | 9 +- frontend/src/components/Header/Header.tsx | 21 ++-- frontend/src/components/Header/Navbar.tsx | 74 ++++++++++++ frontend/src/i18n.js | 19 +++ frontend/src/main.tsx | 1 + 10 files changed, 250 insertions(+), 18 deletions(-) create mode 100644 frontend/public/locales/en/translation.json create mode 100644 frontend/public/locales/nl/translation.json create mode 100644 frontend/src/components/Header/Navbar.tsx create mode 100644 frontend/src/i18n.js diff --git a/frontend/index.html b/frontend/index.html index d42d4487..43fdb5e7 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -1,5 +1,5 @@ - + diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 4fc8aea3..6f240e2b 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -13,8 +13,11 @@ "@mui/icons-material": "^5.15.10", "@mui/material": "^5.15.10", "@mui/styled-engine-sc": "^6.0.0-alpha.16", + "i18next-browser-languagedetector": "^7.2.0", + "i18next-http-backend": "^2.5.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-i18next": "^14.1.0", "react-router-dom": "^6.22.1", "styled-components": "^6.1.8" }, @@ -2731,6 +2734,14 @@ "node": ">=10" } }, + "node_modules/cross-fetch": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-4.0.0.tgz", + "integrity": "sha512-e4a5N8lVvuLgAWgnCrLr2PP0YyDOTHa9H/Rj54dirp61qXnNq46m82bRhNqIA5VccJtWBvPTFRV3TtvHUKPB1g==", + "dependencies": { + "node-fetch": "^2.6.12" + } + }, "node_modules/cross-spawn": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", @@ -4002,6 +4013,14 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "node_modules/html-parse-stringify": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz", + "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==", + "dependencies": { + "void-elements": "3.1.0" + } + }, "node_modules/http-signature": { "version": "1.3.6", "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.3.6.tgz", @@ -4025,6 +4044,45 @@ "node": ">=8.12.0" } }, + "node_modules/i18next": { + "version": "23.10.1", + "resolved": "https://registry.npmjs.org/i18next/-/i18next-23.10.1.tgz", + "integrity": "sha512-NDiIzFbcs3O9PXpfhkjyf7WdqFn5Vq6mhzhtkXzj51aOcNuPNcTwuYNuXCpHsanZGHlHKL35G7huoFeVic1hng==", + "funding": [ + { + "type": "individual", + "url": "https://locize.com" + }, + { + "type": "individual", + "url": "https://locize.com/i18next.html" + }, + { + "type": "individual", + "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project" + } + ], + "peer": true, + "dependencies": { + "@babel/runtime": "^7.23.2" + } + }, + "node_modules/i18next-browser-languagedetector": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-7.2.0.tgz", + "integrity": "sha512-U00DbDtFIYD3wkWsr2aVGfXGAj2TgnELzOX9qv8bT0aJtvPV9CRO77h+vgmHFBMe7LAxdwvT/7VkCWGya6L3tA==", + "dependencies": { + "@babel/runtime": "^7.23.2" + } + }, + "node_modules/i18next-http-backend": { + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/i18next-http-backend/-/i18next-http-backend-2.5.0.tgz", + "integrity": "sha512-Z/aQsGZk1gSxt2/DztXk92DuDD20J+rNudT7ZCdTrNOiK8uQppfvdjq9+DFQfpAnFPn3VZS+KQIr1S/W1KxhpQ==", + "dependencies": { + "cross-fetch": "4.0.0" + } + }, "node_modules/ieee754": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz", @@ -4780,6 +4838,25 @@ "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==", "dev": true }, + "node_modules/node-fetch": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz", + "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==", + "dependencies": { + "whatwg-url": "^5.0.0" + }, + "engines": { + "node": "4.x || >=6.0.0" + }, + "peerDependencies": { + "encoding": "^0.1.0" + }, + "peerDependenciesMeta": { + "encoding": { + "optional": true + } + } + }, "node_modules/node-releases": { "version": "2.0.14", "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz", @@ -5186,6 +5263,27 @@ "react": "^18.2.0" } }, + "node_modules/react-i18next": { + "version": "14.1.0", + "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-14.1.0.tgz", + "integrity": "sha512-3KwX6LHpbvGQ+sBEntjV4sYW3Zovjjl3fpoHbUwSgFHf0uRBcbeCBLR5al6ikncI5+W0EFb71QXZmfop+J6NrQ==", + "dependencies": { + "@babel/runtime": "^7.23.9", + "html-parse-stringify": "^3.0.1" + }, + "peerDependencies": { + "i18next": ">= 23.2.3", + "react": ">= 16.8.0" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + }, + "react-native": { + "optional": true + } + } + }, "node_modules/react-is": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", @@ -5865,6 +5963,11 @@ "node": ">= 4.0.0" } }, + "node_modules/tr46": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz", + "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==" + }, "node_modules/ts-api-utils": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.2.1.tgz", @@ -6089,6 +6192,28 @@ } } }, + "node_modules/void-elements": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz", + "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/webidl-conversions": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz", + "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==" + }, + "node_modules/whatwg-url": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz", + "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==", + "dependencies": { + "tr46": "~0.0.3", + "webidl-conversions": "^3.0.0" + } + }, "node_modules/which": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", diff --git a/frontend/package.json b/frontend/package.json index 4645a37b..98a04002 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -17,8 +17,11 @@ "@mui/icons-material": "^5.15.10", "@mui/material": "^5.15.10", "@mui/styled-engine-sc": "^6.0.0-alpha.16", + "i18next-browser-languagedetector": "^7.2.0", + "i18next-http-backend": "^2.5.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-i18next": "^14.1.0", "react-router-dom": "^6.22.1", "styled-components": "^6.1.8" }, diff --git a/frontend/public/locales/en/translation.json b/frontend/public/locales/en/translation.json new file mode 100644 index 00000000..1447580c --- /dev/null +++ b/frontend/public/locales/en/translation.json @@ -0,0 +1,7 @@ +{ + "homepage": "Homepage", + "myProjects": "My Projects", + "myCourses": "My Courses", + "login": "Login", + "home": "Home" + } \ No newline at end of file diff --git a/frontend/public/locales/nl/translation.json b/frontend/public/locales/nl/translation.json new file mode 100644 index 00000000..c852df96 --- /dev/null +++ b/frontend/public/locales/nl/translation.json @@ -0,0 +1,7 @@ +{ + "homepage": "Homepage", + "myProjects": "Mijn Projecten", + "myCourses": "Mijn Vakken", + "login": "Login", + "home": "Home" + } \ No newline at end of file diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 22932a0e..91a4763e 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,5 +1,4 @@ -import { BrowserRouter, Route, Routes } from "react-router-dom"; -import Home from "./pages/home/Home"; +import { BrowserRouter } from "react-router-dom"; import { Header } from "./components/Header/Header"; /** @@ -10,11 +9,7 @@ function App(): JSX.Element { return (
- - } /> - ); } - -export default App; +export default App; \ No newline at end of file diff --git a/frontend/src/components/Header/Header.tsx b/frontend/src/components/Header/Header.tsx index 860086fd..8bced94d 100644 --- a/frontend/src/components/Header/Header.tsx +++ b/frontend/src/components/Header/Header.tsx @@ -2,30 +2,31 @@ import { AppBar, Box, Button, - IconButton, Toolbar, - Typography, + Typography } from "@mui/material"; -import MenuIcon from "@mui/icons-material/Menu"; - +import Navbar from "./Navbar"; +import { useTranslation } from 'react-i18next'; /** * The header component for the application that will be rendered at the top of the page. * @returns - The header component */ export function Header(): JSX.Element { + const { t } = useTranslation(); + return ( - - - + + + - Home + {t('home')} - + ); -} +} \ No newline at end of file diff --git a/frontend/src/components/Header/Navbar.tsx b/frontend/src/components/Header/Navbar.tsx new file mode 100644 index 00000000..d8f79867 --- /dev/null +++ b/frontend/src/components/Header/Navbar.tsx @@ -0,0 +1,74 @@ +import { useState } from "react"; +import { + IconButton, + List, + ListItemText, + CssBaseline, + Drawer, + Grid, + ListItemButton, +} from "@mui/material"; +import { + Menu +} from "@mui/icons-material"; +import { useNavigate } from "react-router-dom"; +import { useTranslation } from "react-i18next"; + +/** + * Renders the navbar. + * @returns - A Drawer with a list of navigation items. + */ +export default function Navbar() { + const [open, setOpen] = useState(false); + const navigate = useNavigate(); + const toggleSlider = (openState:boolean) => () => { + setOpen(openState); + }; + const { t } = useTranslation(); + const listItems = [ + {link: "/", text: t("homepage")}, + {link: "/projects", text: t("myProjects")}, + {link: "/courses", text: t("myCourses")} + ] + + const SideList = () => ( + + + + + + + + + + + {listItems.map((listItem,index) => ( + {return navigate(listItem.link)}} + > + + + ))} + + + + ); + + return ( + <> + + + + + + + + + ); +} \ No newline at end of file diff --git a/frontend/src/i18n.js b/frontend/src/i18n.js new file mode 100644 index 00000000..9ed9077f --- /dev/null +++ b/frontend/src/i18n.js @@ -0,0 +1,19 @@ +import i18n from 'i18next'; +import { initReactI18next } from 'react-i18next'; +import Backend from 'i18next-http-backend'; +import LanguageDetector from 'i18next-browser-languagedetector'; + +i18n + .use(Backend) + .use(LanguageDetector) + .use(initReactI18next) + .init({ + fallbackLng: 'en', + debug: true, + + interpolation: { + escapeValue: false, + } + }); + +export default i18n; \ No newline at end of file diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx index 3d7150da..9b684efc 100644 --- a/frontend/src/main.tsx +++ b/frontend/src/main.tsx @@ -2,6 +2,7 @@ import React from 'react' import ReactDOM from 'react-dom/client' import App from './App.tsx' import './index.css' +import './i18n' ReactDOM.createRoot(document.getElementById('root')!).render( From b474f58298ceb9f50d2a5050d11fff590c6a0e2c Mon Sep 17 00:00:00 2001 From: cmekeirl Date: Tue, 12 Mar 2024 16:43:47 +0100 Subject: [PATCH 2/8] changes --- frontend/src/App.tsx | 7 +- frontend/src/components/Header/Header.tsx | 96 +++++++++++++++++++---- frontend/src/components/Header/Navbar.tsx | 74 ----------------- 3 files changed, 84 insertions(+), 93 deletions(-) delete mode 100644 frontend/src/components/Header/Navbar.tsx diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 91a4763e..307c2751 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,6 +1,6 @@ -import { BrowserRouter } from "react-router-dom"; +import { BrowserRouter,Route,Routes } from "react-router-dom"; import { Header } from "./components/Header/Header"; - +import Home from "./pages/home/Home"; /** * This component is the main application component that will be rendered by the ReactDOM. * @returns - The main application component @@ -9,6 +9,9 @@ function App(): JSX.Element { return (
+ + } /> + ); } diff --git a/frontend/src/components/Header/Header.tsx b/frontend/src/components/Header/Header.tsx index 8bced94d..3c381c65 100644 --- a/frontend/src/components/Header/Header.tsx +++ b/frontend/src/components/Header/Header.tsx @@ -1,32 +1,94 @@ -import { - AppBar, - Box, - Button, - Toolbar, - Typography -} from "@mui/material"; -import Navbar from "./Navbar"; +import { AppBar, Box, Button, Drawer, Grid, IconButton, List, ListItemButton, ListItemText, Toolbar, Typography } from "@mui/material"; +import { Menu } from "@mui/icons-material"; import { useTranslation } from 'react-i18next'; +import { Link, useLocation, useNavigate } from 'react-router-dom'; +import { useState } from "react"; + /** - * The header component for the application that will be rendered at the top of the page. - * @returns - The header component + * Renders the header component. + * @returns JSX.Element representing the header. */ export function Header(): JSX.Element { const { t } = useTranslation(); + const location = useLocation(); + const navigate = useNavigate(); + const [open, setOpen] = useState(false); + + const listItems = [ + {link: "/", text: t("homepage")}, + {link: "/projects", text: t("myProjects")}, + {link: "/courses", text: t("myCourses")} + ] + + const title = getTitle(location.pathname, t); return ( - - - - - - {t('home')} + + setOpen(!open)} sx={{ color: "white", marginLeft: 0 }}> + + + + {title} + + setOpen(false)} listItems={listItems} navigate={navigate} /> ); -} \ No newline at end of file +} + +/** + * Get the title based on the given pathname. + * @param pathname - The current pathname. + * @param t - The translation function. + * @returns The title. + */ +function getTitle(pathname: string, t: (key: string) => string): string { + switch(pathname) { + case '/': return t('home'); + case '/login': return t('login'); + case '/courses': return t('myCourses'); + case '/projects': return t('myProjects'); + default: return t('home'); + } +} + +// eslint-disable-next-line jsdoc/require-param +/** + * Renders the drawer menu component. + * @param open - Whether the drawer menu is open or not. + * @param onClose - Function to handle the close event of the drawer menu. + * @param listItems - Array of objects representing the list items in the drawer menu. + * @returns - The Side Bar + */ +function DrawerMenu({ open, onClose, listItems }: { open: boolean, onClose: () => void, listItems: { link: string, text: string }[] }) { + + return ( + + + + + + + + + {listItems.map((listItem, index) => ( + + + + ))} + + + + ); +} diff --git a/frontend/src/components/Header/Navbar.tsx b/frontend/src/components/Header/Navbar.tsx deleted file mode 100644 index d8f79867..00000000 --- a/frontend/src/components/Header/Navbar.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import { useState } from "react"; -import { - IconButton, - List, - ListItemText, - CssBaseline, - Drawer, - Grid, - ListItemButton, -} from "@mui/material"; -import { - Menu -} from "@mui/icons-material"; -import { useNavigate } from "react-router-dom"; -import { useTranslation } from "react-i18next"; - -/** - * Renders the navbar. - * @returns - A Drawer with a list of navigation items. - */ -export default function Navbar() { - const [open, setOpen] = useState(false); - const navigate = useNavigate(); - const toggleSlider = (openState:boolean) => () => { - setOpen(openState); - }; - const { t } = useTranslation(); - const listItems = [ - {link: "/", text: t("homepage")}, - {link: "/projects", text: t("myProjects")}, - {link: "/courses", text: t("myCourses")} - ] - - const SideList = () => ( - - - - - - - - - - - {listItems.map((listItem,index) => ( - {return navigate(listItem.link)}} - > - - - ))} - - - - ); - - return ( - <> - - - - - - - - - ); -} \ No newline at end of file From 6d1e576da5b04b4a1661320f0c6b9260397ebed8 Mon Sep 17 00:00:00 2001 From: cmekeirl Date: Tue, 12 Mar 2024 21:02:26 +0100 Subject: [PATCH 3/8] oops --- frontend/src/components/Header/Header.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/Header/Header.tsx b/frontend/src/components/Header/Header.tsx index 3c381c65..387dd277 100644 --- a/frontend/src/components/Header/Header.tsx +++ b/frontend/src/components/Header/Header.tsx @@ -36,7 +36,7 @@ export function Header(): JSX.Element { - setOpen(false)} listItems={listItems} navigate={navigate} /> + setOpen(false)} listItems={listItems} /> ); } From fb3dfa0bf656765cf34a2dbfb13e509a981d04f3 Mon Sep 17 00:00:00 2001 From: cmekeirl Date: Tue, 12 Mar 2024 22:27:49 +0100 Subject: [PATCH 4/8] close bar on redirect --- frontend/src/components/Header/Header.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/Header/Header.tsx b/frontend/src/components/Header/Header.tsx index 387dd277..9865faa5 100644 --- a/frontend/src/components/Header/Header.tsx +++ b/frontend/src/components/Header/Header.tsx @@ -1,7 +1,7 @@ import { AppBar, Box, Button, Drawer, Grid, IconButton, List, ListItemButton, ListItemText, Toolbar, Typography } from "@mui/material"; import { Menu } from "@mui/icons-material"; import { useTranslation } from 'react-i18next'; -import { Link, useLocation, useNavigate } from 'react-router-dom'; +import { Link, useLocation } from 'react-router-dom'; import { useState } from "react"; /** @@ -11,7 +11,6 @@ import { useState } from "react"; export function Header(): JSX.Element { const { t } = useTranslation(); const location = useLocation(); - const navigate = useNavigate(); const [open, setOpen] = useState(false); const listItems = [ @@ -83,7 +82,7 @@ function DrawerMenu({ open, onClose, listItems }: { open: boolean, onClose: () = {listItems.map((listItem, index) => ( - + ))} From 5ffca16e6c0f333122efaadbfde16ccdbd298686 Mon Sep 17 00:00:00 2001 From: cmekeirl Date: Tue, 12 Mar 2024 23:31:35 +0100 Subject: [PATCH 5/8] linter conflicts for component function --- frontend/.eslintrc.cjs | 6 +++--- frontend/src/components/Header/Header.tsx | 3 +-- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/frontend/.eslintrc.cjs b/frontend/.eslintrc.cjs index c685b20b..0229c600 100644 --- a/frontend/.eslintrc.cjs +++ b/frontend/.eslintrc.cjs @@ -26,7 +26,7 @@ module.exports = { "jsdoc/check-access": 1, "tsdoc/syntax": "warn", "jsdoc/check-alignment": 1, - "jsdoc/check-param-names": 1, + "jsdoc/check-param-names": 0, "jsdoc/check-property-names": 1, "jsdoc/check-tag-names": 1, "jsdoc/check-types": 1, @@ -37,10 +37,10 @@ module.exports = { "jsdoc/no-multi-asterisks": 1, "jsdoc/no-undefined-types": 1, "jsdoc/require-jsdoc": 1, - "jsdoc/require-param": 1, + "jsdoc/require-param": 0, "jsdoc/require-param-description": 1, "jsdoc/require-param-name": 1, - "jsdoc/require-param-type": 1, + "jsdoc/require-param-type": 0, "jsdoc/require-property": 1, "jsdoc/require-property-description": 1, "jsdoc/require-property-name": 1, diff --git a/frontend/src/components/Header/Header.tsx b/frontend/src/components/Header/Header.tsx index 9865faa5..358f8238 100644 --- a/frontend/src/components/Header/Header.tsx +++ b/frontend/src/components/Header/Header.tsx @@ -56,13 +56,12 @@ function getTitle(pathname: string, t: (key: string) => string): string { } } -// eslint-disable-next-line jsdoc/require-param /** * Renders the drawer menu component. * @param open - Whether the drawer menu is open or not. * @param onClose - Function to handle the close event of the drawer menu. * @param listItems - Array of objects representing the list items in the drawer menu. - * @returns - The Side Bar + * @returns The Side Bar */ function DrawerMenu({ open, onClose, listItems }: { open: boolean, onClose: () => void, listItems: { link: string, text: string }[] }) { From 12a580ef5480421a22e176b3d0891b43ab7e9f42 Mon Sep 17 00:00:00 2001 From: cmekeirl Date: Sun, 31 Mar 2024 22:19:33 +0200 Subject: [PATCH 6/8] scalability matters --- frontend/src/components/Header/Header.tsx | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/frontend/src/components/Header/Header.tsx b/frontend/src/components/Header/Header.tsx index 9de58b11..484d2e2b 100644 --- a/frontend/src/components/Header/Header.tsx +++ b/frontend/src/components/Header/Header.tsx @@ -13,11 +13,16 @@ export function Header(): JSX.Element { const location = useLocation(); const [open, setOpen] = useState(false); - const listItems = [ - {link: "/", text: t("homepage")}, - {link: "/projects", text: t("myProjects")}, - {link: "/courses", text: t("myCourses")} - ] + let listItems = [ + {link: "/", text: t("homepage")} + ]; + + if(isLoggedIn()) { + listItems = listItems.concat([ + {link: "/projects", text: t("myProjects")}, + {link: "/courses", text: t("myCourses")} + ]); + } const title = getTitle(location.pathname, t); @@ -35,7 +40,7 @@ export function Header(): JSX.Element { - setOpen(false)} listItems={isLoggedIn() ? listItems : [listItems[0]]}/> + setOpen(false)} listItems={listItems}/> ); } From fd2142a2fd9bbcd8a5e6470a8930f9a913828d15 Mon Sep 17 00:00:00 2001 From: cmekeirl Date: Mon, 1 Apr 2024 16:54:02 +0200 Subject: [PATCH 7/8] useEffect to check login state and adjust link item list --- frontend/src/components/Header/Header.tsx | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/frontend/src/components/Header/Header.tsx b/frontend/src/components/Header/Header.tsx index 484d2e2b..b27da310 100644 --- a/frontend/src/components/Header/Header.tsx +++ b/frontend/src/components/Header/Header.tsx @@ -2,7 +2,7 @@ import { AppBar, Box, Button, Drawer, Grid, IconButton, List, ListItemButton, Li import { Menu } from "@mui/icons-material"; import { useTranslation } from 'react-i18next'; import { Link, useLocation } from 'react-router-dom'; -import { useState } from "react"; +import { useEffect, useState } from "react"; /** * Renders the header component. @@ -12,17 +12,19 @@ export function Header(): JSX.Element { const { t } = useTranslation(); const location = useLocation(); const [open, setOpen] = useState(false); + const [listItems, setListItems] = useState([ + { link: "/", text: t("homepage") } + ]); - let listItems = [ - {link: "/", text: t("homepage")} - ]; + useEffect(() => { + const baseItems = [{ link: "/", text: t("homepage") }]; + const additionalItems = isLoggedIn() ? [ + { link: "/projects", text: t("myProjects") }, + { link: "/courses", text: t("myCourses") } + ] : []; - if(isLoggedIn()) { - listItems = listItems.concat([ - {link: "/projects", text: t("myProjects")}, - {link: "/courses", text: t("myCourses")} - ]); - } + setListItems([...baseItems, ...additionalItems]); + }, [t]); const title = getTitle(location.pathname, t); From fedfad7f4bb5f9310cc3aedc9db473a93d6a57bd Mon Sep 17 00:00:00 2001 From: cmekeirl Date: Mon, 1 Apr 2024 16:57:06 +0200 Subject: [PATCH 8/8] a little more readable --- frontend/src/components/Header/Header.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/Header/Header.tsx b/frontend/src/components/Header/Header.tsx index b27da310..53846db5 100644 --- a/frontend/src/components/Header/Header.tsx +++ b/frontend/src/components/Header/Header.tsx @@ -18,12 +18,16 @@ export function Header(): JSX.Element { useEffect(() => { const baseItems = [{ link: "/", text: t("homepage") }]; - const additionalItems = isLoggedIn() ? [ + const additionalItems = [ { link: "/projects", text: t("myProjects") }, { link: "/courses", text: t("myCourses") } - ] : []; - - setListItems([...baseItems, ...additionalItems]); + ]; + if (isLoggedIn()) { + setListItems([...baseItems, ...additionalItems]); + } + else { + setListItems(baseItems); + } }, [t]); const title = getTitle(location.pathname, t);