frontend/containers/GenericMenu/index.tsx (view raw)
1import Menu from '@material-ui/core/Menu';
2import {useTranslation} from 'react-i18next';
3import useAuthStore from '../../stores/useAuthStore';
4import useProfile from '../../hooks/useProfile';
5import useSettings from '../../hooks/useSettings';
6import Languages from '../Languages/MenuItem';
7import Action from './Action';
8
9const GenericMenu = ({anchorEl, setAnchorEl, actions = []}) => {
10 const {t} = useTranslation();
11 const settings = useSettings();
12 const logout = useAuthStore(s => s.logout);
13 const {user} = useProfile();
14
15 const logoutMenuItem = user && {
16 label: t('menu.logout'),
17 onClick: () => {
18 logout();
19 window.location.href = settings['about_link'];
20 setAnchorEl(null);
21 },
22 id: 'LogoutTabs',
23 };
24 const aboutMenuItem = {
25 label: t('menu.about'),
26 onClick: () => {
27 window.location.href = settings['about_link'];
28 setAnchorEl(null);
29 },
30 id: 'AboutTabs',
31 };
32 const languageMenuItem = {
33 label: <Languages />,
34 id: 'LanguageSelection',
35 };
36
37 const validActions = [
38 ...actions,
39 aboutMenuItem,
40 languageMenuItem,
41 logoutMenuItem,
42 ].filter(Boolean);
43
44 return (
45 <Menu
46 anchorEl={anchorEl}
47 anchorOrigin={{
48 vertical: 'top',
49 horizontal: 'right',
50 }}
51 keepMounted
52 transformOrigin={{
53 vertical: 'top',
54 horizontal: 'right',
55 }}
56 open={!!anchorEl}
57 onClose={() => setAnchorEl(null)}
58 >
59 {validActions?.map((action, index) => (
60 <Action action={action} key={index} />
61 ))}
62 </Menu>
63 );
64};
65
66export default GenericMenu;