1import {useState} from 'react';
 2import {useRouter} from 'next/router';
 3import {makeStyles} from '@material-ui/core/styles';
 4import TextField from '@material-ui/core/TextField';
 5import Button from '@material-ui/core/Button';
 6import {CircularProgress} from '@material-ui/core';
 7import {DatePicker} from '@material-ui/pickers';
 8import moment from 'moment';
 9import {useTranslation} from 'react-i18next';
10import useToastStore from '../../stores/useToastStore';
11
12const Step2 = ({event, addToEvent, createEvent}) => {
13  const classes = useStyles();
14  const {t} = useTranslation();
15  const router = useRouter();
16  const addToast = useToastStore(s => s.addToast);
17
18  // States
19  const [date, setDate] = useState(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 = {
28      date: !date ? null : moment(date).format('YYYY-MM-DD'),
29      address,
30    };
31    addToEvent(eventData);
32    const result = await createEvent(eventData);
33    if (!result) addToast(t('event.errors.cant_create'));
34    else router.push(`/e/${result.uuid}`);
35    setLoading(false);
36    return false;
37  };
38
39  return (
40    <form onSubmit={onCreate}>
41      <DatePicker
42        id="NewEventDate"
43        fullWidth
44        label={t('event.creation.date')}
45        format="DD/MM/YYYY"
46        value={date}
47        onChange={setDate}
48        clearable
49        clearLabel={t('generic.clear')}
50        cancelLabel={t('generic.cancel')}
51      />
52      <TextField
53        label={t('event.creation.address')}
54        fullWidth
55        margin="dense"
56        multiline
57        rows={4}
58        value={address}
59        onChange={e => setAddress(e.target.value)}
60        id="NewEventAddress"
61        name="address"
62      />
63      <Button
64        disabled={loading}
65        className={classes.button}
66        variant="contained"
67        color="secondary"
68        fullWidth
69        type="submit"
70        id="NewEventSubmit"
71      >
72        {loading ? (
73          <CircularProgress
74            className={classes.loader}
75            size={20}
76            color="primary"
77          />
78        ) : (
79          t('generic.create')
80        )}
81      </Button>
82    </form>
83  );
84};
85
86const useStyles = makeStyles(theme => ({
87  button: {
88    marginTop: theme.spacing(2),
89  },
90}));
91
92export default Step2;