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