refactor and move NavigationBar code to components package #10

packages/components/src/index.ts

@@ -1,2 +1,3 @@
 export * from './general';
 export * from './list';
+export * from './navigation';

packages/components/src/navigation/index.ts

@@ -0,0 +1 @@
+export * from './navigationBar.component';

packages/frontend/src/components/general/navigation/NavigationBar.tsx → packages/components/src/navigation/navigationBar.component.tsx

@@ -1,20 +1,8 @@
 import * as React from 'react';
-import {
-  AppBar,
-  Toolbar,
-  makeStyles,
-  fade,
-  IconButton,
-  Theme,
-  createStyles,
-  Typography,
-  Button,
-} from '@material-ui/core';
+import { AppBar, Toolbar, makeStyles, 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 { getLinkForPath } from 'util/routes';
-import { AppPath } from 'elite-types';
+import { RouteDrawer } from './routeDrawer.component';
+import { AppRoute } from 'elite-types';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -31,13 +19,27 @@ const useStyles = makeStyles((theme: Theme) =>
 );
 
 export interface NavigationBarProps {
-  readonly title?: string;
+  /** Title displayed by in navigation bar */
+  readonly title: string;
+
+  /** Callback used by navigation bar to navigate to a route */
+  readonly onNavigateTo: (route: AppRoute) => void;
+
+  /** Routes that the user may navigate to */
+  readonly routes: AppRoute[];
 }
 
+/**
+ * NavigationBar displays a material-ui AppBar in combination with a Drawer
+ * component which the User can use to navigate the available routes
+ *
+ * @param props See NavigationBarProps
+ */
 export const NavigationBar = (props: NavigationBarProps) => {
   const classes = useStyles();
   const [routeDrawerOpen, setRouteDrawerOpen] = React.useState(false);
-  const title = props.title || getLinkForPath(h.location.pathname as AppPath);
+
+  const title = props.title;
 
   return (
     <>
@@ -62,6 +64,8 @@ export const NavigationBar = (props: NavigationBarProps) => {
       </div>
 
       <RouteDrawer
+        routes={props.routes}
+        onNavigateTo={props.onNavigateTo}
         isOpen={routeDrawerOpen}
         onOpen={() => setRouteDrawerOpen(true)}
         onClose={() => setRouteDrawerOpen(false)}

packages/frontend/src/components/general/navigation/RouteDrawer.tsx → packages/components/src/navigation/routeDrawer.component.tsx

@@ -2,20 +2,29 @@ import {
   createStyles,
   List,
   ListItem,
+  ListItemIcon,
   ListItemText,
   makeStyles,
   SwipeableDrawer,
   Theme,
-  ListItemIcon,
 } from '@material-ui/core';
+import { AppRoute, getDisplayNameForRoute, getLinkForRoute } from 'elite-types';
 import * as React from 'react';
-import { Link } from 'react-router-dom';
-import { APP_ROUTES, getLinkForRoute, getDisplayNameForRoute } from '../../../util/routes';
-import h from '../../../util/history';
 
 export interface RouteDrawerProps {
+  /** Routes displayed as options in the drawer list */
+  readonly routes: AppRoute[];
+
+  /** Callback used by route drawer to navigate to a route */
+  readonly onNavigateTo: (route: AppRoute) => void;
+
+  /** Whether or not the drawer is open */
   readonly isOpen: boolean;
+
+  /** Callback used by the drawer to signify it should open */
   readonly onOpen: () => void;
+
+  /** Callback used by the drawer to signify it should close */
   readonly onClose: () => void;
 }
 
@@ -36,8 +45,8 @@ export const RouteDrawer = (props: RouteDrawerProps) => {
     <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={getLinkForRoute(route)} onClick={() => h.push(getLinkForRoute(route))}>
+          {props.routes.map(route => (
+            <ListItem button={true} key={getLinkForRoute(route)} onClick={() => props.onNavigateTo(route)}>
               {route.icon && <ListItemIcon>{route.icon}</ListItemIcon>}
               <ListItemText primary={getDisplayNameForRoute(route)} />
             </ListItem>

packages/frontend/src/app.tsx

@@ -1,6 +1,6 @@
-import { ErrorBoundaryComponent, FeatureFlagsProvider } from 'elite-components';
+import { ErrorBoundaryComponent, FeatureFlagsProvider, NavigationBar } from 'elite-components';
 import { getConfiguration } from 'elite-configuration';
-import { AppPath, Configuration } from 'elite-types';
+import { AppPath, Configuration, getDisplayNameForRoute, getLinkForRoute } from 'elite-types';
 import * as React from 'react';
 import { hot } from 'react-hot-loader';
 import { Redirect, Route, Switch } from 'react-router';
@@ -17,7 +17,20 @@ export const AppComponent = () => (
       <ErrorBoundaryComponent>
         <Switch>
           {APP_ROUTES.map((route, index) => (
-            <Route key={index} {...route} />
+            <Route
+              key={index}
+              {...route}
+              render={props => (
+                <>
+                  <NavigationBar
+                    routes={APP_ROUTES}
+                    title={getDisplayNameForRoute(route)}
+                    onNavigateTo={r => history.push(getLinkForRoute(r))}
+                  />
+                  {route.render(props)}
+                </>
+              )}
+            />
           ))}
           {/* Error 404 Fallback */}
           <Route path={AppPath.ERROR} render={() => <Redirect to={AppPath.HOME} />} />

packages/frontend/src/util/routes.tsx → packages/frontend/src/util/routes.ts

@@ -1,20 +1,9 @@
-import * as React from 'react';
 import { HOME_ROUTE } from 'elite-home';
 import { LINK_ROUTE } from 'elite-link';
-import { AppPath, AppRoute, LinkType } from 'elite-types';
+import { AppPath, AppRoute, LinkType, getLinkForRoute, getDisplayNameForRoute } from 'elite-types';
 
 export const APP_ROUTES: AppRoute[] = [HOME_ROUTE, LINK_ROUTE];
 
-/**
- * Retrieves the url which other pages can use to link to a certain
- * app path
- *
- * @param route
- */
-export function getLinkForRoute(route: AppRoute): LinkType {
-  return route.link || route.path;
-}
-
 /**
  * Retrieves the url which other pages can use to link to a certain
  * app path
@@ -28,16 +17,6 @@ export function getLinkForPath(path: AppPath): LinkType {
   return getLinkForRoute(route);
 }
 
-/**
- * Retrieves the human readable link title/displayed name for
- * a given route
- *
- * @param route
- */
-export function getDisplayNameForRoute(route: AppRoute): string {
-  return route.displayName || getLinkForRoute(route);
-}
-
 /**
  * Retrieves the human readable link title/displayed name for
  * a given path

packages/home/src/home.page.tsx

@@ -1,7 +1,7 @@
 import { FeatureFlag } from 'elite-components';
+import { AppPath, AppRoute } from 'elite-types';
 import * as React from 'react';
 import { RouteComponentProps } from 'react-router';
-import { AppPath, AppRoute } from 'elite-types';
 
 export interface HomePageProps extends RouteComponentProps {}
 
@@ -16,12 +16,8 @@ export const HOME_ROUTE: AppRoute = {
 
 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>
-    </>
+    <FeatureFlag featureName="under-construction-message">
+      Elite Sexyz is currently under construction. See discord main channel for more information
+    </FeatureFlag>
   );
 };

packages/link/src/link.page.tsx

@@ -1,8 +1,8 @@
 import { List } from '@material-ui/core';
-import * as React from 'react';
-import { RouteComponentProps } from 'react-router';
 import { LinkListItem } from 'elite-components';
 import { AppPath, AppRoute } from 'elite-types';
+import * as React from 'react';
+import { RouteComponentProps } from 'react-router';
 
 export interface LinkPageProps extends RouteComponentProps {}
 
@@ -12,19 +12,12 @@ export interface LinkPageProps extends RouteComponentProps {}
 export const LINK_ROUTE: AppRoute = {
   path: AppPath.LINK,
   displayName: 'Useful Links',
-  render: props => (
-    <>
-      <LinkPage {...props} />
-    </>
-  ),
+  render: props => <LinkPage {...props} />,
 };
 
 export const LinkPage = (props: LinkPageProps) => (
-  <>
-    {/* <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>
-  </>
+  <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>
 );

packages/types/src/routes/appRoute.type.ts

@@ -1,22 +1,31 @@
 import { LinkType } from './link.type';
 import { AppPath } from './appPath.type';
-import { RouteProps } from 'react-router';
+import { RouteProps, RouteComponentProps } from 'react-router';
 
 /**
  * Each Approute can have a specific link (i.e., path with filled parameter placeholders),
  * a display Name, i.e., text of the link and a nonoptional (!) path
  */
 export interface AppRoute extends RouteProps {
-  // Use this if the link target differs from the path specification,
-  // i.e., if the path url contains paramter specifications etc
+  /**
+   * Use this if the link target differs from the path specification,
+   * i.e., if the path url contains paramter specifications etc
+   */
   readonly link?: LinkType;
 
-  // link text (Human readable!)
+  /** link text (Human readable!) */
   readonly displayName?: string;
 
-  // optional icon displayed next to the link name
+  /** optional icon displayed next to the link name */
   readonly icon?: JSX.Element;
 
-  // AppRoutes must have a path - deoptionalize this property
+  /** AppRoutes must have a path - deoptionalize this property */
   readonly path: AppPath;
+
+  /** render is required for AppRoutes */
+  readonly render: (props: RouteComponentProps<any>) => React.ReactNode;
+
+  /** prevent usage of component/children props, i.e., AppRoutes must use render! */
+  readonly component?: never;
+  readonly children?: never;
 }

packages/types/src/routes/appRoute.util.ts

@@ -0,0 +1,22 @@
+import { AppRoute } from './appRoute.type';
+import { LinkType } from './link.type';
+
+/**
+ * Retrieves the url which other pages can use to link to a certain
+ * app path
+ *
+ * @param route
+ */
+export function getLinkForRoute(route: AppRoute): LinkType {
+  return route.link || route.path;
+}
+
+/**
+ * Retrieves the human readable link title/displayed name for
+ * a given route
+ *
+ * @param route
+ */
+export function getDisplayNameForRoute(route: AppRoute): string {
+  return route.displayName || getLinkForRoute(route);
+}

packages/types/src/routes/index.ts

@@ -1,3 +1,4 @@
 export * from './appPath.type';
 export * from './appRoute.type';
+export * from './appRoute.util';
 export * from './link.type';