kandimat/redaktions-app/src/components/HomePageEditor.tsx

import { Container } from "@material-ui/core";
import QuestionList from "./QuestionList";
import CategoryList from "./CategoryList";
import { Copyright } from "./Copyright";
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import { Route, Switch } from "react-router-dom";
import QuestionAnswerIcon from "@material-ui/icons/QuestionAnswer";
import PeopleIcon from "@material-ui/icons/People";
import { MenuOption } from "./MainMenu";
import { PersonRoutes } from "./Main";
import { UserManagement } from "./UserManagement";

const useStyles = makeStyles((theme) => ({
  container: {
    paddingTop: theme.spacing(4),
    paddingBottom: theme.spacing(4),
    flexDirection: "column",
  },
}));

interface EditorRoutes extends PersonRoutes {
  question: MenuOption;
  userManagement: MenuOption;
}

export const editorRoutes: EditorRoutes = {
  question: {
    title: "Fragen bearbeiten",
    path: "/",
    icon: <QuestionAnswerIcon />,
  },
  userManagement: {
    title: "Benutzer verwalten",
    path: "/benutzer",
    icon: <PeopleIcon />,
  },
};

export function HomePageEditor(): React.ReactElement {
  const classes = useStyles();

  return (
    <Container maxWidth="lg" className={classes.container}>
      <Switch>
        <Route exact path={editorRoutes.question.path}>
          <QuestionList />
          <CategoryList />
        </Route>
        <Route path={editorRoutes.userManagement.path}>
          <UserManagement />
        </Route>
      </Switch>
      <Copyright />
    </Container>
  );
}