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 moment from 'moment';
10import {useStrapi} from 'strapi-react-context';
11import {useTranslation} from 'react-i18next';
12import TextField from '@material-ui/core/TextField';
13import Slider from '@material-ui/core/Slider';
14import Typography from '@material-ui/core/Typography';
15import {makeStyles} from '@material-ui/core/styles';
16import {DateTimePicker} from '@material-ui/pickers';
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 <Typography variant="caption">{t('car.creation.seats')}</Typography>
99 <Slider
100 value={seats}
101 onChange={(e, value) => setSeats(value)}
102 step={1}
103 marks={marks}
104 min={1}
105 max={marks.length}
106 valueLabelDisplay="auto"
107 />
108 <TextField
109 className={classes.textField}
110 label={t('car.creation.meeting')}
111 fullWidth
112 margin="dense"
113 multiline
114 rows={2}
115 value={meeting}
116 onChange={e => setMeeting(e.target.value)}
117 id="NewCarMeeting"
118 name="meeting"
119 />
120 <DateTimePicker
121 label={t('event.creation.date')}
122 value={date}
123 onChange={setDate}
124 className={classes.textField}
125 fullWidth
126 format="LLLL"
127 disablePast
128 id="NewCarDateTime"
129 name="date"
130 />
131 <TextField
132 className={classes.textField}
133 label={t('car.creation.phone')}
134 fullWidth
135 margin="dense"
136 value={phone}
137 onChange={e => setPhone(e.target.value)}
138 id="NewCarPhone"
139 name="phone"
140 />
141 <TextField
142 className={classes.textField}
143 label={t('car.creation.notes')}
144 fullWidth
145 margin="dense"
146 multiline
147 rows={2}
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 id="NewCarCancel" onClick={toggle} tabIndex={-1}>
157 {t('generic.cancel')}
158 </Button>
159 <Button
160 variant="contained"
161 type="submit"
162 disabled={!canCreate}
163 aria-disabled={!canCreate}
164 id="NewCarSubmit"
165 >
166 {t('generic.create')}
167 </Button>
168 </DialogActions>
169 </form>
170 </Dialog>
171 );
172};
173
174const useStyles = makeStyles(theme => ({
175 textField: {marginBottom: theme.spacing(2)},
176}));
177
178export default NewCarDialog;