add bare minimum appbar #10

elite-se · Feb 27, 2020 · e8a9bf7 · e8a9bf7
1 parent 37f5c2b
commit e8a9bf7
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 33 deletions.
diff --git a/packages/frontend/src/components/App.tsx b/packages/frontend/src/components/App.tsx
@@ -1,12 +1,13 @@
 import * as React from 'react';
 import { hot } from 'react-hot-loader';
-import { Route, Switch } from 'react-router';
+import { Route, Switch, Redirect } from 'react-router';
 import { Router } from 'react-router-dom';
-import { APP_ROUTES, ERROR_404_PAGE } from '../util/approutes';
+import { APP_ROUTES, getLinkDisplayNameForPage, getLinkForPage, HOME_PAGE } from '../util/approutes';
 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';
 
 const configuration: Configuration = getConfiguration();
 
@@ -15,9 +16,12 @@ export const AppComponent = () => (
     <Router history={history}>
       <Switch>
         {APP_ROUTES.map((routeProps, index) => (
-          <Route key={index} {...routeProps} />
+          <>
+            <NavigationBar title={getLinkDisplayNameForPage(routeProps)} />
+            <Route key={index} {...routeProps} />
+          </>
         ))}
-        <Route {...ERROR_404_PAGE} />
+        <Route path={'/'} render={() => <Redirect to={getLinkForPage(HOME_PAGE)} />} />
       </Switch>
     </Router>
   </FeatureFlagsProvider>

diff --git a/packages/frontend/src/components/general/NavigationBar.tsx b/packages/frontend/src/components/general/NavigationBar.tsx
@@ -0,0 +1,51 @@
+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/index.html b/packages/frontend/src/index.html
@@ -1,21 +1,19 @@
 <!DOCTYPE html>
 <html>
+  <head>
+    <meta charset="UTF-8" />
 
-<head>
-  <meta charset="UTF-8" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
 
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
-  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+    <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
 
-  <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
+    <title>Elite-SE | Sexy</title>
+  </head>
 
-  <title>Elite-SE | Sexy</title>
-</head>
-
-<body>
-  <!-- React root container dom element -->
-  <div id="root" />
-  <noscript>You need to enable javascript to be able to use this WebApp</noscript>
-</body>
-
-</html>
+  <body style="margin: 0">
+    <!-- React root container dom element -->
+    <div id="root" />
+    <noscript>You need to enable javascript to be able to use this WebApp</noscript>
+  </body>
+</html>
diff --git a/packages/frontend/src/util/approutes.tsx b/packages/frontend/src/util/approutes.tsx
@@ -30,8 +30,8 @@ export function getLinkForPage(route: AppRouteProps): LinkType {
 
 /**
  * Retrieves the humand readable link title/displayed name
- * for a given route 
- * 
+ * for a given route
+ *
  * @param route
  */
 export function getLinkDisplayNameForPage(route: AppRouteProps): string {
@@ -48,23 +48,14 @@ export function getLinkDisplayNameForPage(route: AppRouteProps): string {
 export const HOME_PAGE: AppRouteProps = {
   path: '/home',
   linkDisplayName: 'Home',
-  render: props => <HomePage {...props} />
+  render: props => <HomePage {...props} />,
 };
 
 // Page with searchable, useful links for elite-se-degree program
 export const LINK_PAGE: AppRouteProps = {
   path: '/links',
   linkDisplayName: 'Useful Links',
-  render: props => <LinkPage {...props} />
+  render: props => <LinkPage {...props} />,
 };
 
-// Simply redirect to the main page on 404
-export const ERROR_404_PAGE: AppRouteProps = {
-  path: '/',
-  render: () => <Redirect to={getLinkForPage(HOME_PAGE)} />,
-};
-
-export const APP_ROUTES: AppRouteProps[] = [
-  HOME_PAGE,
-  LINK_PAGE
-];
+export const APP_ROUTES: AppRouteProps[] = [HOME_PAGE, LINK_PAGE];