frontend/containers/CreateEvent/Step2.tsx (view raw)
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 'next-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;