Footer re implemented with Grid

client/src/App.js

@@ -1,42 +1,43 @@
-import React, { Component } from 'react';
-import { ApolloClient } from 'apollo-client';
-import { InMemoryCache } from 'apollo-cache-inmemory';
-import { ApolloProvider } from 'react-apollo';
-import { ApolloLink } from 'apollo-link';
-import { HttpLink } from 'apollo-link-http';
-import { onError } from 'apollo-link-error';
-import { setContext } from 'apollo-link-context';
+import React, { Component } from 'react'
+import { ApolloClient } from 'apollo-client'
+import { InMemoryCache } from 'apollo-cache-inmemory'
+import { ApolloProvider } from 'react-apollo'
+import { ApolloLink } from 'apollo-link'
+import { HttpLink } from 'apollo-link-http'
+import { onError } from 'apollo-link-error'
+import { setContext } from 'apollo-link-context'
 
-import { Route, BrowserRouter, Switch } from 'react-router-dom';
+import { Route, BrowserRouter, Switch } from 'react-router-dom'
 
 // Components
 
-import NavBar from './components/NavBar';
+import NavBar from './components/NavBar'
 
-import Home from './components/Home';
-import User from './components/User';
-import Browse from './components/Browse';
-import Search from './components/Search';
-import About from './components/About';
-import Contact from './components/Contact';
-import Logout from './components/Logout';
-import Post from './components/Post';
-import Footer from './components/Footer';
-import Callback from './components/Callback';
+import Home from './components/Home'
+import User from './components/User'
+import Browse from './components/Browse'
+import Search from './components/Search'
+import About from './components/About'
+import Contact from './components/Contact'
+import Logout from './components/Logout'
+import Post from './components/Post'
+import Footer from './components/Footer'
+import Callback from './components/Callback'
 
-import Auth from './auth/Auth';
+import Auth from './auth/Auth'
 
 // Apollo Client Setup
 const httpLink = new HttpLink({ uri: 'http://localhost:4000/graphql', changeOrigin: true })
 
-const errorLink= onError(({ graphQLErrors, networkError }) => {
-  if (graphQLErrors)
+const errorLink = onError(({ graphQLErrors, networkError }) => {
+  if (graphQLErrors) {
     graphQLErrors.map(({ message, locations, path }) =>
       console.log(
         `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`,
       ),
-    );
-  if (networkError) console.log(`[Network error]: ${networkError}`);
+    )
+  }
+  if (networkError) console.log(`[Network error]: ${networkError}`)
 })
 
 const authLink = setContext((_, { headers }) => {
@@ -62,19 +63,18 @@ export const client = new ApolloClient({
 })
 */
 
-export const auth = new Auth(result => console.log('auth result', result), client);
+export const auth = new Auth(result => console.log('auth result', result), client)
 
 class App extends Component {
-  render() {
-
+  render () {
     return (
       <BrowserRouter>
         <ApolloProvider client={client}>
 
-          <div className="App">
-            <NavBar/>
+          <div className='App'>
+            <NavBar />
             <Switch>
-              <Route exact path='/' component={Home}/>
+              <Route exact path='/' component={Home} />
               <Route path='/user' component={User} />
               <Route path='/browse' component={Browse} />
               <Route path='/search' component={Search} />
@@ -85,15 +85,15 @@ class App extends Component {
               <Route path='/callback' render={(props) => {
                 auth.handleAuthentication(props)
                 return <Callback {...props} />
-              }}/>
+              }} />
             </Switch>
-            <Footer/>
+            <Footer />
           </div>
 
         </ApolloProvider>
       </BrowserRouter>
-    );
+    )
   }
 }
 
-export default App;
+export default App

client/src/components/Footer.js

@@ -1,9 +1,9 @@
-import React, { Component } from 'react';
+import React, { Component } from 'react'
 import { NavLink } from 'react-router-dom'
-import { compose } from 'recompose';
-import { withStyles } from '@material-ui/core/styles';
-import Button from '@material-ui/core/Button';
-import Divider from '@material-ui/core/Divider';
+import { compose } from 'recompose'
+import { withStyles } from '@material-ui/core/styles'
+import Button from '@material-ui/core/Button'
+import Grid from '@material-ui/core/Grid'
 
 // Images
 import AALogo from '../img/aa-logo.png'
@@ -14,86 +14,63 @@ const styles = theme => ({
     margin: 'auto',
     display: 'block',
     maxWidth: 120,
-    maxHeight: 24,
-  },
-  link: {
-    width: '100',
-    font: 'Courier New'
-  },
- horizontal:
-  {
-    display: 'inline',
-    margin: theme.spacing.unit,
-  },
-  copyright: {
-    position: 'relative',
-    left: 30,
-    top: 30,
-  },
-  links: {
-    position: 'relative',
-    left: '10%',
-    top: 30,
+    maxHeight: 24
   },
   button: {
-  margin: theme.spacing.unit,
-  },
-});
+    margin: theme.spacing.unit
+  }
+})
 
 class Footer extends Component {
 
-  constructor(props){
-    super(props);
-    this.state={
-      selected:'',
-      user:null
+  constructor (props) {
+    super(props)
+    this.state = {
+      selected: '',
+      user: null
     }
   }
-  render() {
-    const { classes } = this.props;
+  render () {
+    const { classes } = this.props
     return (
       <footer>
-
-          <div className={classes.links}>            
-            <Divider />
-            <ul>
-              <li className={classes.horizontal}>
-                <Button color="primary" className={classes.button}>
-                  <NavLink color="inherit" exact to="/">Home</NavLink>
-                </Button>
-              </li>
-              <li className={classes.horizontal}>
-                <Button color="primary" className={classes.button}>
-                  <NavLink to='/browse'>Browse</NavLink>
-                </Button>
-              </li>
-              <li className={classes.horizontal}>
-                <Button color="primary" className={classes.button}>
-                  <NavLink to='/search'>Search</NavLink>
-                </Button>
-              </li>
-              <li className={classes.horizontal}>
-                <Button color="primary" className={classes.button}>
-                  <a href="http://www.advancedalgos.net"><img className={classes.img} alt="complex" src={AALogo} /></a>
-                </Button>
-              </li>
-              <li className={classes.horizontal}>
-                <Button color="primary" className={classes.button}>
-                  <NavLink color="inherit" exact to="/contact">Contact</NavLink>
-                </Button>
-              </li>
-              <li className={classes.horizontal}>
-                <Button color="primary" className={classes.button}>
-                  <NavLink to='/about'>About</NavLink>
-                </Button>
-              </li>
-              <li className={classes.horizontal}>
-                <Button color="primary" className={classes.button}>
-                  <a href="http://modules.advancedalgos.net">Modules</a>
-                </Button>
-              </li>
-            </ul>
-          </div>
+        <Grid container justify='center' spacing={24}>
+          <Grid item>
+            <Button color='primary' className={classes.button}>
+              <NavLink color='inherit' exact to='/'>Home</NavLink>
+            </Button>
+          </Grid>
+          <Grid item>
+            <Button color='primary' className={classes.button}>
+              <NavLink to='/browse'>Browse</NavLink>
+            </Button>
+          </Grid>
+          <Grid item>
+            <Button color='primary' className={classes.button}>
+              <NavLink to='/search'>Search</NavLink>
+            </Button>
+          </Grid>
+          <Grid item>
+            <Button color='primary' className={classes.button}>
+              <a href='http://www.advancedalgos.net'><img className={classes.img} alt='complex' src={AALogo} /></a>
+            </Button>
+          </Grid>
+          <Grid item>
+            <Button color='primary' className={classes.button}>
+              <NavLink color='inherit' exact to='/contact'>Contact</NavLink>
+            </Button>
+          </Grid>
+          <Grid item>
+            <Button color='primary' className={classes.button}>
+              <NavLink to='/about'>About</NavLink>
+            </Button>
+          </Grid>
+          <Grid item>
+            <Button color='primary' className={classes.button}>
+              <a href='http://modules.advancedalgos.net'>Modules</a>
+            </Button>
+          </Grid>
+        </Grid>
       </footer>
     )
   }
@@ -101,4 +78,4 @@ class Footer extends Component {
 
 export default compose(
   withStyles(styles)
-)(Footer);
+)(Footer)

client/src/components/UserList.js

@@ -13,6 +13,7 @@ import CardMedia from '@material-ui/core/CardMedia';
 import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
 import Grid from '@material-ui/core/Grid';
+import Paper from '@material-ui/core/Paper';
 
 // Full screen dialog imports (still Material UI)
 
@@ -33,6 +34,11 @@ import UserProfile from './UserProfile';
 import PortraitImage from '../img/portrait.jpg'
 
 const styles = theme => ({
+  root: {
+    flexGrow: 1,
+    padding: 60,
+    margin: 2,
+  },
   card: {
     maxWidth: 345,
     paddingTop:'30'
@@ -54,7 +60,8 @@ const styles = theme => ({
     flex: 1,
   },
   grid: {
-    marginTop: "30",
+    paddingTop: '30',
+    marginTop:'30'
   },
 });
 
@@ -150,13 +157,11 @@ class UserList extends Component {
   render() {
     const { classes } = this.props;
     return (
-      <div>
-
-            <Grid container justify="center" spacing={24} className={classes.grid}>
-              {this.displayUsers()}
-            </Grid>
-
-      </div>
+      <Paper className={classes.root}>
+        <Grid container justify="center" spacing={24}>
+          {this.displayUsers()}
+        </Grid>
+      </Paper>
     );
   }
 }