github logo at LoggedInUser Button

client/src/components/LoggedInUser.js

@@ -1,61 +1,60 @@
-import React, { Component } from 'react';
-import {graphql} from 'react-apollo';
-import {getUserByAuthIdQuery} from '../queries/queries';
-import {auth} from '../App';
-import LoggedInUserMenu from './LoggedInUserMenu';
-import Button from '@material-ui/core/Button';
+import React, { Component } from 'react'
+import {graphql} from 'react-apollo'
+import {getUserByAuthIdQuery} from '../queries/queries'
+import {auth} from '../App'
+import LoggedInUserMenu from './LoggedInUserMenu'
+import Button from '@material-ui/core/Button'
 
 class LoggedInUser extends Component {
 
-  displayLoggedInUser(){
+  displayLoggedInUser () {
+    const user = this.props.data.userByAuthId
 
-    const user = this.props.data.userByAuthId;
-
-    if(user){
-
-      let displayName = "No Display Name";
+    if (user) {
+      let displayName = 'No Display Name'
 
       if (
         user.alias !== null &&
-        user.alias !== ""
-      ) { displayName =  user.alias;}
+        user.alias !== ''
+      ) { displayName = user.alias }
 
       if (
         user.firstName !== null &&
-        user.firstName !== ""
-      ) { displayName =  user.firstName;}
+        user.firstName !== ''
+      ) { displayName = user.firstName }
 
       if (
         user.firstName !== null &&
-        user.firstName !== "" &&
+        user.firstName !== '' &&
         user.lastName !== null &&
-        user.lastName !== ""
-      ) { displayName = user.firstName + " " + user.lastName;}
-
-      return(
-          <div>
-              <p><LoggedInUserMenu menuLabel={ displayName } /></p>
-          </div>
-      );
+        user.lastName !== ''
+      ) { displayName = user.firstName + ' ' + user.lastName }
 
+      return (
+        <div>
+          <p><LoggedInUserMenu menuLabel={displayName} /></p>
+        </div>
+      )
     } else {
-        return( <div onClick={() => auth.login()}><Button color="inherit">Login / Sign up</Button></div> );
+      return (
+        <div onClick={() => auth.login()}>
+          <Button color='inherit'>Login / Sign up</Button>
+        </div>
+      )
     }
   }
 
-  componentDidMount() {
+  componentDidMount () {
 
   }
 
-  render() {
-
+  render () {
     if (this.loggedInUserStored !== true) {
-
-      let user = this.props.data.userByAuthId;
+      let user = this.props.data.userByAuthId
 
       if (user !== undefined) {
-        localStorage.setItem('loggedInUser', JSON.stringify(this.props.data.userByAuthId));
-        this.loggedInUserStored = true;
+        localStorage.setItem('loggedInUser', JSON.stringify(this.props.data.userByAuthId))
+        this.loggedInUserStored = true
       }
     }
 
@@ -63,7 +62,7 @@ class LoggedInUser extends Component {
       <div>
         {this.displayLoggedInUser()}
       </div>
-    );
+    )
   }
 }
 
@@ -75,4 +74,4 @@ export default graphql(getUserByAuthIdQuery, { // What follows is the way to pas
       }
     }
   }
-})(LoggedInUser); // This binds the querty to the component
+})(LoggedInUser) // This binds the querty to the component

client/src/components/LoggedInUserMenu.js

@@ -1,60 +1,79 @@
-import React, { Component } from 'react';
-import Button from '@material-ui/core/Button';
-import Menu from '@material-ui/core/Menu';
-import MenuItem from '@material-ui/core/MenuItem';
-import toRenderProps from 'recompose/toRenderProps';
-import withState from 'recompose/withState';
-import { Link } from 'react-router-dom';
+import React, { Component } from 'react'
+import toRenderProps from 'recompose/toRenderProps'
+import withState from 'recompose/withState'
+import { Link } from 'react-router-dom'
+import {compose} from 'react-apollo'
 
-import ProfileIcon from '@material-ui/icons/Person';
-import LogoutIcon from '@material-ui/icons/DirectionsWalk';
+// Materia UI
 
-const UserLink = props => <Link to="/user" {...props} />
-const LogoutLink = props => <Link to="/logout" {...props} />
+import { withStyles } from '@material-ui/core/styles'
+import Button from '@material-ui/core/Button'
+import Menu from '@material-ui/core/Menu'
+import MenuItem from '@material-ui/core/MenuItem'
 
-const WithState = toRenderProps(withState('anchorEl', 'updateAnchorEl', null));
+// Images
+import GithubLogo from '../img/github-head-negative.png'
+import ProfileIcon from '@material-ui/icons/Person'
+import LogoutIcon from '@material-ui/icons/DirectionsWalk'
+
+const UserLink = props => <Link to='/user' {...props} />
+const LogoutLink = props => <Link to='/logout' {...props} />
+
+const WithState = toRenderProps(withState('anchorEl', 'updateAnchorEl', null))
+
+const styles = {
+  img: {
+    margin: 20,
+    display: 'block',
+    maxWidth: 120,
+    maxHeight: 24
+  }
+}
 
 class LoggedInUserMenu extends Component {
 
-  constructor(props){
-    super(props);
+  constructor (props) {
+    super(props)
     this.state = {
       user: {}
     }
   }
 
-  render() {
-
+  render () {
+    const { classes } = this.props
     return (
       <WithState>
         {({ anchorEl, updateAnchorEl }) => {
-          const open = Boolean(anchorEl);
+          const open = Boolean(anchorEl)
           const handleClose = () => {
-            updateAnchorEl(null);
-          };
+            updateAnchorEl(null)
+          }
 
           return (
             <React.Fragment>
               <Button
                 aria-owns={open ? 'render-props-menu' : null}
-                aria-haspopup="true"
+                aria-haspopup='true'
                 onClick={event => {
-                  updateAnchorEl(event.currentTarget);
+                  updateAnchorEl(event.currentTarget)
                 }}
-                color="inherit"
+                color='inherit'
               >
+                <img className={classes.img} src={GithubLogo} alt='Github' />
                 {this.props.menuLabel}
               </Button>
-              <Menu id="render-props-menu" anchorEl={anchorEl} open={open} onClose={handleClose}>
+              <Menu id='render-props-menu' anchorEl={anchorEl} open={open} onClose={handleClose}>
                 <MenuItem onClick={handleClose} component={UserLink}><ProfileIcon /><div>Profile</div></MenuItem>
                 <MenuItem onClick={handleClose} component={LogoutLink}><LogoutIcon /><div>Logout</div></MenuItem>
               </Menu>
             </React.Fragment>
-          );
+          )
         }}
       </WithState>
-    );
+    )
   }
 }
 
-export default LoggedInUserMenu;
+export default compose(
+  withStyles(styles)
+)(LoggedInUserMenu)