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