1import React, {useState} from 'react';
 2import {makeStyles} from '@material-ui/core/styles';
 3import TextField from '@material-ui/core/TextField';
 4import Button from '@material-ui/core/Button';
 5import {useTranslation} from 'react-i18next';
 6import {DatePicker} from '@material-ui/pickers';
 7import moment from 'moment';
 8import {useHistory} from 'react-router-dom';
 9import {useToast} from '../../contexts/Toast';
10import Paper from '../../components/Paper';
11
12const Step2 = ({event, addToEvent, createEvent, ...props}) => {
13  const classes = useStyles();
14  const {t} = useTranslation();
15  const history = useHistory();
16  const {addToast} = useToast();
17
18  // States
19  const [date, setDate] = useState(!!event.date ? moment(event.date) : null);
20  const [address, setAddress] = useState(event.address ?? '');
21
22  const onCreate = async evt => {
23    if (evt.preventDefault) evt.preventDefault();
24    const eventData = {date: date?.toISOString(), address};
25    addToEvent(eventData);
26    const result = await createEvent(eventData);
27    if (!result) addToast(t('event.errors.cant_create'));
28    else history.push(`/e/${result.id}`);
29    return false;
30  };
31
32  return (
33    <Paper {...props}>
34      <form onSubmit={onCreate}>
35        <DatePicker
36          label={t('event.creation.date')}
37          value={date}
38          onChange={setDate}
39          className={classes.textField}
40          fullWidth
41          format="DD.MM.YYYY"
42          disablePast
43          id="NewEventDate"
44          name="date"
45          cancelLabel={t('generic.cancel')}
46        />
47        <TextField
48          className={classes.textField}
49          label={t('event.creation.address')}
50          fullWidth
51          margin="dense"
52          multiline
53          rows={4}
54          value={address}
55          onChange={e => setAddress(e.target.value)}
56          id="NewEventAddress"
57          name="address"
58        />
59        <Button
60          className={classes.button}
61          variant="contained"
62          color="secondary"
63          fullWidth
64          type="submit"
65          id="NewEventSubmit"
66        >
67          {t('generic.create')}
68        </Button>
69      </form>
70    </Paper>
71  );
72};
73
74const useStyles = makeStyles(theme => ({
75  textField: {},
76  button: {
77    marginTop: theme.spacing(2),
78  },
79}));
80
81export default Step2;