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