umami/components/common/UserButton.js

74 lines
1.9 KiB
JavaScript
Raw Normal View History

2020-08-06 08:03:07 +02:00
import React, { useState, useRef } from 'react';
2020-09-07 10:22:16 +02:00
import { FormattedMessage } from 'react-intl';
2020-08-06 08:03:07 +02:00
import { useSelector } from 'react-redux';
import { useRouter } from 'next/router';
import Menu from './Menu';
import Icon from './Icon';
import Button from './Button';
2020-08-06 08:03:07 +02:00
import useDocumentClick from 'hooks/useDocumentClick';
import User from 'assets/user.svg';
import Chevron from 'assets/chevron-down.svg';
import styles from './UserButton.module.css';
export default function UserButton() {
const [showMenu, setShowMenu] = useState(false);
const user = useSelector(state => state.user);
const ref = useRef();
const router = useRouter();
const menuOptions = [
{
label: (
2020-09-07 10:22:16 +02:00
<FormattedMessage
id="label.logged-in-as"
defaultMessage="Logged in as {username}"
values={{ username: <b>{user.username}</b> }}
/>
2020-08-06 08:03:07 +02:00
),
value: 'username',
className: styles.username,
},
{ label: <FormattedMessage id="label.profile" defaultMessage="Profile" />, value: 'profile' },
2020-09-07 10:22:16 +02:00
{ label: <FormattedMessage id="label.logout" defaultMessage="Logout" />, value: 'logout' },
2020-08-06 08:03:07 +02:00
];
function handleSelect(value) {
setShowMenu(false);
2020-08-09 08:48:43 +02:00
if (value === 'logout') {
2020-08-06 08:03:07 +02:00
router.push('/logout');
} else if (value === 'profile') {
router.push('/settings/profile');
2020-08-06 08:03:07 +02:00
}
}
useDocumentClick(e => {
if (!ref.current.contains(e.target)) {
setShowMenu(false);
}
});
return (
<div ref={ref} className={styles.container}>
<Button
icon={<User />}
className={styles.button}
onClick={() => setShowMenu(state => !state)}
size="large"
variant="light"
>
2020-08-09 08:48:43 +02:00
<Icon icon={<Chevron />} size="small" />
</Button>
2020-08-10 00:13:38 +02:00
{showMenu && (
2020-08-18 01:46:13 +02:00
<Menu
className={styles.menu}
options={menuOptions}
onSelect={handleSelect}
float="bottom"
align="right"
/>
2020-08-10 00:13:38 +02:00
)}
2020-08-06 08:03:07 +02:00
</div>
);
}