all repos — caroster @ v8.2

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

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;