73 lines
1.6 KiB
TypeScript
73 lines
1.6 KiB
TypeScript
import * as React from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import MenuItem from '@mui/material/MenuItem';
|
|
import Menu, { MenuProps } from '@mui/material/Menu';
|
|
import { Link } from 'react-router-dom';
|
|
|
|
import apolloClient from 'graphql/client';
|
|
import * as URLS from 'config/urls';
|
|
import useAuthentication from 'hooks/useAuthentication';
|
|
import useFormatMessage from 'hooks/useFormatMessage';
|
|
|
|
type AccountDropdownMenuProps = {
|
|
open: boolean;
|
|
onClose: () => void;
|
|
anchorEl: MenuProps["anchorEl"];
|
|
id: string;
|
|
}
|
|
|
|
function AccountDropdownMenu(props: AccountDropdownMenuProps): React.ReactElement {
|
|
const formatMessage = useFormatMessage();
|
|
const authentication = useAuthentication();
|
|
const navigate = useNavigate();
|
|
|
|
const {
|
|
open,
|
|
onClose,
|
|
anchorEl,
|
|
id
|
|
} = props
|
|
|
|
const logout = async () => {
|
|
authentication.updateToken('');
|
|
await apolloClient.clearStore();
|
|
|
|
onClose();
|
|
|
|
navigate(URLS.LOGIN);
|
|
};
|
|
|
|
return (
|
|
<Menu
|
|
anchorEl={anchorEl}
|
|
anchorOrigin={{
|
|
vertical: 'bottom',
|
|
horizontal: 'right',
|
|
}}
|
|
id={id}
|
|
keepMounted
|
|
transformOrigin={{
|
|
vertical: 'top',
|
|
horizontal: 'right',
|
|
}}
|
|
open={open}
|
|
onClose={onClose}
|
|
>
|
|
<MenuItem
|
|
component={Link}
|
|
to={URLS.SETTINGS_DASHBOARD}
|
|
>
|
|
{formatMessage('accountDropdownMenu.settings')}
|
|
</MenuItem>
|
|
|
|
<MenuItem
|
|
onClick={logout}
|
|
>
|
|
{formatMessage('accountDropdownMenu.logout')}
|
|
</MenuItem>
|
|
</Menu>
|
|
);
|
|
}
|
|
|
|
export default AccountDropdownMenu;
|