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