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