app/src/containers/CreateEvent/Step2.js (view raw)
1import React, {useState} from 'react';
2import {makeStyles} from '@material-ui/core/styles';
3import TextField from '@material-ui/core/TextField';
4import Button from '@material-ui/core/Button';
5import {CircularProgress} from '@material-ui/core';
6import {DatePicker} from '@material-ui/pickers';
7import {useTranslation} from 'react-i18next';
8import moment from 'moment';
9import {useHistory} from 'react-router-dom';
10import {useToast} from '../../contexts/Toast';
11
12const Step2 = ({event, addToEvent, createEvent}) => {
13 const classes = useStyles();
14 const {t} = useTranslation();
15 const history = useHistory();
16 const {addToast} = useToast();
17
18 // States
19 const [date, setDate] = useState(!!event.date ? moment(event.date) : null);
20 const [address, setAddress] = useState(event.address ?? '');
21 const [loading, setLoading] = useState(false);
22
23 const onCreate = async evt => {
24 if (evt.preventDefault) evt.preventDefault();
25 if (loading) return false;
26 setLoading(true);
27 const eventData = {date: date?.toISOString(), address};
28 addToEvent(eventData);
29 const result = await createEvent(eventData);
30 if (!result) addToast(t('event.errors.cant_create'));
31 else history.push(`/e/${result.id}`);
32 setLoading(false);
33 return false;
34 };
35
36 return (
37 <form onSubmit={onCreate}>
38 <DatePicker
39 label={t('event.creation.date')}
40 value={date}
41 onChange={setDate}
42 fullWidth
43 format="DD.MM.YYYY"
44 disablePast
45 id="NewEventDate"
46 name="date"
47 cancelLabel={t('generic.cancel')}
48 />
49 <TextField
50 label={t('event.creation.address')}
51 fullWidth
52 margin="dense"
53 multiline
54 rows={4}
55 value={address}
56 onChange={e => setAddress(e.target.value)}
57 id="NewEventAddress"
58 name="address"
59 />
60 <Button
61 disabled={loading}
62 className={classes.button}
63 variant="contained"
64 color="secondary"
65 fullWidth
66 type="submit"
67 id="NewEventSubmit"
68 >
69 {loading ? (
70 <CircularProgress
71 className={classes.loader}
72 size={20}
73 color="primary"
74 />
75 ) : (
76 t('generic.create')
77 )}
78 </Button>
79 </form>
80 );
81};
82
83const useStyles = makeStyles(theme => ({
84 button: {
85 marginTop: theme.spacing(2),
86 },
87}));
88
89export default Step2;