Format Switching

client/src/App.js

@@ -90,7 +90,6 @@ class App extends Component {
                 <Route path='/browse' component={Browse} />
                 <Route path='/search' component={Search} />
                 <Route path='/about' component={About} />
-                <Route path='/modules' component={Modules} />
                 <Route path='/contact' component={Contact} />
                 <Route path='/logout' component={Logout} />
                 <Route path='/:post_id' component={Post} />

client/src/components/About.js

@@ -1,48 +1,51 @@
-import React from 'react';
-import Button from '@material-ui/core/Button';
-import Dialog from '@material-ui/core/Dialog';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogContentText from '@material-ui/core/DialogContentText';
-import DialogTitle from '@material-ui/core/DialogTitle';
+import React from 'react'
+import Button from '@material-ui/core/Button'
+import Dialog from '@material-ui/core/Dialog'
+import DialogActions from '@material-ui/core/DialogActions'
+import DialogContent from '@material-ui/core/DialogContent'
+import DialogContentText from '@material-ui/core/DialogContentText'
+import DialogTitle from '@material-ui/core/DialogTitle'
+import CssBaseline from '@material-ui/core/CssBaseline'
 
 class About extends React.Component {
   state = {
-    open: true,
-  };
+    open: true
+  }
 
   handleClickOpen = () => {
-    this.setState({ open: true });
-  };
+    this.setState({ open: true })
+  }
 
   handleClose = () => {
-    this.setState({ open: false });
-  };
+    this.setState({ open: false })
+  }
 
-  render() {
+  render () {
     return (
-      <div>
+      <React.Fragment>
+        <CssBaseline />
         <Dialog
           open={this.state.open}
           onClose={this.handleClose}
-          aria-labelledby="alert-dialog-title"
-          aria-describedby="alert-dialog-description"
-        >
-          <DialogTitle id="alert-dialog-title">{"Section under development."}</DialogTitle>
+          aria-labelledby='alert-dialog-title'
+          aria-describedby='alert-dialog-description'>
+          <DialogTitle id='alert-dialog-title'>
+            {"Section under development."}
+          </DialogTitle>
           <DialogContent>
-            <DialogContentText id="alert-dialog-description">
+            <DialogContentText id='alert-dialog-description'>
               The functionality of this section has not been developed yet. We expect to have it for October 2018. Thanks for your understanding.
             </DialogContentText>
           </DialogContent>
           <DialogActions>
-            <Button onClick={this.handleClose} color="primary" autoFocus>
+            <Button onClick={this.handleClose} color='primary' autoFocus>
               Close
             </Button>
           </DialogActions>
         </Dialog>
-      </div>
-    );
+      </React.Fragment>
+    )
   }
 }
 
-export default About;
+export default About

client/src/components/Contact.js

@@ -1,48 +1,52 @@
-import React from 'react';
-import Button from '@material-ui/core/Button';
-import Dialog from '@material-ui/core/Dialog';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogContentText from '@material-ui/core/DialogContentText';
-import DialogTitle from '@material-ui/core/DialogTitle';
+import React from 'react'
+import Button from '@material-ui/core/Button'
+import Dialog from '@material-ui/core/Dialog'
+import DialogActions from '@material-ui/core/DialogActions'
+import DialogContent from '@material-ui/core/DialogContent'
+import DialogContentText from '@material-ui/core/DialogContentText'
+import DialogTitle from '@material-ui/core/DialogTitle'
+import CssBaseline from '@material-ui/core/CssBaseline'
 
 class Contact extends React.Component {
   state = {
-    open: true,
-  };
+    open: true
+  }
 
   handleClickOpen = () => {
-    this.setState({ open: true });
-  };
+    this.setState({ open: true })
+  }
 
   handleClose = () => {
-    this.setState({ open: false });
-  };
+    this.setState({ open: false })
+  }
 
-  render() {
+  render () {
     return (
-      <div>
+
+      <React.Fragment>
+        <CssBaseline />
         <Dialog
           open={this.state.open}
           onClose={this.handleClose}
-          aria-labelledby="alert-dialog-title"
-          aria-describedby="alert-dialog-description"
-        >
-          <DialogTitle id="alert-dialog-title">{"Section under development."}</DialogTitle>
+          aria-labelledby='alert-dialog-title'
+          aria-describedby='alert-dialog-description'>
+          <DialogTitle id='alert-dialog-title'>
+            {"Section under development."}
+          </DialogTitle>
           <DialogContent>
-            <DialogContentText id="alert-dialog-description">
+            <DialogContentText id='alert-dialog-description'>
               The functionality of this section has not been developed yet. We expect to have it for October 2018. Thanks for your understanding.
             </DialogContentText>
           </DialogContent>
           <DialogActions>
-            <Button onClick={this.handleClose} color="primary" autoFocus>
+            <Button onClick={this.handleClose} color='primary' autoFocus>
               Close
             </Button>
           </DialogActions>
         </Dialog>
-      </div>
-    );
+      </React.Fragment>
+    )
   }
 }
 
-export default Contact;
+export default Contact

client/src/components/NavBar.js

@@ -83,16 +83,43 @@ class NavBar extends Component {
           <Toolbar>
             <img className={classes.img} src={AALogo} alt='Advanced Algos' />
             <Typography variant='title' color='inherit' className={classes.flex}>
-                Users
+              Users
             </Typography>
-
-            <IconButton className={classes.menuButton} color='inherit' title='Home' component={HomeLink}><HomeIcon /></IconButton>
-            <IconButton className={classes.menuButton} color='inherit' title='Browse the Users Directory' component={BrowseLink}><BrowseIcon /></IconButton>
-            <IconButton className={classes.menuButton} color='inherit' title='Search Users' component={SearchLink}><SearchIcon /></IconButton>
-            <IconButton className={classes.menuButton} color='inherit' title='Contact Form' component={ContactLink}><ContactIcon /></IconButton>
-            <IconButton className={classes.menuButton} color='inherit' title='About this Module' component={AboutLink}><AboutIcon /></IconButton>
-            <IconButton className={classes.menuButton} color='inherit' title='Go to another Module' component={ModulesLink}><ModulesIcon /></IconButton>
-
+            <IconButton
+              className={classes.menuButton}
+              color='inherit'
+              title='Home'
+              component={HomeLink}>
+              <HomeIcon />
+            </IconButton>
+            <IconButton
+              className={classes.menuButton}
+              color='inherit'
+              title='Browse the Users Directory'
+              component={BrowseLink}>
+              <BrowseIcon />
+            </IconButton>
+            <IconButton
+              className={classes.menuButton}
+              color='inherit'
+              title='Search Users'
+              component={SearchLink}>
+              <SearchIcon />
+            </IconButton>
+            <IconButton
+              className={classes.menuButton}
+              color='inherit'
+              title='Contact Form'
+              component={ContactLink}>
+              <ContactIcon />
+            </IconButton>
+            <IconButton
+              className={classes.menuButton}
+              color='inherit'
+              title='About this Module'
+              component={AboutLink}>
+              <AboutIcon />
+            </IconButton>
             <LoggedInUser authId={this.state.authId} />
           </Toolbar>
         </AppBar>