all repos — caroster @ 8308eb9f10e3a9fa98fe1da5c7fb724984d58f47

[Octree] Group carpool to your event https://caroster.io

app/src/containers/EventMenu/index.js (view raw)

 1import React from 'react';
 2import Menu from '@material-ui/core/Menu';
 3import Divider from '@material-ui/core/Divider';
 4import MenuItem from '@material-ui/core/MenuItem';
 5import {makeStyles} from '@material-ui/core/styles';
 6import {useTranslation} from 'react-i18next';
 7import {useStrapi, useAuth} from 'strapi-react-context';
 8
 9const EventMenu = ({anchorEl, setAnchorEl, actions = []}) => {
10  const {t} = useTranslation();
11  const strapi = useStrapi();
12  const {logout, authState} = useAuth();
13  const classes = useStyles();
14  const [settings] = strapi.stores?.settings || [{}];
15  const logoutMenuItem = authState?.user
16    ? {label: t('menu.logout'), onClick: logout, id: 'LogoutTabs'}
17    : null;
18  const aboutMenuItem = {
19    label: t('menu.about'),
20    onClick: () => (window.location.href = settings['about_link']),
21    id: 'AboutTabs',
22  };
23
24  return (
25    <Menu
26      anchorEl={anchorEl}
27      anchorOrigin={{
28        vertical: 'top',
29        horizontal: 'right',
30      }}
31      keepMounted
32      transformOrigin={{
33        vertical: 'top',
34        horizontal: 'right',
35      }}
36      open={!!anchorEl}
37      onClose={() => setAnchorEl(null)}
38    >
39      {actions &&
40        [...actions, aboutMenuItem, logoutMenuItem]
41          .filter(Boolean)
42          .map(({label, id, onClick, divider = false, ...attributes}, idx) =>
43            divider ? (
44              <Divider variant="fullWidth" className={classes.divider} />
45            ) : (
46              <MenuItem
47                onClick={() => {
48                  onClick();
49                  setAnchorEl(null);
50                }}
51                key={idx}
52                id={id || `MenuItem${idx}`}
53                {...attributes}
54              >
55                {label}
56              </MenuItem>
57            )
58          )}
59    </Menu>
60  );
61};
62const useStyles = makeStyles(theme => ({
63  divider: {
64    margin: theme.spacing(1, 0),
65  },
66}));
67export default EventMenu;