From 4a20499484fc8618f8e9f3b87f9112290ac7ffd3 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Fri, 7 Sep 2018 12:23:11 +0200
Subject: [PATCH] LoggedIn User Menu added

---
 client/src/components/LoggedInUser.js     |  3 +-
 client/src/components/LoggedInUserMenu.js | 53 +++++++++++++++++++++++
 2 files changed, 55 insertions(+), 1 deletion(-)
 create mode 100644 client/src/components/LoggedInUserMenu.js

diff --git a/client/src/components/LoggedInUser.js b/client/src/components/LoggedInUser.js
index 120c62583..1184b84da 100644
--- a/client/src/components/LoggedInUser.js
+++ b/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 {
diff --git a/client/src/components/LoggedInUserMenu.js b/client/src/components/LoggedInUserMenu.js
new file mode 100644
index 000000000..bcc95283f
--- /dev/null
+++ b/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;