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 {
10  useUpdateTravelMutation,
11  Travel as TravelType,
12} from '../../generated/graphql';
13import SubmitButton from './SubmitButton';
14import Transition from './Transition';
15import AddPassengerCommonFields from './AddPassengerCommonFields';
16import useStyles from './useStyles';
17
18interface Props {
19  travel: TravelType;
20  toggle: () => void;
21  open: boolean;
22}
23
24const NewPassengerDialog = ({open, toggle, travel}: Props) => {
25  const {t} = useTranslation();
26  const classes = useStyles();
27  const event = useEventStore(s => s.event);
28  const [updateTravel] = useUpdateTravelMutation();
29  const {addToEvent} = useAddToEvents();
30
31  // States
32  const [name, setName] = useState('');
33  const [email, setEmail] = useState('');
34  const canAddPassenger = !!name && !!email;
35
36  const addPassenger = async (e: FormEvent) => {
37    e.preventDefault();
38    const passenger = {
39      email,
40      name,
41    };
42
43    try {
44      const existingPassengers =
45        travel.passengers?.map(({__typename, ...item}) => item) || [];
46      const passengers = [...existingPassengers, passenger];
47      await updateTravel({
48        variables: {
49          id: travel.id,
50          travelUpdate: {
51            passengers,
52          },
53        },
54      });
55      addToEvent(event.id);
56      toggle();
57    } catch (error) {
58      console.error(error);
59    }
60  };
61
62  return (
63    <Dialog
64      fullWidth
65      maxWidth="xs"
66      open={open}
67      onClose={toggle}
68      TransitionComponent={Transition}
69    >
70      <form onSubmit={addPassenger}>
71        <DialogTitle className={classes.title}>
72          {travel.vehicle.name}
73          <Icon
74            className={classes.closeIcon}
75            onClick={toggle}
76            aria-label="close"
77          >
78            close
79          </Icon>
80        </DialogTitle>
81        <DialogContent className={classes.dialogContent}>
82          <AddPassengerCommonFields
83            email={email}
84            setEmail={setEmail}
85            name={name}
86            setName={setName}
87          />
88          <SubmitButton disabled={!canAddPassenger}>
89            {t('travel.passengers.add_to_car')}
90          </SubmitButton>
91        </DialogContent>
92      </form>
93    </Dialog>
94  );
95};
96
97export default NewPassengerDialog;