93 lines
2.5 KiB
TypeScript
93 lines
2.5 KiB
TypeScript
import CustomAppBar from "./CustomAppBar";
|
|
import React, { ReactElement } from "react";
|
|
import { makeStyles } from "@material-ui/core/styles";
|
|
import { editorRoutes, HomePageEditor } from "./HomePageEditor";
|
|
import { UserRole } from "../jwt/jwt";
|
|
import { candidateRoutes, HomePageCandidate } from "./HomePageCandidate";
|
|
import { HomePageUser, userRoutes } from "./HomePageUser";
|
|
import { MainMenu, mainMenuOpen, mainMenuWidth, MenuOption } from "./MainMenu";
|
|
import clsx from "clsx";
|
|
import { useReactiveVar } from "@apollo/client";
|
|
|
|
const useStyles = makeStyles((theme) => ({
|
|
appBarSpacer: theme.mixins.toolbar,
|
|
content: {
|
|
flexGrow: 1,
|
|
padding: theme.spacing(3),
|
|
transition: theme.transitions.create("margin", {
|
|
easing: theme.transitions.easing.sharp,
|
|
duration: theme.transitions.duration.leavingScreen,
|
|
}),
|
|
marginLeft: -mainMenuWidth,
|
|
},
|
|
contentShift: {
|
|
transition: theme.transitions.create("margin", {
|
|
easing: theme.transitions.easing.easeOut,
|
|
duration: theme.transitions.duration.enteringScreen,
|
|
}),
|
|
marginLeft: 0,
|
|
},
|
|
invalidTokenContainer: {
|
|
paddingTop: theme.spacing(4),
|
|
paddingBottom: theme.spacing(4),
|
|
},
|
|
root: {
|
|
display: "flex",
|
|
},
|
|
}));
|
|
|
|
export interface PersonRoutes {
|
|
[id: string]: MenuOption;
|
|
}
|
|
|
|
interface MainProps {
|
|
userRole: UserRole;
|
|
loggedInUserRowId: number;
|
|
}
|
|
|
|
function Main(props: MainProps): ReactElement {
|
|
const classes = useStyles();
|
|
const open = useReactiveVar(mainMenuOpen);
|
|
|
|
const getHomePage = (): ReactElement => {
|
|
switch (props.userRole) {
|
|
case "kandimat_editor":
|
|
return <HomePageEditor loggedInUserRowId={props.loggedInUserRowId} />;
|
|
case "kandimat_candidate":
|
|
return (
|
|
<HomePageCandidate loggedInPersonRowId={props.loggedInUserRowId} />
|
|
);
|
|
case "kandimat_person":
|
|
return <HomePageUser />;
|
|
}
|
|
};
|
|
|
|
const getMenuOptions = (): Array<MenuOption> => {
|
|
switch (props.userRole) {
|
|
case "kandimat_editor":
|
|
return Object.values(editorRoutes);
|
|
case "kandimat_candidate":
|
|
return Object.values(candidateRoutes);
|
|
case "kandimat_person":
|
|
return Object.values(userRoutes);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className={classes.root}>
|
|
<CustomAppBar />
|
|
<MainMenu options={getMenuOptions()} />
|
|
<main
|
|
className={clsx(classes.content, {
|
|
[classes.contentShift]: open,
|
|
})}
|
|
>
|
|
<div className={classes.appBarSpacer} />
|
|
{getHomePage()}
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Main;
|