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