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