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(
-

{ user.firstName }

+

); } 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 ( + + {({ anchorEl, updateAnchorEl }) => { + const open = Boolean(anchorEl); + const handleClose = () => { + updateAnchorEl(null); + }; + + return ( + + + + Profile + My account + Logout + + + ); + }} + + ); + } +} + +export default LoggedInUserMenu;