frontend/containers/GenericToolbar/index.tsx (view raw)
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="static"
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
50 ? router.back()
51 : router.push('/dashboard')
52 }
53 >
54 <Icon>arrow_back</Icon>
55 </IconButton>
56 )}
57 <div className={classes.name}>
58 <Typography variant="h6" noWrap id="MenuHeaderTitle">
59 {title}
60 </Typography>
61 </div>
62 {actions.length > 0 && (
63 <>
64 <IconButton
65 color="inherit"
66 edge="end"
67 id="MenuMoreInfo"
68 onClick={e => setAnchorEl(e.currentTarget)}
69 >
70 {user ? (
71 <Avatar className={classes.avatar}>
72 {`${user.username[0]}`.toUpperCase()}
73 </Avatar>
74 ) : (
75 <Icon>more_vert</Icon>
76 )}
77 </IconButton>
78
79 <GenericMenu
80 anchorEl={anchorEl}
81 setAnchorEl={setAnchorEl}
82 actions={[...userInfos, ...actions, {divider: true}]}
83 />
84 </>
85 )}
86 </Toolbar>
87 </AppBar>
88 );
89};
90
91const useStyles = makeStyles(theme => ({
92 appbar: () => ({
93 minHeight: theme.mixins.toolbar.minHeight,
94 transition: 'height 0.3s ease',
95 display: 'block',
96 }),
97 name: {
98 flexGrow: 1,
99 display: 'flex',
100 alignItems: 'center',
101 },
102 avatar: {
103 width: theme.spacing(3),
104 height: theme.spacing(3),
105 fontSize: 16,
106 },
107 goBack: {
108 color: theme.palette.common.white,
109 },
110}));
111
112export default GenericToolbar;