frontend/containers/NewPassengerDialog/AddPassengerToWaitingList.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 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 usePassengersActions from '../../hooks/usePassengersActions';
14import useProfile from '../../hooks/useProfile';
15import SubmitButton from './SubmitButton';
16import Transition from './Transition';
17import AddPassengerCommonFields from './AddPassengerCommonFields';
18import useStyles from './useStyles';
19import {validateEmail} from './validation';
20import {PassengerInput} from '../../generated/graphql';
21
22interface Props {
23 toggle: () => void;
24 open: boolean;
25 addSelf: boolean;
26}
27
28const AddPassengerToWaitingList = ({open, toggle, addSelf}: Props) => {
29 const {t} = useTranslation();
30 const classes = useStyles();
31 const event = useEventStore(s => s.event);
32 const addToast = useToastStore(s => s.addToast);
33 const {addToEvent} = useAddToEvents();
34
35 // States
36 const [name, setName] = useState('');
37 const [email, setEmail] = useState('');
38 const emailValidated = validateEmail(email);
39 const [location, setlocation] = useState('');
40 const canAddPassenger = !!name && !!email;
41 const {profile, userId} = useProfile();
42 const {addPassenger} = usePassengersActions();
43
44 const onAddPassenger = async (e: FormEvent) => {
45 e.preventDefault();
46 let passenger: PassengerInput = {
47 email,
48 name,
49 location,
50 };
51 if (addSelf && profile)
52 passenger = {
53 user: userId,
54 email: profile.email,
55 name: profile.username,
56 location,
57 };
58
59 try {
60 await addPassenger({...passenger, event: event.id});
61 addToEvent(event.id);
62 addToast(
63 t(
64 addSelf
65 ? 'passenger.success.added_self_to_waitlist'
66 : 'passenger.success.added_to_waitlist',
67 {name}
68 )
69 );
70 toggle();
71 } catch (error) {
72 console.error(error);
73 addToast(t('passenger.errors.cant_add_passenger'));
74 }
75 };
76
77 return (
78 <Dialog
79 fullWidth
80 maxWidth="xs"
81 open={open}
82 onClose={toggle}
83 TransitionComponent={Transition}
84 >
85 <form onSubmit={onAddPassenger}>
86 <DialogTitle className={classes.title}>
87 {t('travel.passengers.register_to_waiting_list')}
88 <Icon
89 className={classes.closeIcon}
90 onClick={toggle}
91 aria-label="close"
92 >
93 close
94 </Icon>
95 </DialogTitle>
96 <DialogContent className={classes.dialogContent}>
97 {!addSelf && (
98 <AddPassengerCommonFields
99 email={email}
100 emailError={!emailValidated}
101 setEmail={setEmail}
102 name={name}
103 setName={setName}
104 />
105 )}
106 <Box className={classes.inputBox}>
107 <label htmlFor="location">
108 <Typography className={classes.label}>
109 <Icon className={classes.labelIcon}>place</Icon>{' '}
110 {t('travel.passengers.location')}
111 </Typography>
112 </label>
113 <TextField
114 id="Passengerlocation"
115 name="location"
116 value={location}
117 onChange={e => setlocation(e.target.value)}
118 variant="outlined"
119 size="small"
120 fullWidth
121 label=""
122 placeholder={t('travel.passengers.location_placeholder')}
123 />
124 <Typography variant="caption">
125 {t('travel.passengers.location_helper')}
126 </Typography>
127 </Box>
128 <SubmitButton
129 disabled={!addSelf && !canAddPassenger}
130 important={addSelf}
131 >
132 {!addSelf && t('travel.passengers.add_someone')}
133 {addSelf && t('travel.passengers.add_me')}
134 </SubmitButton>
135 </DialogContent>
136 </form>
137 </Dialog>
138 );
139};
140
141export default AddPassengerToWaitingList;