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