1import Menu from '@material-ui/core/Menu';
 2import Divider from '@material-ui/core/Divider';
 3import MenuItem from '@material-ui/core/MenuItem';
 4import {makeStyles} from '@material-ui/core/styles';
 5import {useTranslation} from 'react-i18next';
 6import {Typography} from '@material-ui/core';
 7import useAuthStore from '../../stores/useAuthStore';
 8import useProfile from '../../hooks/useProfile';
 9import useSettings from '../../hooks/useSettings';
10
11const EventMenu = ({anchorEl, setAnchorEl, actions = []}) => {
12  const {t} = useTranslation();
13  const settings = useSettings();
14  const logout = useAuthStore(s => s.logout);
15  const {user} = useProfile();
16
17  const classes = useStyles();
18  const logoutMenuItem = user && {
19    label: t('menu.logout'),
20    onClick: () => {
21      logout();
22      window.location.href = settings['about_link'];
23    },
24    id: 'LogoutTabs',
25  };
26  const aboutMenuItem = {
27    label: t('menu.about'),
28    onClick: () => (window.location.href = settings['about_link']),
29    id: 'AboutTabs',
30  };
31
32  return (
33    <Menu
34      anchorEl={anchorEl}
35      anchorOrigin={{
36        vertical: 'top',
37        horizontal: 'right',
38      }}
39      keepMounted
40      transformOrigin={{
41        vertical: 'top',
42        horizontal: 'right',
43      }}
44      open={!!anchorEl}
45      onClose={() => setAnchorEl(null)}
46    >
47      {actions &&
48        [...actions, aboutMenuItem, logoutMenuItem]
49          .filter(Boolean)
50          .map(({label, id, onClick, divider = false, ...attributes}, idx) => {
51            if (divider) {
52              return (
53                <Divider
54                  key={idx}
55                  variant="fullWidth"
56                  className={classes.divider}
57                />
58              );
59            }
60            if (!!onClick)
61              return (
62                <MenuItem
63                  onClick={() => {
64                    onClick();
65                    setAnchorEl(null);
66                  }}
67                  key={idx}
68                  id={id || `MenuItem${idx}`}
69                  {...attributes}
70                >
71                  {label}
72                </MenuItem>
73              );
74
75            return (
76              <Typography
77                variant="body1"
78                key={idx}
79                id={id || `MenuItem${idx}`}
80                className={classes.textItem}
81              >
82                {label}
83              </Typography>
84            );
85          })}
86    </Menu>
87  );
88};
89const useStyles = makeStyles(theme => ({
90  divider: {
91    margin: theme.spacing(1, 0),
92  },
93  textItem: {
94    margin: theme.spacing(1, 2),
95    '&:focus': {outline: 0},
96  },
97}));
98export default EventMenu;