64 lines
1.7 KiB
JavaScript
64 lines
1.7 KiB
JavaScript
import React from 'react';
|
|
import { useHistory } from 'react-router-dom';
|
|
import { Nav, Icon, Dropdown, Popover, Whisper } from 'rsuite';
|
|
|
|
import { useAuth } from '../../helpers/authContext';
|
|
|
|
export default function MenuDropdown() {
|
|
const { setIsAuthenticated } = useAuth();
|
|
|
|
const history = useHistory();
|
|
const triggerRef = React.createRef();
|
|
|
|
function handleSelectMenu(eventKey, event) {
|
|
history.push(eventKey);
|
|
triggerRef.current.hide();
|
|
}
|
|
|
|
function handleLogout() {
|
|
setIsAuthenticated(false);
|
|
history.push('/');
|
|
}
|
|
|
|
const MenuPopover = ({ onSelect, ...rest }) => (
|
|
<Popover {...rest} full>
|
|
<Dropdown.Menu onSelect={onSelect}>
|
|
<Dropdown.Item eventKey={'/'}>Dashboard</Dropdown.Item>
|
|
<Dropdown.Item eventKey={'register'}>Register</Dropdown.Item>
|
|
<Dropdown.Item eventKey={'login'}>Login</Dropdown.Item>
|
|
<Dropdown.Item eventKey={'schedule'}>
|
|
1 - Schedule a meeting
|
|
</Dropdown.Item>
|
|
<Dropdown.Item eventKey={'invite'}>
|
|
2 - Invite participants
|
|
</Dropdown.Item>
|
|
<Dropdown.Item eventKey={'availability'}>
|
|
3 - Add your availability
|
|
</Dropdown.Item>
|
|
<Dropdown.Item eventKey={'confirm'}>
|
|
4 - Confirm meeting date
|
|
</Dropdown.Item>
|
|
<Dropdown.Item eventKey={'settings'}>Settings</Dropdown.Item>
|
|
<Dropdown.Item eventKey={5} onSelect={() => handleLogout()}>
|
|
Log Out
|
|
</Dropdown.Item>
|
|
</Dropdown.Menu>
|
|
</Popover>
|
|
);
|
|
|
|
return (
|
|
<Nav pullRight>
|
|
<Nav.Item>
|
|
<Whisper
|
|
placement='bottomEnd'
|
|
trigger='click'
|
|
triggerRef={triggerRef}
|
|
speaker={<MenuPopover onSelect={handleSelectMenu} />}
|
|
>
|
|
<Icon appearance='primary' size='2x' icon='user-circle' />
|
|
</Whisper>
|
|
</Nav.Item>
|
|
</Nav>
|
|
);
|
|
}
|