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 TextField from '@material-ui/core/TextField';
  6import Box from '@material-ui/core/Box';
  7import Typography from '@material-ui/core/Typography';
  8import Icon from '@material-ui/core/Icon';
  9import {useTranslation} from 'react-i18next';
 10import useToastStore from '../../stores/useToastStore';
 11import useEventStore from '../../stores/useEventStore';
 12import useAddToEvents from '../../hooks/useAddToEvents';
 13import SubmitButton from './SubmitButton';
 14import Transition from './Transition';
 15import AddPassengerCommonFields from './AddPassengerCommonFields';
 16import useStyles from './useStyles';
 17import {useUpdateEventMutation} from '../../generated/graphql';
 18
 19interface Props {
 20  toggle: () => void;
 21  open: boolean;
 22}
 23
 24const NewPassengerDialog = ({
 25  open,
 26  toggle,
 27}: Props) => {
 28  const {t} = useTranslation();
 29  const classes = useStyles();
 30  const event = useEventStore(s => s.event);
 31  const addToast = useToastStore(s => s.addToast);
 32  const {addToEvent} = useAddToEvents();
 33  const [updateEvent] = useUpdateEventMutation();
 34
 35  // States
 36  const [name, setName] = useState('');
 37  const [email, setEmail] = useState('');
 38  const [location, setlocation] = useState('');
 39  const canAddPassenger = !!name && !!email;
 40
 41  const addPassenger = async (e: FormEvent) => {
 42    e.preventDefault();
 43    const passenger = {
 44      email,
 45      name,
 46      location,
 47    };
 48
 49    try {
 50      const waitingList = [...event.waitingList, passenger].map(
 51        ({__typename, ...item}) => item
 52      );
 53      await updateEvent({
 54        variables: {uuid: event.uuid, eventUpdate: {waitingList}},
 55        refetchQueries: ['eventByUUID'],
 56      });
 57      addToEvent(event.id);
 58      toggle();
 59    } catch (error) {
 60      console.error(error);
 61      addToast(t('passenger.errors.cant_add_passenger'));
 62    }
 63  };
 64
 65  return (
 66    <Dialog
 67      fullWidth
 68      maxWidth="xs"
 69      open={open}
 70      onClose={toggle}
 71      TransitionComponent={Transition}
 72    >
 73      <form onSubmit={addPassenger}>
 74        <DialogTitle className={classes.title}>
 75          {t('travel.passengers.register_to_waiting_list')}
 76          <Icon
 77            className={classes.closeIcon}
 78            onClick={toggle}
 79            aria-label="close"
 80          >
 81            close
 82          </Icon>
 83        </DialogTitle>
 84        <DialogContent className={classes.dialogContent}>
 85          <AddPassengerCommonFields
 86            email={email}
 87            setEmail={setEmail}
 88            name={name}
 89            setName={setName}
 90          />
 91          <Box className={classes.inputBox}>
 92            <label htmlFor="location">
 93              <Typography>
 94                <Icon className={classes.labelIcon}>
 95                  place
 96                </Icon>{' '}
 97                {t('travel.passengers.location')}
 98              </Typography>
 99            </label>
100            <TextField
101              id="Passengerlocation"
102              name="location"
103              value={location}
104              onChange={e => setlocation(e.target.value)}
105              variant="outlined"
106              size="small"
107              fullWidth
108              label=""
109              placeholder={t('travel.passengers.location_placeholder')}
110            />
111            <Typography variant="caption">
112              {t('travel.passengers.location_helper')}
113            </Typography>
114          </Box>
115          <SubmitButton disabled={!canAddPassenger}>
116            {t('travel.passengers.add_someone')}
117          </SubmitButton>
118        </DialogContent>
119      </form>
120    </Dialog>
121  );
122};
123
124export default NewPassengerDialog;