Header.tsx 5.06 KiB
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[];
handleLogout?: () => void;
};
const Header: React.FC<HeaderProps> = ({ customToolbar, handleLogout, 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) => (
<Tab
key={item.id}
className={classes.tab}
label={item.title}
onClick={(): void => {
history.push(item.redirectTo);
}}
/>
))}
{!isNil(profile) && (
<>
{USER_MENU_ITEMS.map((item) => (
<Tab
key={item.id}
className={classes.tab}
label={item.title}
onClick={(): void => {
history.push(item.redirectTo);
}}
/>
))}
{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) ? (
<>
<IconButton size="medium">
<Badge
badgeContent={profile.notices.filter((item) => !item.isSeen).length}
color="error"
>
<MailOutline style={{ color: 'white' }} />
</Badge>
</IconButton>
{profile.warnings.length > 0 && (
<IconButton size="medium" disableRipple>
<Report color="error" />
</IconButton>
)}
<Typography variant="h6" align="center" className={classes.texts}>
{profile.name}
</Typography>
<Box color="secondary.main">
<IconButton color="inherit" size="medium" onClick={handleLogout}>
<ExitToApp />
</IconButton>
</Box>
</>
) : (
<Button color="secondary" variant="contained">
Belépés
</Button>
)}
</Toolbar>
)}
</AppBar>
);
};
export default Header;