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        fullWidth
43        label={t('event.creation.date')}
44        value={date}
45        onChange={setDate}
46        format="DD/MM/YYYY"
47        cancelLabel={t('generic.cancel')}
48        clearable
49        clearLabel={t('generic.clear')}
50        id="NewEventDate"
51      />
52      <TextField
53        label={t('event.creation.address')}
54        fullWidth
55        multiline
56        rowsMax={4}
57        inputProps={{maxLength: 250}}
58        helperText={`${address.length}/250`}
59        value={address}
60        onChange={e => setAddress(e.target.value)}
61        name="address"
62        id="NewEventAddress"
63      />
64      <Button
65        disabled={loading}
66        className={classes.button}
67        variant="contained"
68        color="secondary"
69        fullWidth
70        type="submit"
71        id="NewEventSubmit"
72      >
73        {loading ? (
74          <CircularProgress
75            className={classes.loader}
76            size={20}
77            color="primary"
78          />
79        ) : (
80          t('generic.create')
81        )}
82      </Button>
83    </form>
84  );
85};
86
87const useStyles = makeStyles(theme => ({
88  button: {
89    marginTop: theme.spacing(2),
90  },
91}));
92
93export default Step2;