#6 Implement logout

Also include a very basic main page with an app bar where one can logout.

redaktions-app/src/App.tsx

@@ -3,12 +3,16 @@ import './App.css';
 import SignIn from "./components/SignIn";
 import {ApolloProvider} from "@apollo/client";
 import {client} from "./backend-connection/helper";
+import Main from "./components/Main";
 
 
 function App() {
+
   return (
     <ApolloProvider client={client}>
-      {localStorage.getItem("token") ? <div>you are logged in</div> : <SignIn/>}
+      {localStorage.getItem("token")
+        ? <Main />
+        : <SignIn/>}
     </ApolloProvider>
   );
 }

redaktions-app/src/components/Copyright.tsx

@@ -0,0 +1,16 @@
+import Typography from "@material-ui/core/Typography";
+import Link from "@material-ui/core/Link";
+import React from "react";
+
+export function Copyright() {
+    return (
+        <Typography variant="body2" color="textSecondary" align="center">
+            {'Copyright © '}
+            <Link color="inherit" href="https://blog.netzbegruenung.de/">
+                Netzbegruenung e.V.
+            </Link>{' '}
+            {new Date().getFullYear()}
+            {'.'}
+        </Typography>
+    );
+}

redaktions-app/src/components/CustomAppBar.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import AppBar from '@material-ui/core/AppBar';
+import {IconButton, MenuItem, Toolbar, Typography} from '@material-ui/core';
+import MenuIcon from '@material-ui/icons/Menu';
+import Menu from '@material-ui/core/Menu';
+import AccountCircle from '@material-ui/icons/AccountCircle';
+import {makeStyles} from "@material-ui/core/styles";
+
+
+const useStyles = makeStyles({
+  menuButton: {
+    marginRight: 16,
+  },
+  title: {
+    flexGrow: 1,
+  },
+})
+
+function CustomAppBar() {
+  const classes = useStyles()
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const open = Boolean(anchorEl);
+
+  const handleMenu = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleLogout = () => {
+    localStorage.removeItem('token')
+    window.location.href = window.location.origin
+  }
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+    return (
+      <AppBar>
+        <Toolbar>
+          <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
+            <MenuIcon />
+          </IconButton>
+          <Typography variant="h6" className={classes.title}>
+            Candymat Redaktion
+          </Typography>
+          <IconButton
+            aria-label="account of current user"
+            aria-controls="menu-appbar"
+            aria-haspopup="true"
+            onClick={handleMenu}
+            color="inherit"
+          >
+            <AccountCircle />
+          </IconButton>
+          <Menu
+            id="menu-appbar"
+            anchorEl={anchorEl}
+            anchorOrigin={{
+              vertical: 'top',
+              horizontal: 'right',
+            }}
+            keepMounted
+            transformOrigin={{
+              vertical: 'top',
+              horizontal: 'right',
+            }}
+            open={open}
+            onClose={handleClose}
+          >
+            <MenuItem onClick={handleClose}>Profil</MenuItem>
+            <MenuItem onClick={handleLogout}>Logout</MenuItem>
+          </Menu>
+        </Toolbar>
+      </AppBar>
+    );
+}
+
+export default CustomAppBar

redaktions-app/src/components/Main.tsx

@@ -0,0 +1,54 @@
+import CustomAppBar from "./CustomAppBar";
+import {Box, Container, Grid, Paper} from "@material-ui/core";
+import React from "react";
+import clsx from "clsx";
+import {makeStyles} from "@material-ui/core/styles";
+import {Copyright} from "./Copyright";
+
+const useStyles = makeStyles((theme) => ({
+  appBarSpacer: theme.mixins.toolbar,
+  content: {
+    flexGrow: 1,
+    height: '100vh',
+    overflow: 'auto',
+  },
+  container: {
+    paddingTop: theme.spacing(4),
+    paddingBottom: theme.spacing(4),
+    flexDirection: 'column',
+  },
+  paper: {
+    margin: 5,
+    padding: theme.spacing(2),
+    display: 'flex',
+    overflow: 'auto',
+    flexDirection: 'column',
+  },
+  fixedHeight: {
+    height: 240,
+  },
+}));
+
+function Main() {
+  const classes = useStyles();
+  const fixedHeightPaper = clsx(classes.paper, classes.fixedHeight);
+  return (
+    <div>
+      <CustomAppBar/>
+      <main className={classes.content}>
+        <div className={classes.appBarSpacer}/>
+        <Container maxWidth="lg" className={classes.container}>
+          <Paper className={fixedHeightPaper}>
+            blablablubb
+          </Paper>
+          <Paper className={fixedHeightPaper}>
+            blablaj
+          </Paper>
+          <Copyright/>
+        </Container>
+      </main>
+    </div>
+  )
+}
+
+export default Main;

redaktions-app/src/components/SignIn.tsx

@@ -13,19 +13,7 @@ import {makeStyles} from '@material-ui/core/styles';
 import Container from '@material-ui/core/Container';
 import {gql, useMutation} from "@apollo/client";
 import ButtonWithSpinner from "./ButtonWithSpinner";
-
-function Copyright() {
-  return (
-    <Typography variant="body2" color="textSecondary" align="center">
-      {'Copyright © '}
-      <Link color="inherit" href="https://blog.netzbegruenung.de/">
-        Netzbegruenung e.V.
-      </Link>{' '}
-      {new Date().getFullYear()}
-      {'.'}
-    </Typography>
-  );
-}
+import {Copyright} from "./Copyright";
 
 const useStyles = makeStyles((theme) => ({
   paper: {