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 [description, setDescription] = useState(event.description ?? '');
 22  const [loading, setLoading] = useState(false);
 23
 24  const onCreate = async evt => {
 25    if (evt.preventDefault) evt.preventDefault();
 26    if (loading) return;
 27    setLoading(true);
 28    const eventData = {
 29      date: !date ? null : moment(date).format('YYYY-MM-DD'),
 30      address,
 31      description,
 32    };
 33    addToEvent(eventData);
 34    const result = await createEvent(eventData);
 35    if (!result) addToast(t('event.errors.cant_create'));
 36    else router.push(`/e/${result.uuid}`);
 37    setLoading(false);
 38    return;
 39  };
 40
 41  return (
 42    <form onSubmit={onCreate}>
 43      <DatePicker
 44        fullWidth
 45        label={t('event.creation.date')}
 46        value={date}
 47        onChange={setDate}
 48        format="DD/MM/YYYY"
 49        cancelLabel={t('generic.cancel')}
 50        clearable
 51        clearLabel={t('generic.clear')}
 52        id="NewEventDate"
 53      />
 54      <TextField
 55        label={t('event.creation.address')}
 56        fullWidth
 57        multiline
 58        rowsMax={4}
 59        inputProps={{maxLength: 250}}
 60        helperText={`${address.length}/250`}
 61        value={address}
 62        onChange={e => setAddress(e.target.value)}
 63        name="address"
 64        id="NewEventAddress"
 65      />
 66      <TextField
 67        label={t('event.creation.description')}
 68        fullWidth
 69        multiline
 70        rowsMax={4}
 71        inputProps={{maxLength: 250}}
 72        helperText={
 73          description.length === 0
 74            ? t('event.creation.description_helper')
 75            : `${description.length}/250`
 76        }
 77        value={description}
 78        onChange={e => setDescription(e.target.value)}
 79        name="address"
 80        id="NewEventDescription"
 81      />
 82      <Button
 83        disabled={loading}
 84        className={classes.button}
 85        variant="contained"
 86        color="secondary"
 87        fullWidth
 88        type="submit"
 89        id="NewEventSubmit"
 90      >
 91        {loading ? (
 92          <CircularProgress size={20} color="primary" />
 93        ) : (
 94          t('generic.create')
 95        )}
 96      </Button>
 97    </form>
 98  );
 99};
100
101const useStyles = makeStyles(theme => ({
102  button: {
103    marginTop: theme.spacing(2),
104  },
105}));
106
107export default Step2;