user options for logout and edit profile (wip)

src/components/app/App.jsx

@@ -1,8 +1,7 @@
 import React, { Component } from 'react';
 import { Route, Switch } from 'react-router-dom';
-import alertifyjs from 'alertifyjs';
-import { AppBar, Toolbar, Typography, Button, IconButton, Tooltip } from '@material-ui/core';
-import { Person as PersonIcon, ExitToApp as LogoutIcon } from '@material-ui/icons';
+import { AppBar, Toolbar, Typography, Button } from '@material-ui/core';
+import { Person as PersonIcon } from '@material-ui/icons';
 import { get } from 'lodash';
 import { WHITE, BLACK } from '../../common/constants';
 import './App.scss';
@@ -16,6 +15,7 @@ import CollectionHome from '../collections/CollectionHome';
 import OrgHome from '../orgs/OrgHome';
 import UserHome from '../users/UserHome';
 import Login from '../users/Login';
+import UserOptions from '../users/UserOptions';
 import { Link } from 'react-router-dom';
 import { isAtGlobalSearch, isLoggedIn, getCurrentUser } from '../../common/utils';
 
@@ -43,14 +43,6 @@ class App extends Component {
     window.location.hash = '#/accounts/login'
   }
 
-  onLogoutClick() {
-    localStorage.removeItem('token');
-    localStorage.removeItem('user');
-    alertifyjs.success('You have signed out.')
-    window.location.hash = '#/'
-    window.location.reload()
-  }
-
   toUserHome() {
     window.location.hash = '#' + get(getCurrentUser(), 'url');
   }
@@ -78,11 +70,9 @@ class App extends Component {
                   <Button onClick={this.toUserHome} color='primary' variant='contained' startIcon={<PersonIcon />}>
                     {user.username}
                   </Button>
-                  <Tooltip title='logout' placement='top'>
-                    <IconButton component='span' onClick={this.onLogoutClick} style={{marginLeft: '10px'}}>
-                      <LogoutIcon />
-                    </IconButton>
-                  </Tooltip>
+                  <span style={{marginLeft: '10px'}}>
+                    <UserOptions />
+                  </span>
                 </span>:
                 <Button onClick={this.onLoginClick} color='primary' variant='contained'>
                   Sign In

src/components/users/UserOptions.jsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import alertifyjs from 'alertifyjs';
+import {
+  Paper, IconButton, Popper, MenuItem, MenuList, Grow, ClickAwayListener
+} from '@material-ui/core';
+import {
+  MoreVert as MoreIcon, ExitToApp as LogoutIcon, Edit as EditIcon
+} from '@material-ui/icons';
+
+const onLogoutClick = () => {
+  localStorage.removeItem('token');
+  localStorage.removeItem('user');
+  alertifyjs.success('You have signed out.')
+  window.location.hash = '#/'
+  window.location.reload()
+}
+
+
+const OPTIONS = [
+  {id: 'edit', label: 'Edit Profile', icon: <EditIcon fontSize='small' style={{marginRight: '10px'}}/>},
+  {id: 'logout', label: 'Logout', icon: <LogoutIcon fontSize='small' style={{marginRight: '10px'}} />},
+]
+
+const UserOptions = () => {
+  const [open, setOpen] = React.useState(false);
+  const anchorRef = React.useRef(null);
+  const handleToggle = () => setOpen((prevOpen) => !prevOpen);
+  const handleClose = event => {
+    if (anchorRef.current && anchorRef.current.contains(event.target))
+      return;
+
+    setOpen(false);
+  };
+  const onOptionClick = option => {
+    if(option === 'logout')
+      onLogoutClick()
+  }
+
+  return (
+    <React.Fragment>
+      <IconButton
+        ref={anchorRef}
+        aria-controls={open ? 'split-button-menu' : undefined}
+        aria-expanded={open ? 'true' : undefined}
+        aria-label="select merge strategy"
+        aria-haspopup="menu"
+        onClick={handleToggle}
+      >
+        <MoreIcon />
+      </IconButton>
+      <Popper open={open} anchorEl={anchorRef.current} role={undefined} transition disablePortal style={{zIndex: 1}}>
+        {({ TransitionProps, placement }) => (
+          <Grow
+            {...TransitionProps}
+            style={{
+              transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom',
+            }}
+            >
+            <Paper>
+              <ClickAwayListener onClickAway={handleClose}>
+                <MenuList id="split-button-menu">
+                  {
+                    OPTIONS.map(option => (
+                      <MenuItem key={option.id} onClick={() => onOptionClick(option.id)}>
+                        {option.icon}
+                        {option.label}
+                      </MenuItem>
+                    ))
+                  }
+                </MenuList>
+              </ClickAwayListener>
+            </Paper>
+          </Grow>
+        )}
+      </Popper>
+    </React.Fragment>
+
+  )
+}
+
+export default UserOptions;