1import {useState} from 'react';
  2import moment from 'moment';
  3import TextField from '@mui/material/TextField';
  4import Button from '@mui/material/Button';
  5import CircularProgress from '@mui/material/CircularProgress';
  6import Box from '@mui/material/Box';
  7import {useTheme} from '@mui/material/styles';
  8import {useRouter} from 'next/router';
  9import {DatePicker} from '@mui/x-date-pickers/DatePicker';
 10import {useTranslation} from 'react-i18next';
 11import useToastStore from '../../stores/useToastStore';
 12import PlaceInput from '../PlaceInput';
 13import {EventEntity, EventInput} from '../../generated/graphql';
 14
 15interface Props {
 16  event: EventInput;
 17  addToEvent: (eventData: EventInput) => void;
 18  createEvent: (eventData: EventInput) => Promise<EventEntity>;
 19}
 20
 21const Step2 = ({event, addToEvent, createEvent}: Props) => {
 22  const {t} = useTranslation();
 23  const theme = useTheme();
 24  const router = useRouter();
 25  const addToast = useToastStore(s => s.addToast);
 26
 27  // States
 28  const [date, setDate] = useState(null);
 29  const [address, setAddress] = useState(event.address ?? '');
 30  const [longitude, setLongitude] = useState(event.longitude);
 31  const [latitude, setLatitude] = useState(event.latitude);
 32  const [description, setDescription] = useState(event.description ?? '');
 33  const [loading, setLoading] = useState(false);
 34
 35  const onCreate = async evt => {
 36    evt.preventDefault?.();
 37    if (loading) return;
 38    setLoading(true);
 39    const eventData = {
 40      date: date ? moment(date).format('YYYY-MM-DD') : null,
 41      address,
 42      longitude,
 43      latitude,
 44      description,
 45    };
 46    addToEvent(eventData);
 47    const result = await createEvent(eventData);
 48    if (!result) addToast(t('event.errors.cant_create'));
 49    else router.push(`/e/${result.attributes.uuid}`);
 50    setLoading(false);
 51    return;
 52  };
 53
 54  return (
 55    <Box component="form" onSubmit={onCreate}>
 56      <DatePicker
 57        slotProps={{textField: {fullWidth: true, variant: 'standard'}}}
 58        format="DD/MM/YYYY"
 59        label={t('event.creation.date')}
 60        value={date}
 61        onChange={setDate}
 62      />
 63      <PlaceInput
 64        label={t('event.creation.address')}
 65        textFieldProps={{sx: {mt: 2}}}
 66        place={address}
 67        latitude={event.latitude}
 68        longitude={event.longitude}
 69        onSelect={({place, latitude, longitude}) => {
 70          setAddress(place);
 71          setLatitude(latitude);
 72          setLongitude(longitude);
 73        }}
 74      />
 75      <TextField
 76        label={t('event.creation.description')}
 77        fullWidth
 78        multiline
 79        sx={{mt: 2}}
 80        variant="standard"
 81        maxRows={4}
 82        inputProps={{maxLength: 250}}
 83        helperText={
 84          description.length === 0
 85            ? t('event.creation.description_helper')
 86            : `${description.length}/250`
 87        }
 88        value={description}
 89        onChange={e => setDescription(e.target.value)}
 90        name="address"
 91      />
 92      <Button
 93        disabled={loading}
 94        sx={{marginTop: theme.spacing(2)}}
 95        variant="contained"
 96        color="primary"
 97        fullWidth
 98        type="submit"
 99        id="NewEventSubmit"
100      >
101        {loading ? (
102          <CircularProgress size={20} color="primary" />
103        ) : (
104          t('generic.create')
105        )}
106      </Button>
107    </Box>
108  );
109};
110
111export default Step2;