104 lines
2.8 KiB
JavaScript
104 lines
2.8 KiB
JavaScript
import React, { useState } from "react";
|
|
import {
|
|
IconButton,
|
|
Menu,
|
|
MenuItem,
|
|
Typography,
|
|
ListItemIcon
|
|
} from "@material-ui/core";
|
|
import AccountCircle from "@material-ui/icons/AccountCircle";
|
|
import ExitToAppIcon from "@material-ui/icons/ExitToApp";
|
|
import AccountBoxIcon from "@material-ui/icons/AccountBox";
|
|
import SettingsIcon from "@material-ui/icons/Settings";
|
|
import { useHistory } from "react-router-dom";
|
|
import { useTuitioClient } from "@flare/tuitio-client-react";
|
|
import { useToast } from "../../hooks";
|
|
import styles from "./styles";
|
|
import { makeStyles } from "@material-ui/core/styles";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
const useStyles = makeStyles(styles);
|
|
|
|
const ProfileButton = () => {
|
|
const history = useHistory();
|
|
const { error } = useToast();
|
|
const classes = useStyles();
|
|
const { t } = useTranslation();
|
|
|
|
const { logout } = useTuitioClient({
|
|
onLogoutFailed: errorMessage => error(errorMessage),
|
|
onLogoutError: err => error(err.message)
|
|
});
|
|
|
|
const [anchorEl, setAnchorEl] = useState(null);
|
|
const openUserMenu = Boolean(anchorEl);
|
|
|
|
const handleMenu = event => {
|
|
setAnchorEl(event.currentTarget);
|
|
};
|
|
|
|
const handleClose = () => {
|
|
setAnchorEl(null);
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<IconButton
|
|
aria-label="account of current user"
|
|
aria-controls="menu-appbar"
|
|
aria-haspopup="true"
|
|
onClick={handleMenu}
|
|
color="inherit"
|
|
>
|
|
<AccountCircle />
|
|
</IconButton>
|
|
<Menu
|
|
id="menu-appbar"
|
|
anchorEl={anchorEl}
|
|
anchorOrigin={{
|
|
vertical: "top",
|
|
horizontal: "right"
|
|
}}
|
|
keepMounted
|
|
transformOrigin={{
|
|
vertical: "top",
|
|
horizontal: "right"
|
|
}}
|
|
open={openUserMenu}
|
|
onClose={handleClose}
|
|
>
|
|
<MenuItem
|
|
onClick={() => {
|
|
history.push("/user-profile");
|
|
handleClose();
|
|
}}
|
|
>
|
|
<ListItemIcon className={classes.menuItemIcon}>
|
|
<AccountBoxIcon fontSize="small" />
|
|
</ListItemIcon>
|
|
<Typography variant="inherit">{t("User.Profile.Label")}</Typography>
|
|
</MenuItem>
|
|
<MenuItem
|
|
onClick={() => {
|
|
history.push("/settings");
|
|
handleClose();
|
|
}}
|
|
>
|
|
<ListItemIcon className={classes.menuItemIcon}>
|
|
<SettingsIcon fontSize="small" />
|
|
</ListItemIcon>
|
|
<Typography variant="inherit">{t("User.Settings")}</Typography>
|
|
</MenuItem>
|
|
<MenuItem onClick={logout}>
|
|
<ListItemIcon className={classes.menuItemIcon}>
|
|
<ExitToAppIcon fontSize="small" />
|
|
</ListItemIcon>
|
|
<Typography variant="inherit">{t("User.Logout")}</Typography>
|
|
</MenuItem>
|
|
</Menu>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ProfileButton;
|