1import React, {useState, useEffect, useMemo} from 'react';
  2import AppBar from '@material-ui/core/AppBar';
  3import Toolbar from '@material-ui/core/Toolbar';
  4import Typography from '@material-ui/core/Typography';
  5import IconButton from '@material-ui/core/IconButton';
  6import Avatar from '@material-ui/core/Avatar';
  7import Icon from '@material-ui/core/Icon';
  8import {makeStyles} from '@material-ui/core/styles';
  9import GenericToolbar from './Toolbar';
 10import {useTranslation} from 'react-i18next';
 11import {useStrapi, useAuth} from 'strapi-react-context';
 12import {useHistory} from 'react-router-dom';
 13
 14const GenericMenu = ({title, actions = [], goBack = false}) => {
 15  const {t} = useTranslation();
 16  const history = useHistory();
 17  const [anchorEl, setAnchorEl] = useState(null);
 18  const classes = useStyles();
 19  const strapi = useStrapi();
 20  const {logout, authState} = useAuth();
 21  const [settings] = strapi.stores?.settings || [{}];
 22  const validActions = useMemo(() => actions.filter(Boolean), [actions]);
 23
 24  const logoutMenuItem = authState?.user
 25    ? {label: t('menu.logout'), onClick: logout, id: 'LogoutTabs'}
 26    : null;
 27  const aboutMenuItem = {
 28    label: t('menu.about'),
 29    onClick: () => (window.location.href = settings['about_link']),
 30    id: 'AboutTabs',
 31  };
 32  const userInfos = authState?.user
 33    ? [{label: authState.user.username, id: 'Email'}, {divider: true}]
 34    : [];
 35  useEffect(() => {
 36    window.scrollTo(0, 0);
 37  }, []);
 38
 39  return (
 40    <AppBar
 41      position="static"
 42      color="primary"
 43      className={classes.appbar}
 44      id="Menu"
 45    >
 46      <Toolbar>
 47        {goBack && (
 48          <IconButton
 49            edge="start"
 50            className={classes.goBack}
 51            onClick={() =>
 52              history.length > 2 ? history.goBack() : history.push('/dashboard')
 53            }
 54          >
 55            <Icon>arrow_back</Icon>
 56          </IconButton>
 57        )}
 58        <div className={classes.name}>
 59          <Typography variant="h6" noWrap id="MenuHeaderTitle">
 60            {title}
 61          </Typography>
 62        </div>
 63        {validActions.length > 0 && (
 64          <>
 65            <IconButton
 66              color="inherit"
 67              edge="end"
 68              id="MenuMoreInfo"
 69              onClick={e => setAnchorEl(e.currentTarget)}
 70            >
 71              {authState?.user ? (
 72                <Avatar className={classes.avatar}>
 73                  {`${authState.user.username[0]}`.toUpperCase()}
 74                </Avatar>
 75              ) : (
 76                <Icon>more_vert</Icon>
 77              )}
 78            </IconButton>
 79
 80            <GenericToolbar
 81              anchorEl={anchorEl}
 82              setAnchorEl={setAnchorEl}
 83              actions={[
 84                ...userInfos,
 85                ...validActions,
 86                {divider: true},
 87                aboutMenuItem,
 88                logoutMenuItem,
 89              ].filter(Boolean)}
 90            />
 91          </>
 92        )}
 93      </Toolbar>
 94    </AppBar>
 95  );
 96};
 97
 98const useStyles = makeStyles(theme => ({
 99  container: {
100    padding: theme.spacing(2),
101  },
102  appbar: {
103    overflow: 'hidden',
104    height: theme.mixins.toolbar.minHeight,
105    transition: 'height 0.3s ease',
106    zIndex: theme.zIndex.appBar,
107    position: 'fixed',
108    top: 0,
109  },
110  name: {
111    flexGrow: 1,
112    display: 'flex',
113    alignItems: 'center',
114  },
115  shareIcon: {
116    marginRight: theme.spacing(0),
117  },
118  avatar: {
119    width: theme.spacing(3),
120    height: theme.spacing(3),
121    fontSize: 16,
122  },
123}));
124
125export default GenericMenu;