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="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;