-
Notifications
You must be signed in to change notification settings - Fork 12
/
UserOptions.jsx
97 lines (91 loc) · 2.91 KB
/
UserOptions.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
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';
import { getCurrentUser } from '../../common/utils';
import CommonFormDrawer from '../common/CommonFormDrawer';
import UserForm from './UserForm';
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 [form, setForm] = 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()
if(option === 'edit')
setForm(true)
}
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>
<CommonFormDrawer
isOpen={form}
onClose={() => setForm(false)}
formComponent={
<UserForm
loggedIn
edit
reloadOnSuccess
onCancel={() => setForm(false)} user={getCurrentUser()}
/>
}
/>
</React.Fragment>
)
}
export default UserOptions;