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