Skip to content

Commit

Permalink
formatting
Browse files Browse the repository at this point in the history
  • Loading branch information
@warreprovoost
warreprovoost committed Apr 23, 2024
1 parent 8df96e7 commit 4b6a743
Show file tree
Hide file tree
Showing 12 changed files with 368 additions and 246 deletions.
15 changes: 15 additions & 0 deletions frontend/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 3 additions & 2 deletions frontend/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.5",
"@mui/icons-material": "^5.15.15",
"@mui/material": "^5.15.15",
"@mui/lab": "^5.0.0-alpha.170",
"@mui/material": "^5.15.15",
"@mui/styled-engine-sc": "^6.0.0-alpha.16",
"@mui/x-data-grid": "^7.1.1",
"@mui/x-date-pickers": "^7.1.1",
Expand All @@ -27,6 +27,7 @@
"i18next-browser-languagedetector": "^7.2.0",
"i18next-http-backend": "^2.5.0",
"jszip": "^3.10.1",
"prettier": "^3.2.5",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-i18next": "^14.1.0",
Expand All @@ -37,10 +38,10 @@
},
"devDependencies": {
"@types/downloadjs": "^1.4.6",
"@types/history": "^4.7.11",
"@types/react": "^18.2.55",
"@types/react-dom": "^18.2.19",
"@types/react-router-dom": "^5.3.3",
"@types/history": "^4.7.11",
"@types/scheduler": "^0.23.0",
"@typescript-eslint/eslint-plugin": "^6.21.0",
"@typescript-eslint/parser": "^6.21.0",
Expand Down
57 changes: 42 additions & 15 deletions frontend/src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,40 +1,67 @@
import { Route, RouterProvider, createBrowserRouter, createRoutesFromElements } from "react-router-dom";
import {
Route,
RouterProvider,
createBrowserRouter,
createRoutesFromElements,
} from "react-router-dom";
import Layout from "./components/Header/Layout";
import { AllCoursesTeacher } from "./components/Courses/AllCoursesTeacher";
import { CourseDetailTeacher } from "./components/Courses/CourseDetailTeacher";
import { dataLoaderCourseDetail, dataLoaderCourses } from "./components/Courses/CourseUtils";
import {
dataLoaderCourseDetail,
dataLoaderCourses,
} from "./components/Courses/CourseUtils";
import LanguagePath from "./components/LanguagePath";
import ProjectView from "./pages/project/projectView/ProjectView";
import { ErrorBoundary } from "./pages/error/ErrorBoundary.tsx";
import ProjectCreateHome from "./pages/create_project/ProjectCreateHome.tsx";
import SubmissionsOverview from "./pages/submission_overview/SubmissionsOverview.tsx";
import {fetchProjectPage} from "./utils/fetches/FetchProjects.tsx";
import { fetchProjectPage } from "./utils/fetches/FetchProjects.tsx";
import HomePages from "./pages/home/HomePages.tsx";
import ProjectOverView from "./pages/project/projectOverview.tsx";
import {fetchMe} from "./utils/fetches/FetchMe.ts";
import { fetchMe } from "./utils/fetches/FetchMe.ts";

const router = createBrowserRouter(
createRoutesFromElements(
<Route path="/" element={<Layout />} errorElement={<ErrorBoundary />} loader={fetchMe}>
<Route index element={<HomePages />} loader={fetchProjectPage}/>
<Route path=":lang" element={<LanguagePath/>}>
<Route
path="/"
element={<Layout />}
errorElement={<ErrorBoundary />}
loader={fetchMe}
>
<Route index element={<HomePages />} loader={fetchProjectPage} />
<Route path=":lang" element={<LanguagePath />}>
<Route path="home" element={<HomePages />} loader={fetchProjectPage} />
<Route path="project/:projectId/overview" element={<SubmissionsOverview/>}/>
<Route
path="project/:projectId/overview"
element={<SubmissionsOverview />}
/>
<Route path="project">
<Route path=":projectId" element={<ProjectView />}>
</Route>
<Route path=":projectId" element={<ProjectView />}></Route>
</Route>
<Route path="courses">
<Route index element={<AllCoursesTeacher />} loader={dataLoaderCourses}/>
<Route path=":courseId" element={<CourseDetailTeacher />} loader={dataLoaderCourseDetail} />
<Route
index
element={<AllCoursesTeacher />}
loader={dataLoaderCourses}
/>
<Route
path=":courseId"
element={<CourseDetailTeacher />}
loader={dataLoaderCourseDetail}
/>
</Route>
<Route path="projects">
<Route index element={<ProjectOverView/>} loader={fetchProjectPage}/>
<Route
index
element={<ProjectOverView />}
loader={fetchProjectPage}
/>
<Route path="create" element={<ProjectCreateHome />} />
</Route>
</Route>
</Route>
)
</Route>,
),
);

/**
Expand Down
113 changes: 75 additions & 38 deletions frontend/src/components/Header/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,27 +10,27 @@ import {
Drawer,
Grid,
ListItemButton,
ListItemText
ListItemText,
} from "@mui/material";
import { useTranslation } from 'react-i18next';
import { useTranslation } from "react-i18next";
import MenuIcon from "@mui/icons-material/Menu";
import React,{useState } from "react";
import React, { useState } from "react";
import LanguageIcon from "@mui/icons-material/Language";
import AccountCircleIcon from '@mui/icons-material/AccountCircle';
import {Link} from "react-router-dom";
import AccountCircleIcon from "@mui/icons-material/AccountCircle";
import { Link } from "react-router-dom";
import { TitlePortal } from "./TitlePortal";
import {Me} from "../../types/me.ts";
import { Me } from "../../types/me.ts";

interface HeaderProps{
me:Me
interface HeaderProps {
me: Me;
}
/**
* The header component for the application that will be rendered at the top of the page.
* @returns - The header component
*/
export function Header({me}:HeaderProps): JSX.Element {
const API_URL = import.meta.env.VITE_APP_API_HOST
const { t, i18n } = useTranslation('translation', { keyPrefix: 'header' });
export function Header({ me }: HeaderProps): JSX.Element {
const API_URL = import.meta.env.VITE_APP_API_HOST;
const { t, i18n } = useTranslation("translation", { keyPrefix: "header" });
const [languageMenuAnchor, setLanguageMenuAnchor] =
useState<null | HTMLElement>(null);

Expand All @@ -49,10 +49,12 @@ export function Header({me}:HeaderProps): JSX.Element {

const [open, setOpen] = useState(false);
const [listItems, setListItems] = useState([
{ link: "/", text: t("homepage") }
{ link: "/", text: t("homepage") },
]);

const [anchorEl, setAnchorEl] = React.useState<null| HTMLButtonElement>(null);
const [anchorEl, setAnchorEl] = React.useState<null | HTMLButtonElement>(
null,
);

const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
setAnchorEl(event.currentTarget);
Expand All @@ -62,12 +64,11 @@ export function Header({me}:HeaderProps): JSX.Element {
const baseItems = [{ link: "/", text: t("homepage") }];
const additionalItems = [
{ link: "/projects", text: t("myProjects") },
{ link: "/courses", text: t("myCourses") }
{ link: "/courses", text: t("myCourses") },
];
if (me.role !== "UNKNOWN") {
setListItems([...baseItems, ...additionalItems]);
}
else {
} else {
setListItems(baseItems);
}
}, [me, t]);
Expand All @@ -76,15 +77,23 @@ export function Header({me}:HeaderProps): JSX.Element {
<Box sx={{ flexGrow: 1 }}>
<AppBar position="sticky">
<Toolbar disableGutters>
<IconButton edge="start" onClick={() => setOpen(!open)} sx={{ color: "white", marginLeft: 0 }}>
<MenuIcon style={{fontSize:"2rem"}} />
<IconButton
edge="start"
onClick={() => setOpen(!open)}
sx={{ color: "white", marginLeft: 0 }}
>
<MenuIcon style={{ fontSize: "2rem" }} />
</IconButton>
<TitlePortal/>
<TitlePortal />
{me.role !== "UNKNOWN" && (
<>
<IconButton edge="end" onClick={handleClick} sx={{ color: "inherit", marginRight: "0.3rem"}}>
<IconButton
edge="end"
onClick={handleClick}
sx={{ color: "inherit", marginRight: "0.3rem" }}
>
<AccountCircleIcon />
<Typography variant="body1" sx={{ paddingLeft: "0.3rem" }}>
<Typography variant="body1" sx={{ paddingLeft: "0.3rem" }}>
{me.display_name}
</Typography>
</IconButton>
Expand All @@ -93,10 +102,14 @@ export function Header({me}:HeaderProps): JSX.Element {
open={Boolean(anchorEl)}
onClose={() => setAnchorEl(null)}
>
<Typography sx={{ padding: '6px 16px', color: 'black'}}>
<Typography sx={{ padding: "6px 16px", color: "black" }}>
{me.display_name}
</Typography>
<MenuItem onClick={() => window.location.href = `${API_URL}/logout`}>{t("logout")}</MenuItem>
</Typography>
<MenuItem
onClick={() => (window.location.href = `${API_URL}/logout`)}
>
{t("logout")}
</MenuItem>
</Menu>
</>
)}
Expand All @@ -122,7 +135,11 @@ export function Header({me}:HeaderProps): JSX.Element {
</div>
</Toolbar>
</AppBar>
<DrawerMenu open={open} onClose={() => setOpen(false)} listItems={listItems}/>
<DrawerMenu
open={open}
onClose={() => setOpen(false)}
listItems={listItems}
/>
</Box>
);
}
Expand All @@ -134,26 +151,46 @@ export function Header({me}:HeaderProps): JSX.Element {
* @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 }[] }) {

function DrawerMenu({
open,
onClose,
listItems,
}: {
open: boolean;
onClose: () => void;
listItems: { link: string; text: string }[];
}) {
return (
<Drawer open={open} anchor="left" onClose={onClose}>
<Grid container direction="column" sx={{
width: 250,
height: "100%",
backgroundColor: "primary.main"
}}>
<Grid
container
direction="column"
sx={{
width: 250,
height: "100%",
backgroundColor: "primary.main",
}}
>
<Grid item container direction="row" alignItems="flex-start">
<IconButton onClick={onClose} sx={{
color: "white"
}}>
<MenuIcon style={{fontSize:"2rem"}} />
<IconButton
onClick={onClose}
sx={{
color: "white",
}}
>
<MenuIcon style={{ fontSize: "2rem" }} />
</IconButton>
</Grid>
<List>
{listItems.map((listItem, index) => (
<ListItemButton key={index} component={Link} to={listItem.link} role="listitem" onClick={onClose}>
<ListItemText primary={listItem.text} sx={{color:"white"}} />
<ListItemButton
key={index}
component={Link}
to={listItem.link}
role="listitem"
onClick={onClose}
>
<ListItemText primary={listItem.text} sx={{ color: "white" }} />
</ListItemButton>
))}
</List>
Expand Down
8 changes: 4 additions & 4 deletions frontend/src/components/Header/Layout.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
import {Outlet, useLoaderData} from "react-router-dom";
import { Outlet, useLoaderData } from "react-router-dom";
import { Header } from "./Header.tsx";
import {Me} from "../../types/me.ts"
import { Me } from "../../types/me.ts";

/**
* Basic layout component that will be used on all routes.
* @returns The Layout component
*/
export default function Layout(): JSX.Element {
const meData:Me = useLoaderData() as Me
const meData: Me = useLoaderData() as Me;

return (
<>
<Header me={meData} />
<Outlet />
</>
);
}
}
15 changes: 10 additions & 5 deletions frontend/src/components/Header/Login.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import {Button} from "@mui/material";
import { Link } from 'react-router-dom';
import {useTranslation} from "react-i18next";
import { Button } from "@mui/material";
import { Link } from "react-router-dom";
import { useTranslation } from "react-i18next";

const CLIENT_ID = import.meta.env.VITE_APP_CLIENT_ID;
const REDIRECT_URI = encodeURI(import.meta.env.VITE_APP_API_HOST + "/auth");
Expand All @@ -12,7 +12,12 @@ const TENANT_ID = import.meta.env.VITE_APP_TENANT_ID;
*/
export function LoginButton(): JSX.Element {
const link = `https://login.microsoftonline.com/${TENANT_ID}/oauth2/v2.0/authorize?prompt=select_account&response_type=code&client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&scope=.default`;
const { t } = useTranslation('translation', { keyPrefix: 'home' });
const { t } = useTranslation("translation", { keyPrefix: "home" });

return <Button variant="contained" component={Link} to={link}> {t('login', 'Login')}</Button>
return (
<Button variant="contained" component={Link} to={link}>
{" "}
{t("login", "Login")}
</Button>
);
}
Loading

0 comments on commit 4b6a743

Please sign in to comment.