LoggedIn User Menu added

client/src/components/LoggedInUser.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import {graphql} from 'react-apollo';
 import {getUserByAuthIdQuery} from '../queries/queries';
 import {auth} from '../App';
+import LoggedInUserMenu from './LoggedInUserMenu'
 
 class LoggedInUser extends Component {
 
@@ -18,7 +19,7 @@ class LoggedInUser extends Component {
       if (user.firstName) {
         return(
             <div>
-                <p>{ user.firstName }</p>
+                <p><LoggedInUserMenu menuLabel={ user.firstName }/></p>
             </div>
         );
       } else {

client/src/components/LoggedInUserMenu.js

@@ -0,0 +1,53 @@
+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';
+
+const WithState = toRenderProps(withState('anchorEl', 'updateAnchorEl', null));
+
+class LoggedInUserMenu extends Component {
+
+  constructor(props){
+    super(props);
+    this.state = {
+      property: 'value'
+    }
+  }
+
+  render() {
+    return (
+      <WithState>
+        {({ anchorEl, updateAnchorEl }) => {
+          const open = Boolean(anchorEl);
+          const handleClose = () => {
+            updateAnchorEl(null);
+          };
+
+          return (
+            <React.Fragment>
+              <Button
+                aria-owns={open ? 'render-props-menu' : null}
+                aria-haspopup="true"
+                onClick={event => {
+                  updateAnchorEl(event.currentTarget);
+                }}
+                color="inherit" 
+              >
+                {this.props.menuLabel}
+              </Button>
+              <Menu id="render-props-menu" anchorEl={anchorEl} open={open} onClose={handleClose}>
+                <MenuItem onClick={handleClose}>Profile</MenuItem>
+                <MenuItem onClick={handleClose}>My account</MenuItem>
+                <MenuItem onClick={handleClose}>Logout</MenuItem>
+              </Menu>
+            </React.Fragment>
+          );
+        }}
+      </WithState>
+    );
+  }
+}
+
+export default LoggedInUserMenu;