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 label={t('event.creation.date')}
48 value={date}
49 onChange={setDate}
50 />
51 <TextField
52 label={t('event.creation.address')}
53 fullWidth
54 multiline
55 variant="standard"
56 maxRows={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 <TextField
65 label={t('event.creation.description')}
66 fullWidth
67 multiline
68 variant="standard"
69 maxRows={4}
70 inputProps={{maxLength: 250}}
71 helperText={
72 description.length === 0
73 ? t('event.creation.description_helper')
74 : `${description.length}/250`
75 }
76 value={description}
77 onChange={e => setDescription(e.target.value)}
78 name="address"
79 id="NewEventDescription"
80 />
81 <Button
82 disabled={loading}
83 sx={{marginTop: theme.spacing(2)}}
84 variant="contained"
85 color="secondary"
86 fullWidth
87 type="submit"
88 id="NewEventSubmit"
89 >
90 {loading ? (
91 <CircularProgress size={20} color="primary" />
92 ) : (
93 t('generic.create')
94 )}
95 </Button>
96 </Box>
97 );
98};
99
100export default Step2;