all repos — caroster @ v2.0

[Octree] Group carpool to your event https://caroster.io

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';
 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;