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