adds theme switcher and ability to nest subroutes

Author: Emile Frey

frontend/src/components/Home.tsx

@@ -1,11 +1,11 @@
-import React, { useState, useContext } from 'react'
+import React, { useState, useContext, useRef } from 'react'
 import axios, { AxiosRequestConfig } from 'axios';
 import * as settings from '../settings';
 
 import CssBaseline from '@material-ui/core/CssBaseline';
 import { makeStyles } from '@material-ui/core/styles';
 import { Container, Grid, Paper, Typography, Button, TextField, Tooltip, Switch, createStyles, Theme, withStyles, SwitchProps, SwitchClassKey } from '@material-ui/core';
-import { AuthProps } from '../App';
+import { AppProps } from '../App';
 import { AlertContext } from '../contexts/AlertContext';
 
 const useStyles = makeStyles((theme) => ({
@@ -104,12 +104,12 @@ const IOSSwitch = withStyles((theme: Theme) =>
 });
 
 
-function Home(props: AuthProps) {
+function Home(props: AppProps) {
 
   const [name, setName] = useState("")
   const [helloName, setHelloName] = useState("")
   const [token, setToken] = useState(props.token)
-
+  const userInput = useRef<HTMLInputElement>(null)
   const { TriggerAlert } = useContext(AlertContext)
   const classes = useStyles()
 
@@ -153,8 +153,7 @@ function Home(props: AuthProps) {
                 autoComplete="name"
                 autoFocus
                 onChange={handleFormFieldChange}
-              >
-              </TextField>
+              />
               <Tooltip title={`Enter name and click submit to see a ${token === props.token ? 'successful' : 'failed'} request.`}>
                 <Button variant="contained" color="primary" onClick={handleSubmit} disabled={name.length === 0}>
                   Submit
@@ -173,7 +172,7 @@ function Home(props: AuthProps) {
             </Paper>
           </Grid>
           <Grid item xs={6}>
-            <Paper className={classes.title}>
+            <Paper className={classes.textInput}>
               <Typography variant="h6">
                 Test Panel:
               </Typography>
@@ -193,6 +192,20 @@ function Home(props: AuthProps) {
                   <Grid item>On</Grid>
                 </Grid>
               </Typography>
+              <Typography variant="subtitle2" style={{ marginTop: 20 }}>
+                Pass Param to Nested Subroute: <span>&nbsp;</span>
+              </Typography>
+              <TextField
+                margin="normal"
+                fullWidth
+                variant="outlined"
+                id="userinput"
+                label="User Input"
+                name="User Input"
+                inputRef={userInput} />
+              <Button variant="contained" color="primary" onClick={() => props.history.push(`${props.location.pathname}/nestedsubroute/${userInput.current?.value}`)} >
+                Submit
+              </Button>
             </Paper>
           </Grid>
         </Grid>

frontend/src/components/Layout/DropdownMenu.tsx

@@ -57,7 +57,7 @@ export default function DropdownMenu(props: DropdownMenuProps) {
         {props.dropdownButtonIcon}
         <ArrowDropDownIcon />
       </IconButton>
-      <Popper open={open} anchorEl={anchorRef.current} role={undefined} transition disablePortal>
+      <Popper open={open} anchorEl={anchorRef.current} role={undefined} transition disablePortal onClick={handleClose}>
         {({ TransitionProps, placement }) => (
           <Grow
             {...TransitionProps}

frontend/src/components/Layout/Layout.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 import TopBar from "./TopBar"
 import Footer from "./Footer"
 import CssBaseline from '@material-ui/core/CssBaseline';
-import { AppProps } from '../../App'
 import { Box, Tooltip, ListItem, Divider, Container, makeStyles, List } from '@material-ui/core';
 import { useHistory, useLocation } from 'react-router-dom';
 import { privateRoutes } from '../../routes/Routes'
+import { PrivateRouteProps } from '../../routes/PrivateRoute';
 
 const useStyles = makeStyles((theme) => ({
   body: {
@@ -48,7 +48,7 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 
-function Layout(props: AppProps) {
+function Layout(props: PrivateRouteProps) {
   const classes = useStyles();
   let location = useLocation();
   let history = useHistory();
@@ -60,8 +60,8 @@ function Layout(props: AppProps) {
         .map((route, index) => {
           const { buttonTitle, pathname, Icon } = route;
           return (
-            <Tooltip title={buttonTitle} aria-label={buttonTitle} key={index}>
-              <ListItem className={classes.ListItem} button onClick={() => history.push(pathname)} selected={location.pathname === pathname}>
+            <Tooltip title={buttonTitle ?? ""} aria-label={buttonTitle} key={index}>
+              <ListItem className={classes.ListItem} button onClick={() => history.push(pathname)} selected={location.pathname.startsWith(pathname)}>
                 {Icon && <Icon />}
               </ListItem>
             </Tooltip>
@@ -79,9 +79,11 @@ function Layout(props: AppProps) {
       <Divider />
       <main className={classes.content}>
         {props.isAuthenticated && <TopBar {...props} />}
-        <Container maxWidth="xl" className={classes.container}>
-          {props.children}
-        </Container>
+        {props.children &&
+          <Container maxWidth="xl" className={classes.container}>
+            {props.children}
+          </Container>
+        }
         <Footer />
       </main>
     </div>

frontend/src/components/Layout/TopBar.tsx

@@ -8,7 +8,8 @@ import DropdownMenu from '../Layout/DropdownMenu';
 import Brightness7Icon from '@material-ui/icons/Brightness7';
 import Brightness4Icon from '@material-ui/icons/Brightness4';
 import { ThemeContext } from '../../contexts/ThemeContext';
-import { AppProps } from '../../App';
+import { useHistory } from 'react-router-dom';
+import { PrivateRouteProps } from '../../routes/PrivateRoute';
 const useStyles = makeStyles((theme) => ({
   root: {
     flexGrow: 1,
@@ -21,10 +22,10 @@ const useStyles = makeStyles((theme) => ({
   }
 }));
 
-export default function TopBar(props: AppProps) {
+export default function TopBar(props: PrivateRouteProps) {
   const classes = useStyles();
   const { darkMode, setDarkMode } = useContext(ThemeContext);
-
+  const history = useHistory()
   return (
     <AppBar position="relative">
       <Toolbar className={props.isAuthenticated ? classes.authToolbar : undefined}>
@@ -39,7 +40,7 @@ export default function TopBar(props: AppProps) {
         {props.isAuthenticated && (
           <DropdownMenu dropdownButtonIcon={<AccountCircle />}>
             <div>
-              <MenuItem component='a' href='/change_password'>Change Password</MenuItem>
+              <MenuItem component='a' onClick={() => history.push('/change_password/')}>Change Password</MenuItem>
               <MenuItem onClick={() => props.logout()}>Logout</MenuItem>
             </div>
           </DropdownMenu>

frontend/src/components/Login/PasswordReset.tsx

@@ -35,7 +35,7 @@ export const PasswordReset = () => {
           setTokenInvalid(true)
         }
       })
-  }, [])
+  }, [token])
 
   return tokenInvalid ? <Redirect from='/' to='/login' /> : <PasswordResetForm token={token} />
 }

frontend/src/components/Login/PasswordUpdate.tsx

@@ -5,7 +5,7 @@ import * as settings from '../../settings';
 import { makeStyles } from '@material-ui/core/styles';
 import { Avatar, Button, Container, CssBaseline, LinearProgress, TextField, Typography } from '@material-ui/core';
 import VpnKeyIcon from '@material-ui/icons/VpnKey';
-import { AuthProps } from '../../App';
+import { AppProps } from '../../App';
 import { PasswordUpdateError } from '../../interfaces/axios/AxiosError';
 import ValidationMessages from '../../helpers/ValidationMessages'
 
@@ -33,7 +33,7 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 
-function PasswordUpdate(props: AuthProps) {
+function PasswordUpdate(props: AppProps) {
   const classes = useStyles();
   const [new_password1, setNewPassword1] = useState("");
   const [new_password2, setNewPassword2] = useState("");

frontend/src/contexts/ThemeContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useState, useReducer, useEffect } from 'react';
+import React, { createContext, useState, useEffect } from 'react';
 
 export type ThemeContextProps = {
   darkMode: boolean

frontend/src/routes/AppRouter.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { Redirect, Route, Switch } from 'react-router-dom';
+import { AppProps } from '../App';
+
+
+export const AppRouter: React.FC<AppProps> = (props: AppProps) => {
+  const { route, path, match, location, history, ...rest } = props;
+  return (
+    <>
+      {route?.subRoutes &&
+        <Switch>
+          {route.subRoutes.map((subRoute, i) => (
+            <Route
+              path={`${route.pathname}${subRoute.pathname}`}
+              render={(subRouteProps: any) => <subRoute.component {...subRouteProps} {...rest} />}
+              key={i}
+              exact />
+          ))}
+          <Route render={() => <Redirect to="/home" />} />
+        </Switch>
+      }
+    </>
+  )
+}

frontend/src/routes/Placeholder.tsx

@@ -0,0 +1,22 @@
+import { Button, Typography } from '@material-ui/core'
+import React from 'react'
+import { RouteComponentProps } from 'react-router-dom'
+import { AuthProps } from '../App'
+
+interface MatchParams {
+  userinput: string;
+}
+
+interface MatchRouteProps extends AuthProps, RouteComponentProps<MatchParams> {
+}
+
+const Placeholder = (props: MatchRouteProps) => {
+  return (
+    <div style={{ textAlign: "center" }}>
+      <Typography variant="h5" style={{ margin: 20 }}>The user input detected by the route is: {props.match.params.userinput}</Typography>
+      <Button variant="contained" color="primary" onClick={() => props.history.push('/home')}>Back Home</Button>
+    </div>
+  )
+}
+
+export default Placeholder

frontend/src/routes/PrivateRoute.tsx

@@ -1,30 +1,31 @@
 import React from "react";
-import { Route, Redirect } from "react-router-dom";
+import { Route, Redirect, RouteComponentProps } from "react-router-dom";
+import { AuthProps } from "../App";
 import { Children } from "../interfaces/Children"
+import { routeInterface } from "./Routes";
 
-export interface PrivateRouteProps {
+export interface PrivateRouteProps extends AuthProps, RouteComponentProps {
   isAuthenticated: boolean
-  children: Children
+  children?: Children
   exact: boolean
   path: string
+  route: routeInterface
 }
 
 // A wrapper for <Route> that redirects to the login screen if you're not yet authenticated.
-export default function PrivateRoute({ isAuthenticated, children, ...rest }: PrivateRouteProps) {
+export default function PrivateRoute({ isAuthenticated, route, ...rest }: PrivateRouteProps) {
   return (
     <Route
-      {...rest}
-      render={({ location }) =>
-        isAuthenticated ? (
-          children
-        ) : (
-            <Redirect
-              to={{
-                pathname: "/login/",
-                state: { from: location }
-              }}
-            />
-          )
+      path={rest.path}
+      render={(props: RouteComponentProps) =>
+        isAuthenticated ? <route.component {...props} isAuthenticated={isAuthenticated} route={route} {...rest} /> : (
+          <Redirect
+            to={{
+              pathname: "/login/",
+              state: { from: props.location }
+            }}
+          />
+        )
       }
     />
   );