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 label={t('car.creation.name')}
92 value={name}
93 onChange={e => setName(e.target.value)}
94 fullWidth
95 autoFocus
96 id="NewCarName"
97 name="name"
98 />
99 <DateTimePicker
100 label={t('event.creation.date')}
101 value={date}
102 onChange={setDate}
103 className={classes.picker}
104 fullWidth
105 disablePast
106 format="LLLL"
107 id="NewCarDateTime"
108 name="date"
109 />
110 <Typography variant="caption">{t('car.creation.seats')}</Typography>
111 <Slider
112 value={seats}
113 onChange={(e, value) => setSeats(value)}
114 step={1}
115 min={1}
116 max={marks.length}
117 marks={marks}
118 valueLabelDisplay="auto"
119 />
120 <TextField
121 label={t('car.creation.meeting')}
122 value={meeting}
123 onChange={e => setMeeting(e.target.value)}
124 fullWidth
125 margin="dense"
126 id="NewCarMeeting"
127 name="meeting"
128 />
129 <TextField
130 label={t('car.creation.phone')}
131 value={phone}
132 onChange={e => setPhone(e.target.value)}
133 fullWidth
134 margin="dense"
135 id="NewCarPhone"
136 name="phone"
137 />
138 <TextField
139 label={t('car.creation.notes')}
140 value={details}
141 onChange={e => setDetails(e.target.value)}
142 fullWidth
143 margin="dense"
144 inputProps={{maxLength: 250}}
145 helperText={`${details.length}/250`}
146 multiline
147 rows={4}
148 id="NewCarDetails"
149 name="details"
150 />
151 </DialogContentText>
152 </DialogContent>
153 <DialogActions>
154 <Button
155 color="primary"
156 id="NewCarCancel"
157 onClick={toggle}
158 tabIndex={-1}
159 >
160 {t('generic.cancel')}
161 </Button>
162 <Button
163 color="primary"
164 variant="contained"
165 type="submit"
166 disabled={!canCreate}
167 aria-disabled={!canCreate}
168 id="NewCarSubmit"
169 >
170 {t('generic.create')}
171 </Button>
172 </DialogActions>
173 </form>
174 </Dialog>
175 );
176};
177
178const useStyles = makeStyles(theme => ({
179 picker: {
180 marginTop: theme.spacing(3),
181 marginBottom: theme.spacing(3),
182 },
183}));
184
185export default NewCarDialog;