feat(React): Avatar dropdown menu and logout function (#2115)

Co-authored-by: Brendan Sun <shihaosun@geotab.com>
This commit is contained in:
brendansun93 2021-02-18 14:16:57 -05:00 committed by GitHub
parent dfe00bfee8
commit 65b231c45d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -1,9 +1,11 @@
import React from 'react';
import { Avatar } from 'antd';
import Cookies from 'js-cookie';
import { Menu, Avatar, Dropdown } from 'antd';
import { Link } from 'react-router-dom';
import defaultAvatar from '../../images/default_avatar.png';
import { EntityType } from '../../types.generated';
import { useEntityRegistry } from '../useEntityRegistry';
import { isLoggedInVar } from '../auth/checkAuthStatus';
interface Props {
urn: string;
@ -16,17 +18,36 @@ const defaultProps = {
export const ManageAccount = ({ urn: _urn, pictureLink: _pictureLink }: Props) => {
const entityRegistry = useEntityRegistry();
const handleLogout = () => {
Cookies.remove('IS_LOGGED_IN');
localStorage.removeItem('userUrn');
isLoggedInVar(false);
};
const menu = (
<Menu>
<Menu.Item danger>
<div tabIndex={0} role="button" onClick={handleLogout} onKeyDown={handleLogout}>
Log out
</div>
</Menu.Item>
</Menu>
);
return (
<Link to={`${entityRegistry.getPathName(EntityType.CorpUser)}/${_urn}`}>
<Avatar
style={{
marginRight: '15px',
color: '#f56a00',
backgroundColor: '#fde3cf',
}}
src={_pictureLink || defaultAvatar}
/>
</Link>
<Dropdown overlay={menu}>
<Link to={`/${entityRegistry.getPathName(EntityType.CorpUser)}/${_urn}`}>
<Avatar
style={{
marginRight: '15px',
color: '#f56a00',
backgroundColor: '#fde3cf',
}}
src={_pictureLink || defaultAvatar}
/>
</Link>
</Dropdown>
);
};