1import {useState, useEffect} 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 useProfile from '../../hooks/useProfile';
 11import GenericMenu from '../GenericMenu';
 12import {ActionType} from '../GenericMenu/Action';
 13
 14const GenericToolbar = ({
 15  title,
 16  actions = [],
 17  goBack = null,
 18}: {
 19  title: string;
 20  actions: Array<ActionType>;
 21  goBack: () => void | null;
 22}) => {
 23  const router = useRouter();
 24  const [anchorEl, setAnchorEl] = useState(null);
 25  const classes = useStyles();
 26  const {user} = useProfile();
 27
 28  const userInfos = user
 29    ? [{label: user.username, id: 'Email'}, {divider: true}]
 30    : [];
 31
 32  useEffect(() => {
 33    window.scrollTo(0, 0);
 34  }, []);
 35
 36  return (
 37    <AppBar
 38      position="fixed"
 39      color="primary"
 40      className={classes.appbar}
 41      id="Menu"
 42    >
 43      <Toolbar>
 44        {goBack && (
 45          <IconButton
 46            edge="start"
 47            className={classes.goBack}
 48            onClick={() =>
 49              router.basePath.split('/').length > 2 ? router.back() : router.push('/dashboard')
 50            }
 51          >
 52            <Icon>arrow_back</Icon>
 53          </IconButton>
 54        )}
 55        <div className={classes.name}>
 56          <Typography variant="h6" noWrap id="MenuHeaderTitle">
 57            {title}
 58          </Typography>
 59        </div>
 60        {actions.length > 0 && (
 61          <>
 62            <IconButton
 63              color="inherit"
 64              edge="end"
 65              id="MenuMoreInfo"
 66              onClick={e => setAnchorEl(e.currentTarget)}
 67            >
 68              {user ? (
 69                <Avatar className={classes.avatar}>
 70                  {`${user.username[0]}`.toUpperCase()}
 71                </Avatar>
 72              ) : (
 73                <Icon>more_vert</Icon>
 74              )}
 75            </IconButton>
 76
 77            <GenericMenu
 78              anchorEl={anchorEl}
 79              setAnchorEl={setAnchorEl}
 80              actions={[...userInfos, ...actions, {divider: true}]}
 81            />
 82          </>
 83        )}
 84      </Toolbar>
 85    </AppBar>
 86  );
 87};
 88
 89const useStyles = makeStyles(theme => ({
 90  container: {
 91    padding: theme.spacing(2),
 92  },
 93  appbar: {
 94    height: theme.mixins.toolbar.minHeight,
 95    transition: 'height 0.3s ease',
 96    zIndex: theme.zIndex.appBar,
 97  },
 98  name: {
 99    flexGrow: 1,
100    display: 'flex',
101    alignItems: 'center',
102  },
103  avatar: {
104    width: theme.spacing(3),
105    height: theme.spacing(3),
106    fontSize: 16,
107  },
108  goBack: {
109    color: theme.palette.common.white,
110  },
111}));
112
113export default GenericToolbar;