frontend/containers/AddTravelButton/index.tsx (view raw)
1import {Button, Icon} from '@mui/material';
2import {useEffect, useReducer} from 'react';
3import {useTranslation} from 'next-i18next';
4import NewTravelDialog from './NewTravelDialog';
5import useEventStore from '../../stores/useEventStore';
6import {useSession} from 'next-auth/react';
7import {useRouter} from 'next/router';
8import LoginDialog from '../LoginDialog';
9
10type Props = {};
11
12const AddTravelButton = (props: Props) => {
13 const {t} = useTranslation();
14 const router = useRouter();
15 const event = useEventStore(s => s.event);
16 const isCarosterPlus = event?.enabled_modules?.includes('caroster-plus');
17 const session = useSession();
18 const isAuthenticated = session.status === 'authenticated';
19 const [showLoginDialog, toggleLoginDialog] = useReducer(i => !i, false);
20 const [showNewTravelDialog, toggleNewTravelDialog] = useReducer(
21 i => !i,
22 false
23 );
24
25 const onClick = () => {
26 if (isCarosterPlus && !isAuthenticated) toggleLoginDialog();
27 else toggleNewTravelDialog();
28 };
29
30 useEffect(() => {
31 if (router.query.action === 'createTravel') {
32 toggleNewTravelDialog();
33 router.replace(
34 {pathname: `/${router.locale}/e/${router.query.uuid}`, query: null},
35 undefined,
36 {shallow: true}
37 );
38 }
39 }, [router]);
40
41 return (
42 <>
43 <Button
44 aria-label="add-car"
45 variant="contained"
46 color="secondary"
47 endIcon={<Icon>add</Icon>}
48 sx={{width: {xs: 1, sm: 'auto'}}}
49 onClick={onClick}
50 >
51 {t('travel.creation.title')}
52 </Button>
53 <NewTravelDialog
54 open={showNewTravelDialog}
55 toggle={toggleNewTravelDialog}
56 />
57 <LoginDialog
58 title={t`travel.creation.title`}
59 content={t`travel.creation.loginNotice`}
60 open={showLoginDialog}
61 toggle={toggleLoginDialog}
62 redirectPath={`/e/${event?.uuid}/?action=createTravel`}
63 />
64 </>
65 );
66};
67
68export default AddTravelButton;