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 />
46 <TextField
47 className={classes.textField}
48 label={t('event.creation.address')}
49 fullWidth
50 margin="dense"
51 multiline
52 rows={4}
53 value={address}
54 onChange={e => setAddress(e.target.value)}
55 id="NewEventAddress"
56 name="address"
57 />
58 <Button
59 className={classes.button}
60 variant="contained"
61 color="secondary"
62 fullWidth
63 type="submit"
64 id="NewEventSubmit"
65 >
66 {t('generic.create')}
67 </Button>
68 </form>
69 </Paper>
70 );
71};
72
73const useStyles = makeStyles(theme => ({
74 textField: {},
75 button: {
76 marginTop: theme.spacing(2),
77 },
78}));
79
80export default Step2;