frontend/containers/GenericMenu/index.tsx (view raw)
1import Menu from '@mui/material/Menu';
2import {useTranslation} from 'react-i18next';
3import {signOut, useSession} from 'next-auth/react';
4import useSettings from '../../hooks/useSettings';
5import Languages from '../Languages/MenuItem';
6import Action, {ActionType} from './Action';
7import ExternalLink from './ExternalLink';
8import {Chip, Typography} from '@mui/material';
9
10interface Props {
11 anchorEl: Element;
12 setAnchorEl: (el: Element) => void;
13 actions: ActionType[];
14}
15
16const GenericMenu = (props: Props) => {
17 const {anchorEl, setAnchorEl, actions = []} = props;
18 const {t} = useTranslation();
19 const settings = useSettings();
20 const session = useSession();
21 const isAuthenticated = session.status === 'authenticated';
22
23 const supportItem = {
24 label: (
25 <ExternalLink
26 id="SupportCaroster"
27 url={settings['opencollective_link']}
28 label={
29 <Typography variant="caption" color="textSecondary">
30 <Chip
31 label={t`supportCaroster`}
32 color="secondary"
33 sx={{fontDecoration: 'none', cursor: 'pointer'}}
34 />
35 </Typography>
36 }
37 ></ExternalLink>
38 ),
39 };
40 const languageMenuItem = {
41 label: <Languages />,
42 id: 'LanguageSelection',
43 };
44 const aboutMenuItem = {
45 label: (
46 <ExternalLink
47 id="AboutCaroster"
48 url={settings['about_link']}
49 label={
50 <Typography variant="caption" color="textSecondary">
51 {t('menu.about')}
52 </Typography>
53 }
54 ></ExternalLink>
55 ),
56 };
57 const sourceCodeItem = {
58 label: (
59 <ExternalLink
60 id="SourceCode"
61 url={settings['code_link']}
62 label={
63 <Typography variant="caption" color="textSecondary">
64 {t('menu.code')}
65 </Typography>
66 }
67 ></ExternalLink>
68 ),
69 };
70 const logoutMenuItem = isAuthenticated && {
71 label: t('menu.logout'),
72 onClick: () => {
73 setAnchorEl(null);
74 signOut({
75 callbackUrl: settings?.['about_link'] || '/',
76 });
77 },
78 id: 'LogoutTabs',
79 };
80
81 const validActions = [
82 ...actions,
83 supportItem,
84 languageMenuItem,
85 logoutMenuItem,
86 {divider: true},
87 aboutMenuItem,
88 sourceCodeItem,
89 ].filter(Boolean);
90
91 return (
92 <Menu
93 anchorEl={anchorEl}
94 anchorOrigin={{
95 vertical: 'top',
96 horizontal: 'right',
97 }}
98 keepMounted
99 transformOrigin={{
100 vertical: 'top',
101 horizontal: 'right',
102 }}
103 open={!!anchorEl}
104 onClose={() => setAnchorEl(null)}
105 >
106 {validActions?.map((action, index) => (
107 <Action action={action} key={index} />
108 ))}
109 </Menu>
110 );
111};
112
113export default GenericMenu;