frontend/containers/GenericMenu/index.js (view raw)
1import {useState, useEffect, useMemo} from 'react';
2import AppBar from '@material-ui/core/AppBar';
3import Toolbar from '@material-ui/core/Toolbar';
4import Typography from '@material-ui/core/Typography';
5import IconButton from '@material-ui/core/IconButton';
6import Avatar from '@material-ui/core/Avatar';
7import Icon from '@material-ui/core/Icon';
8import {makeStyles} from '@material-ui/core/styles';
9import GenericToolbar from './Toolbar';
10import {useTranslation} from 'react-i18next';
11import {useRouter} from 'next/router';
12import useAuthStore from '../../stores/useAuthStore';
13import useProfile from '../../hooks/useProfile';
14import useSettings from '../../hooks/useSettings';
15
16const GenericMenu = ({title, actions = [], goBack = null}) => {
17 const {t} = useTranslation();
18 const router = useRouter();
19 const [anchorEl, setAnchorEl] = useState(null);
20 const classes = useStyles();
21 const {user} = useProfile();
22 const logout = useAuthStore(s => s.logout);
23 const settings = useSettings();
24
25 const validActions = useMemo(() => actions.filter(Boolean), [actions]);
26
27 const logoutMenuItem = user && {
28 label: t('menu.logout'),
29 onClick: () => {
30 logout();
31 window.location.href = settings['about_link'];
32 },
33 id: 'LogoutTabs',
34 };
35 const aboutMenuItem = {
36 label: t('menu.about'),
37 onClick: () => (window.location.href = settings['about_link']),
38 id: 'AboutTabs',
39 };
40 const userInfos = user
41 ? [{label: user.username, id: 'Email'}, {divider: true}]
42 : [];
43
44 useEffect(() => {
45 window.scrollTo(0, 0);
46 }, []);
47
48 return (
49 <AppBar
50 position="static"
51 color="primary"
52 className={classes.appbar}
53 id="Menu"
54 >
55 <Toolbar>
56 {goBack && (
57 <IconButton
58 edge="start"
59 className={classes.goBack}
60 onClick={() =>
61 router.length > 2 ? router.goBack() : router.push('/dashboard')
62 }
63 >
64 <Icon>arrow_back</Icon>
65 </IconButton>
66 )}
67 <div className={classes.name}>
68 <Typography variant="h6" noWrap id="MenuHeaderTitle">
69 {title}
70 </Typography>
71 </div>
72 {validActions.length > 0 && (
73 <>
74 <IconButton
75 color="inherit"
76 edge="end"
77 id="MenuMoreInfo"
78 onClick={e => setAnchorEl(e.currentTarget)}
79 >
80 {user ? (
81 <Avatar className={classes.avatar}>
82 {`${user.username[0]}`.toUpperCase()}
83 </Avatar>
84 ) : (
85 <Icon>more_vert</Icon>
86 )}
87 </IconButton>
88
89 <GenericToolbar
90 anchorEl={anchorEl}
91 setAnchorEl={setAnchorEl}
92 actions={[
93 ...userInfos,
94 ...validActions,
95 {divider: true},
96 aboutMenuItem,
97 logoutMenuItem,
98 ].filter(Boolean)}
99 />
100 </>
101 )}
102 </Toolbar>
103 </AppBar>
104 );
105};
106
107const useStyles = makeStyles(theme => ({
108 container: {
109 padding: theme.spacing(2),
110 },
111 appbar: {
112 overflow: 'hidden',
113 height: theme.mixins.toolbar.minHeight,
114 transition: 'height 0.3s ease',
115 zIndex: theme.zIndex.appBar,
116 position: 'fixed',
117 top: 0,
118 },
119 name: {
120 flexGrow: 1,
121 display: 'flex',
122 alignItems: 'center',
123 },
124 shareIcon: {
125 marginRight: theme.spacing(0),
126 },
127 avatar: {
128 width: theme.spacing(3),
129 height: theme.spacing(3),
130 fontSize: 16,
131 },
132 goBack: {
133 color: theme.palette.common.white,
134 },
135}));
136
137export default GenericMenu;