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        className={classes.textField}
38        fullWidth
39        format="DD.MM.YYYY"
40        disablePast
41        id="NewEventDate"
42        name="date"
43        cancelLabel={t('generic.cancel')}
44      />
45      <TextField
46        className={classes.textField}
47        label={t('event.creation.address')}
48        fullWidth
49        margin="dense"
50        multiline
51        rows={4}
52        value={address}
53        onChange={e => setAddress(e.target.value)}
54        id="NewEventAddress"
55        name="address"
56      />
57      <Button
58        className={classes.button}
59        variant="contained"
60        color="secondary"
61        fullWidth
62        type="submit"
63        id="NewEventSubmit"
64      >
65        {t('generic.create')}
66      </Button>
67    </form>
68  );
69};
70
71const useStyles = makeStyles(theme => ({
72  textField: {},
73  button: {
74    marginTop: theme.spacing(2),
75  },
76}));
77
78export default Step2;