adds theme switcher and ability to nest subroutes

Emile Frey · Emile Frey · commit 79aa70cf208c · 2021-02-12T13:36:58.000-06:00
diff --git a/frontend/src/components/Home.tsx b/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>
diff --git a/frontend/src/components/Layout/DropdownMenu.tsx b/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}
diff --git a/frontend/src/components/Layout/Layout.tsx b/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>
diff --git a/frontend/src/components/Layout/TopBar.tsx b/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>
diff --git a/frontend/src/components/Login/PasswordReset.tsx b/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} />
 }
diff --git a/frontend/src/components/Login/PasswordUpdate.tsx b/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("");
diff --git a/frontend/src/contexts/ThemeContext.tsx b/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
diff --git a/frontend/src/routes/AppRouter.tsx b/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>
+      }
+    </>
+  )
+}
diff --git a/frontend/src/routes/Placeholder.tsx b/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
diff --git a/frontend/src/routes/PrivateRoute.tsx b/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 }
+            }}
+          />
+        )
       }
     />
   );
diff --git a/frontend/src/routes/Router.tsx b/frontend/src/routes/Router.tsx
@@ -6,24 +6,31 @@ import PasswordUpdate from "../components/Login/PasswordUpdate";
 import PasswordReset from "../components/Login/PasswordReset";
 import PrivateRoute from './PrivateRoute'
 import { AppProps } from "../App";
-import { privateRoutes } from './Routes'
+import { privateRoutes, routeInterface } from './Routes'
 
 export default function Router(props: AppProps) {
+  const { path, route, isAuthenticated, ...rest } = props;
+
+  const passwordUpdateRoute: routeInterface = {
+    pathname: "/change_password/",
+    component: PasswordUpdate,
+    privateRoute: true
+  }
+
   return (
     <Switch>
       <Route exact path="/login/"> <Login {...props} /></Route>
       <Route exact path="/password_reset/"> <PasswordReset /></Route>
-      <PrivateRoute exact path="/change_password/" isAuthenticated={props.isAuthenticated}><PasswordUpdate {...props} /></PrivateRoute>
+      <PrivateRoute path="/change_password/" isAuthenticated={isAuthenticated} route={passwordUpdateRoute} {...rest} />
       {privateRoutes.map((route, index) =>
         <PrivateRoute
           key={index}
-          exact
+          {...props}
           path={route.pathname}
-          isAuthenticated={props.isAuthenticated}>
-          <route.component {...props} />
-        </PrivateRoute>)
+          route={route}
+          isAuthenticated={props.isAuthenticated} />)
       }
-      <Route render={() => <Redirect to="/" />} />
+      <Route render={() => <Redirect to="/home" />} />
     </Switch>
   )
 };
diff --git a/frontend/src/routes/Routes.ts b/frontend/src/routes/Routes.ts
@@ -1,24 +1,40 @@
 import HomeIcon from '@material-ui/icons/Home';
 import Home from '../components/Home';
-
+import Placeholder from './Placeholder'
+import { AppRouter } from './AppRouter'
 export interface routeInterface {
-  buttonTitle: string,
+  buttonTitle?: string,
   pageTitle?: string,
   pathname: string,
   component: any,
   Icon?: React.FC,
   headerContent?: any,
-  privateRoute: boolean
+  privateRoute?: boolean,
+  subRoutes?: routeInterface[]
 };
 
 export const privateRoutes: routeInterface[] = [
   {
     buttonTitle: 'Home',
     pageTitle: 'Home',
-    pathname: '/',
-    component: Home,
+    pathname: '/home',
+    component: AppRouter, //use AppRouter if you want to nest subroutes off the main left nav
     Icon: HomeIcon,
     headerContent: null,
-    privateRoute: true
+    privateRoute: true,
+    subRoutes: [
+      {
+        pathname: "", // use an empty string for the apps landing page
+        component: Home,
+      },
+      {
+        pathname: "/:userinput?", // you can take in a param after /home by doing this
+        component: Placeholder,
+      },
+      {
+        pathname: "/nestedsubroute/:userinput?/", // this page can be accessed at /home/nestedsubroute/<whateveryouwant>
+        component: Placeholder,
+      }
+    ]
   },
 ];

Original file line number	Diff line number	Diff line change
`@@ -35,7 +35,7 @@ export const PasswordReset = () => {`
`35`	`35`	`setTokenInvalid(true)`
`36`	`36`	`}`
`37`	`37`	`})`
`38`		`- }, [])`
	`38`	`+ }, [token])`
`39`	`39`
`40`	`40`	`return tokenInvalid ? <Redirect from='/' to='/login' /> : <PasswordResetForm token={token} />`
`41`	`41`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import React, { createContext, useState, useReducer, useEffect } from 'react';`
	`1`	`+import React, { createContext, useState, useEffect } from 'react';`
`2`	`2`
`3`	`3`	`export type ThemeContextProps = {`
`4`	`4`	`darkMode: boolean`