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 {useTheme} from '@mui/material/styles';
6import {useRouter} from 'next/router';
7import {Box, CircularProgress} from '@mui/material';
8import {DatePicker} from '@mui/x-date-pickers/DatePicker';
9import {useTranslation} from 'react-i18next';
10import useToastStore from '../../stores/useToastStore';
11
12const Step2 = ({event, addToEvent, createEvent}) => {
13 const {t} = useTranslation();
14 const theme = useTheme();
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 <Box component="form" onSubmit={onCreate}>
43 <DatePicker
44 renderInput={props => (
45 <TextField {...props} fullWidth variant="standard" />
46 )}
47 inputFormat="DD/MM/yyyy"
48 label={t('event.creation.date')}
49 value={date}
50 onChange={setDate}
51 />
52 <TextField
53 label={t('event.creation.address')}
54 fullWidth
55 multiline
56 variant="standard"
57 maxRows={4}
58 inputProps={{maxLength: 250}}
59 helperText={`${address.length}/250`}
60 value={address}
61 onChange={e => setAddress(e.target.value)}
62 name="address"
63 id="NewEventAddress"
64 />
65 <TextField
66 label={t('event.creation.description')}
67 fullWidth
68 multiline
69 variant="standard"
70 maxRows={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 sx={{marginTop: theme.spacing(2)}}
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 </Box>
98 );
99};
100
101export default Step2;