Header.tsx

import {
  AppBar,
  Badge,
  Box,
  Button,
  Grid,
  IconButton,
  makeStyles,
  Tab,
  Tabs,
  Toolbar,
  Typography,
} from '@material-ui/core';
import { ExitToApp, MailOutline, Report } from '@material-ui/icons';
import { isNil } from 'lodash';
import React, { useState } from 'react';
import { useHistory } from 'react-router';
import { useUserContext } from '../hooks/useUserContext';
import SCHBodyIcon from '../svg/SCHBodyIcon';

export interface AppBarMenuItem {
  id: number;
  title: string;
  redirectTo: string;
}

export const MENU_ITEMS: AppBarMenuItem[] = [
  {
    id: 0,
    title: 'Hírek',
    redirectTo: '/news',
  },
  {
    id: 1,
    title: 'Rólunk',
    redirectTo: '/about',
  },
  {
    id: 2,
    title: 'Házirend',
    redirectTo: '/rules',
  },
];

const USER_MENU_ITEMS: AppBarMenuItem[] = [
  {
    id: 3,
    title: 'Időszakok',
    redirectTo: '/terms',
  },
];

const ADMIN_MENU_ITEMS: AppBarMenuItem[] = [
  {
    id: 4,
    title: 'Felhasználók',
    redirectTo: '/users',
  },
];

const useStyles = makeStyles((theme) => ({
  appBar: {
    backgroundColor: theme.palette.primary.main,
  },
  tabContainer: {
    flexGrow: 1,
    height: '100%',
  },
  tabs: {
    height: '100%',
    marginRight: `${theme.spacing(1)}px`,
  },
  tab: {
    color: theme.palette.secondary.main,
    fontWeight: 600,
    minWidth: '0px',
  },
  indicator: {
    height: '5px',
    backgroundColor: theme.palette.secondary.main,
  },
  texts: {
    flexShrink: 0,
    marginRight: `${theme.spacing(1)}px`,
    marginLeft: `${theme.spacing(1)}px`,
  },
}));

export type HeaderProps = {
  customToolbar?: React.ReactElement;
  menuItems?: AppBarMenuItem[];
};

const Header: React.FC<HeaderProps> = ({ customToolbar, menuItems = MENU_ITEMS }) => {
  const classes = useStyles();
  const history = useHistory();
  const { profile } = useUserContext();
  const [value, setValue] = useState(
    menuItems.find((item) => history.location.pathname === item.redirectTo)?.id ?? 0,
  );

  return (
    <AppBar className={classes.appBar} position="static">
      {customToolbar !== undefined ? (
        customToolbar
      ) : (
        <Toolbar>
          <div>
            <SCHBodyIcon width="64px" height="48px" />
          </div>

          <Grid item className={classes.tabContainer} container justify="flex-end">
            <Tabs
              className={classes.tabs}
              classes={{ flexContainer: classes.tabs }}
              value={value}
              onChange={(event, val): void => {
                setValue(val);
              }}
              TabIndicatorProps={{ className: classes.indicator }}
            >
              {menuItems.map(
                (item) =>
                  (isNil(profile) || !profile.isLoggedIn || profile.profile) && (
                    <Tab
                      key={item.id}
                      className={classes.tab}
                      label={item.title}
                      onClick={(): void => {
                        history.push(item.redirectTo);
                      }}
                    />
                  ),
              )}
              {!isNil(profile) && profile.profile && (
                <>
                  {USER_MENU_ITEMS.map((item) => (
                    <Tab
                      key={item.id}
                      className={classes.tab}
                      label={item.title}
                      onClick={(): void => {
                        history.push(item.redirectTo);
                      }}
                    />
                  ))}

                  {profile.profile && profile.profile.role === 'ADMIN' && (
                    <>
                      {ADMIN_MENU_ITEMS.map((item) => (
                        <Tab
                          key={item.id}
                          className={classes.tab}
                          label={item.title}
                          onClick={(): void => {
                            history.push(item.redirectTo);
                          }}
                        />
                      ))}
                    </>
                  )}
                </>
              )}
            </Tabs>
          </Grid>

          {!isNil(profile) && profile.isLoggedIn ? (
            <>
              {profile.profile && (
                <>
                  <IconButton size="medium">
                    <Badge color="error">
                      <MailOutline style={{ color: 'white' }} />
                    </Badge>
                  </IconButton>

                  <IconButton size="medium" disableRipple>
                    <Report color="error" />
                  </IconButton>

                  <Typography variant="h6" align="center" className={classes.texts}>
                    {profile.profile && profile.profile.name}
                  </Typography>
                </>
              )}

              <a href="/api/v1/logout">
                <Box color="secondary.main">
                  <IconButton color="inherit" size="medium">
                    <ExitToApp />
                  </IconButton>
                </Box>
              </a>
            </>
          ) : (
            <a href="/api/v1/login">
              <Button color="secondary" variant="contained">
                Belépés
              </Button>
            </a>
          )}
        </Toolbar>
      )}
    </AppBar>
  );
};

export default Header;