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