app/src/containers/NewCarDialog/index.js (view raw)
1import React, {useState} from 'react';
2import Dialog from '@material-ui/core/Dialog';
3import DialogActions from '@material-ui/core/DialogActions';
4import DialogContent from '@material-ui/core/DialogContent';
5import DialogContentText from '@material-ui/core/DialogContentText';
6import DialogTitle from '@material-ui/core/DialogTitle';
7import Button from '@material-ui/core/Button';
8import Slide from '@material-ui/core/Slide';
9import TextField from '@material-ui/core/TextField';
10import Slider from '@material-ui/core/Slider';
11import Typography from '@material-ui/core/Typography';
12import {DateTimePicker} from '@material-ui/pickers';
13import {makeStyles} from '@material-ui/core/styles';
14import moment from 'moment';
15import {useTranslation} from 'react-i18next';
16import {useStrapi} from 'strapi-react-context';
17import {useToast} from '../../contexts/Toast';
18import {useEvent} from '../../contexts/Event';
19import useProfile from '../../hooks/useProfile';
20
21const Transition = React.forwardRef(function Transition(props, ref) {
22 return <Slide direction="up" ref={ref} {...props} />;
23});
24
25const marks = [1, 2, 3, 4, 5, 6, 7, 8].map(value => ({
26 value,
27 label: value,
28}));
29
30const NewCarDialog = ({open, toggle}) => {
31 const strapi = useStrapi();
32 const {t} = useTranslation();
33 const classes = useStyles();
34 const {addToast} = useToast();
35 const {event} = useEvent();
36 const {addEvent} = useProfile();
37
38 // States
39 const [name, setName] = useState('');
40 const [seats, setSeats] = useState(4);
41 const [meeting, setMeeting] = useState('');
42 const [date, setDate] = useState(moment());
43 const [phone, setPhone] = useState('');
44 const [details, setDetails] = useState('');
45
46 const canCreate = !!name && !!seats;
47
48 const onCreate = async e => {
49 if (e.preventDefault) e.preventDefault();
50 try {
51 await strapi.services.cars.create({
52 name,
53 seats,
54 meeting,
55 departure: date.toISOString(),
56 phone_number: phone,
57 details,
58 event: event.id,
59 });
60 addEvent(event);
61 addToast(t('car.creation.created'));
62 toggle();
63
64 // Clear states
65 setName('');
66 setSeats(4);
67 setMeeting('');
68 setDate(moment());
69 setPhone('');
70 setDetails('');
71 } catch (error) {
72 console.error(error);
73 addToast(t('car.errors.cant_create'));
74 }
75 return false;
76 };
77
78 return (
79 <Dialog
80 fullWidth
81 maxWidth="sm"
82 open={open}
83 onClose={toggle}
84 TransitionComponent={Transition}
85 >
86 <form onSubmit={onCreate}>
87 <DialogTitle>{t('car.creation.title')}</DialogTitle>
88 <DialogContent>
89 <DialogContentText>
90 <TextField
91 className={classes.textField}
92 label={t('car.creation.name')}
93 fullWidth
94 autoFocus
95 margin="dense"
96 value={name}
97 onChange={e => setName(e.target.value)}
98 id="NewCarName"
99 name="name"
100 />
101 <DateTimePicker
102 label={t('event.creation.date')}
103 value={date}
104 onChange={setDate}
105 className={classes.picker}
106 fullWidth
107 format="LLLL"
108 disablePast
109 id="NewCarDateTime"
110 name="date"
111 />
112 <Typography variant="caption">{t('car.creation.seats')}</Typography>
113 <Slider
114 value={seats}
115 onChange={(e, value) => setSeats(value)}
116 step={1}
117 min={1}
118 max={marks.length}
119 marks={marks}
120 valueLabelDisplay="auto"
121 />
122 <TextField
123 className={classes.textField}
124 label={t('car.creation.meeting')}
125 fullWidth
126 margin="dense"
127 value={meeting}
128 onChange={e => setMeeting(e.target.value)}
129 id="NewCarMeeting"
130 name="meeting"
131 />
132 <TextField
133 className={classes.textField}
134 label={t('car.creation.phone')}
135 fullWidth
136 margin="dense"
137 value={phone}
138 onChange={e => setPhone(e.target.value)}
139 id="NewCarPhone"
140 name="phone"
141 />
142 <TextField
143 className={classes.textField}
144 label={t('car.creation.notes')}
145 fullWidth
146 margin="dense"
147 inputProps={{maxLength: 250}}
148 helperText={`${details.length}/250`}
149 multiline
150 rows={4}
151 value={details}
152 onChange={e => setDetails(e.target.value)}
153 id="NewCarDetails"
154 name="details"
155 />
156 </DialogContentText>
157 </DialogContent>
158 <DialogActions>
159 <Button
160 color="primary"
161 id="NewCarCancel"
162 onClick={toggle}
163 tabIndex={-1}
164 >
165 {t('generic.cancel')}
166 </Button>
167 <Button
168 color="primary"
169 variant="contained"
170 type="submit"
171 disabled={!canCreate}
172 aria-disabled={!canCreate}
173 id="NewCarSubmit"
174 >
175 {t('generic.create')}
176 </Button>
177 </DialogActions>
178 </form>
179 </Dialog>
180 );
181};
182
183const useStyles = makeStyles(theme => ({
184 textField: {
185 marginBottom: theme.spacing(2),
186 },
187 picker: {
188 marginBottom: theme.spacing(3),
189 },
190}));
191
192export default NewCarDialog;