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