From 9943fb9172a922f0f4d45ec388c9d7db28908790 Mon Sep 17 00:00:00 2001
From: Dominik Horn <dominik.horn@tum.de>
Date: Thu, 27 Feb 2020 18:37:57 +0100
Subject: [PATCH] implement swipeable bottom drawer for APP_ROUTES #10

---
 packages/frontend/src/components/App.tsx      |  7 +-
 .../src/components/general/NavigationBar.tsx  | 51 --------------
 .../general/navigation/NavigationBar.tsx      | 70 +++++++++++++++++++
 .../general/navigation/RouteDrawer.tsx        | 60 ++++++++++++++++
 .../src/components/pages/HomePage.tsx         | 24 +++----
 .../src/components/pages/LinkPage.tsx         | 10 +--
 .../pages/support/LinkDirectory.tsx           | 13 ----
 packages/frontend/src/util/approutes.tsx      |  7 ++
 8 files changed, 154 insertions(+), 88 deletions(-)
 delete mode 100644 packages/frontend/src/components/general/NavigationBar.tsx
 create mode 100644 packages/frontend/src/components/general/navigation/NavigationBar.tsx
 create mode 100644 packages/frontend/src/components/general/navigation/RouteDrawer.tsx
 delete mode 100644 packages/frontend/src/components/pages/support/LinkDirectory.tsx

diff --git a/packages/frontend/src/components/App.tsx b/packages/frontend/src/components/App.tsx
index 6f3b327..7a1d8e5 100644
--- a/packages/frontend/src/components/App.tsx
+++ b/packages/frontend/src/components/App.tsx
@@ -7,7 +7,7 @@ import history from '../util/history';
 import { FeatureFlagsProvider } from 'elite-feature-flags';
 import { Configuration } from 'elite-types';
 import { getConfiguration } from 'elite-configuration';
-import { NavigationBar } from './general/NavigationBar';
+import { NavigationBar } from './general/navigation/NavigationBar';
 
 const configuration: Configuration = getConfiguration();
 
@@ -16,10 +16,7 @@ export const AppComponent = () => (
     <Router history={history}>
       <Switch>
         {APP_ROUTES.map((routeProps, index) => (
-          <>
-            <NavigationBar title={getLinkDisplayNameForPage(routeProps)} />
-            <Route key={index} {...routeProps} />
-          </>
+          <Route key={index} {...routeProps} />
         ))}
         <Route path={'/'} render={() => <Redirect to={getLinkForPage(HOME_PAGE)} />} />
       </Switch>
diff --git a/packages/frontend/src/components/general/NavigationBar.tsx b/packages/frontend/src/components/general/NavigationBar.tsx
deleted file mode 100644
index 5cad539..0000000
--- a/packages/frontend/src/components/general/NavigationBar.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import * as React from 'react';
-import {
-  AppBar,
-  Toolbar,
-  makeStyles,
-  fade,
-  IconButton,
-  Theme,
-  createStyles,
-  Typography,
-  Button,
-} from '@material-ui/core';
-import MenuIcon from '@material-ui/icons/Menu';
-
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      flexGrow: 1,
-    },
-    menuButton: {
-      marginRight: theme.spacing(2),
-    },
-    title: {
-      flexGrow: 1,
-    },
-  }),
-);
-
-export interface NavigationBarProps {
-  readonly title: string;
-}
-
-export const NavigationBar = (props: NavigationBarProps) => {
-  const classes = useStyles();
-
-  return (
-    <div className={classes.root}>
-      <AppBar position={'static'}>
-        <Toolbar>
-          <IconButton edge={'start'} className={classes.menuButton} color={'inherit'} aria-label={'open drawer'}>
-            <MenuIcon />
-          </IconButton>
-          <Typography className={classes.title} variant={'h6'} noWrap>
-            {props.title}
-          </Typography>
-          <Button color={'inherit'}>Login</Button>
-        </Toolbar>
-      </AppBar>
-    </div>
-  );
-};
diff --git a/packages/frontend/src/components/general/navigation/NavigationBar.tsx b/packages/frontend/src/components/general/navigation/NavigationBar.tsx
new file mode 100644
index 0000000..a182352
--- /dev/null
+++ b/packages/frontend/src/components/general/navigation/NavigationBar.tsx
@@ -0,0 +1,70 @@
+import * as React from 'react';
+import {
+  AppBar,
+  Toolbar,
+  makeStyles,
+  fade,
+  IconButton,
+  Theme,
+  createStyles,
+  Typography,
+  Button,
+} from '@material-ui/core';
+import MenuIcon from '@material-ui/icons/Menu';
+import { RouteDrawer } from './RouteDrawer';
+import h from '../../../util/history';
+import { getLinkDisplayNameForPath } from '../../../util/approutes';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      flexGrow: 1,
+    },
+    menuButton: {
+      marginRight: theme.spacing(2),
+    },
+    title: {
+      flexGrow: 1,
+    },
+  }),
+);
+
+export interface NavigationBarProps {
+  readonly title?: string;
+}
+
+export const NavigationBar = (props: NavigationBarProps) => {
+  const classes = useStyles();
+  const [routeDrawerOpen, setRouteDrawerOpen] = React.useState(false);
+  const title = props.title || getLinkDisplayNameForPath(h.location.pathname);
+
+  return (
+    <>
+      <div className={classes.root}>
+        <AppBar position={'static'}>
+          <Toolbar>
+            <IconButton
+              edge={'start'}
+              className={classes.menuButton}
+              color={'inherit'}
+              aria-label={'open drawer'}
+              onClick={() => setRouteDrawerOpen(true)}
+            >
+              <MenuIcon />
+            </IconButton>
+            <Typography className={classes.title} variant={'h6'} noWrap>
+              {title}
+            </Typography>
+            <Button color={'inherit'}>Login</Button>
+          </Toolbar>
+        </AppBar>
+      </div>
+
+      <RouteDrawer
+        isOpen={routeDrawerOpen}
+        onOpen={() => setRouteDrawerOpen(true)}
+        onClose={() => setRouteDrawerOpen(false)}
+      />
+    </>
+  );
+};
diff --git a/packages/frontend/src/components/general/navigation/RouteDrawer.tsx b/packages/frontend/src/components/general/navigation/RouteDrawer.tsx
new file mode 100644
index 0000000..7ae6303
--- /dev/null
+++ b/packages/frontend/src/components/general/navigation/RouteDrawer.tsx
@@ -0,0 +1,60 @@
+import * as React from 'react';
+import {
+  SwipeableDrawer,
+  createStyles,
+  makeStyles,
+  Theme,
+  List,
+  Divider,
+  ListItem,
+  ListItemIcon,
+  ListItemText,
+} from '@material-ui/core';
+import InboxIcon from '@material-ui/icons/MoveToInbox';
+import MailIcon from '@material-ui/icons/Mail';
+import { APP_ROUTES, getLinkDisplayNameForPage, getLinkForPage } from '../../../util/approutes';
+import { Link } from 'react-router-dom';
+
+export interface RouteDrawerProps {
+  readonly isOpen: boolean;
+  readonly onOpen: () => void;
+  readonly onClose: () => void;
+}
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    list: {
+      width: 250,
+    },
+    fullList: {
+      width: 'auto',
+    },
+  }),
+);
+
+export const RouteDrawer = (props: RouteDrawerProps) => {
+  const classes = useStyles();
+  return (
+    <SwipeableDrawer anchor={'bottom'} open={props.isOpen} onClose={props.onClose} onOpen={props.onOpen}>
+      <div className={classes.fullList} role={'presentation'} onClick={props.onClose} onKeyDown={props.onClose}>
+        <List>
+          {APP_ROUTES.map(route => (
+            <ListItem button={true} key={getLinkForPage(route)}>
+              <Link to={getLinkForPage(route)}>
+                <ListItemText primary={getLinkDisplayNameForPage(route)} />
+              </Link>
+            </ListItem>
+          ))}
+        </List>
+        {/** TODO: bellow is testing code */}
+        {/* <Divider />
+        {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
+          <ListItem button={true} key={text}>
+            <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
+            <ListItemText primary={text} />
+          </ListItem>
+        ))} */}
+      </div>
+    </SwipeableDrawer>
+  );
+};
diff --git a/packages/frontend/src/components/pages/HomePage.tsx b/packages/frontend/src/components/pages/HomePage.tsx
index f3e3656..7ae43ba 100644
--- a/packages/frontend/src/components/pages/HomePage.tsx
+++ b/packages/frontend/src/components/pages/HomePage.tsx
@@ -1,18 +1,18 @@
 import * as React from 'react';
 import { RouteComponentProps } from 'react-router';
-import { LinkDirectory } from './support/LinkDirectory';
-import { Divider } from '@material-ui/core';
 import { FeatureFlag } from 'elite-feature-flags';
+import { NavigationBar } from '../general/navigation/NavigationBar';
 
 export interface HomePageProps extends RouteComponentProps {}
 
-export const HomePage = (props: HomePageProps) => (
-  <>
-    <h1>Main Page</h1>
-    <FeatureFlag featureName="under-construction-message">
-      Elite Sexyz is currently under construction. See discord main channel for more information
-    </FeatureFlag>
-    <Divider />
-    <LinkDirectory />
-  </>
-);
+export const HomePage = (props: HomePageProps) => {
+  return (
+    <>
+      <NavigationBar />
+
+      <FeatureFlag featureName="under-construction-message">
+        Elite Sexyz is currently under construction. See discord main channel for more information
+      </FeatureFlag>
+    </>
+  );
+};
diff --git a/packages/frontend/src/components/pages/LinkPage.tsx b/packages/frontend/src/components/pages/LinkPage.tsx
index ef63230..68da9fa 100644
--- a/packages/frontend/src/components/pages/LinkPage.tsx
+++ b/packages/frontend/src/components/pages/LinkPage.tsx
@@ -1,21 +1,17 @@
-import { Divider, List } from '@material-ui/core';
+import { List } from '@material-ui/core';
 import * as React from 'react';
 import { RouteComponentProps } from 'react-router';
 import { LinkListItem } from '../general/LinkListItem';
-import { LinkDirectory } from './support/LinkDirectory';
+import { NavigationBar } from '../general/navigation/NavigationBar';
 
 export interface LinkPageProps extends RouteComponentProps {}
 
 export const LinkPage = (props: LinkPageProps) => (
   <>
-    <h1>Useful Links List</h1>
+    <NavigationBar />
     <List>
       <LinkListItem href={'https://elite-se.informatik.uni-augsburg.de'} title={'Main Webpage'} />
       <LinkListItem href={'https://github.com/elite-se/elite-se.protokolle'} title={'Exam Protocols'} />
     </List>
-
-    <Divider />
-
-    <LinkDirectory />
   </>
 );
diff --git a/packages/frontend/src/components/pages/support/LinkDirectory.tsx b/packages/frontend/src/components/pages/support/LinkDirectory.tsx
deleted file mode 100644
index b896837..0000000
--- a/packages/frontend/src/components/pages/support/LinkDirectory.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import * as React from 'react';
-import { Link } from 'react-router-dom';
-import { APP_ROUTES, getLinkDisplayNameForPage, getLinkForPage } from '../../../util/approutes';
-
-export const LinkDirectory = () => (
-  <ul>
-    {APP_ROUTES.map((route, index) => (
-      <li key={index}>
-        <Link to={getLinkForPage(route)}>{getLinkDisplayNameForPage(route)}</Link>
-      </li>
-    ))}
-  </ul>
-);
diff --git a/packages/frontend/src/util/approutes.tsx b/packages/frontend/src/util/approutes.tsx
index 3cf3c87..5a76294 100644
--- a/packages/frontend/src/util/approutes.tsx
+++ b/packages/frontend/src/util/approutes.tsx
@@ -38,6 +38,13 @@ export function getLinkDisplayNameForPage(route: AppRouteProps): string {
   return route.linkDisplayName || getLinkForPage(route);
 }
 
+// TODO: remove this and replace with function from routing-decorator branch
+export function getLinkDisplayNameForPath(path: string): string {
+  const route = APP_ROUTES.find(route => route.path == path);
+  if (!route) return 'ERROR';
+  return getLinkDisplayNameForPage(route);
+}
+
 /**
  * Specify all pages in this file by defining
  * a pages route props and adding it to the