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