frontend/containers/NewPassengerDialog/AddPassengerToTravel.tsx (view raw)
1import {FormEvent, useState} from 'react';
2import Dialog from '@material-ui/core/Dialog';
3import DialogContent from '@material-ui/core/DialogContent';
4import DialogTitle from '@material-ui/core/DialogTitle';
5import Icon from '@material-ui/core/Icon';
6import {useTranslation} from 'react-i18next';
7import useAddToEvents from '../../hooks/useAddToEvents';
8import useEventStore from '../../stores/useEventStore';
9import {Travel as TravelType} from '../../generated/graphql';
10import SubmitButton from './SubmitButton';
11import Transition from './Transition';
12import AddPassengerCommonFields from './AddPassengerCommonFields';
13import useStyles from './useStyles';
14import useToastStore from '../../stores/useToastStore';
15import usePassengersActions from '../../hooks/usePassengersActions';
16
17interface Props {
18 travel: TravelType;
19 toggle: () => void;
20 open: boolean;
21}
22
23const NewPassengerDialog = ({open, toggle, travel}: Props) => {
24 const {t} = useTranslation();
25 const classes = useStyles();
26 const event = useEventStore(s => s.event);
27 const {addToEvent} = useAddToEvents();
28 const addToast = useToastStore(s => s.addToast);
29
30 // States
31 const [name, setName] = useState('');
32 const [email, setEmail] = useState('');
33 const canAddPassenger = !!name;
34 const {addPassengerToTravel} = usePassengersActions();
35
36 const onSubmit = async (e: FormEvent) => {
37 e.preventDefault();
38 const passenger = {
39 email,
40 name,
41 };
42
43 try {
44 await addPassengerToTravel({passenger, travel});
45 addToEvent(event.id);
46 addToast(t('passenger.success.added_to_car', {name}));
47 toggle();
48 } catch (error) {
49 console.error(error);
50 if (error.message === 'no_enough_seats')
51 addToast(t`passenger.errors.car_full`);
52 }
53 };
54
55 return (
56 <Dialog
57 fullWidth
58 maxWidth="xs"
59 open={open}
60 onClose={toggle}
61 TransitionComponent={Transition}
62 >
63 <form onSubmit={onSubmit}>
64 <DialogTitle className={classes.title}>
65 {travel.vehicleName}
66 <Icon
67 className={classes.closeIcon}
68 onClick={toggle}
69 aria-label="close"
70 >
71 close
72 </Icon>
73 </DialogTitle>
74 <DialogContent className={classes.dialogContent}>
75 <AddPassengerCommonFields
76 email={email}
77 setEmail={setEmail}
78 name={name}
79 setName={setName}
80 />
81 <SubmitButton disabled={!canAddPassenger}>
82 {t('travel.passengers.add_to_car')}
83 </SubmitButton>
84 </DialogContent>
85 </form>
86 </Dialog>
87 );
88};
89
90export default NewPassengerDialog;