app/src/containers/CreateEvent/Step2.js (view raw)
1import React, { useState } from "react";
2import Paper from "@material-ui/core/Paper";
3import { makeStyles } from "@material-ui/core/styles";
4import TextField from "@material-ui/core/TextField";
5import Button from "@material-ui/core/Button";
6import { useTranslation } from "react-i18next";
7import { DatePicker } from "@material-ui/pickers";
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
22 const onCreate = async () => {
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 };
29
30 return (
31 <Paper className={classes.container}>
32 <DatePicker
33 label={t("event.creation.date")}
34 value={date}
35 onChange={setDate}
36 className={classes.textField}
37 fullWidth
38 format="DD.MM.YYYY"
39 disablePast
40 />
41 <TextField
42 className={classes.textField}
43 label={t("event.creation.address")}
44 fullWidth
45 margin="dense"
46 multiline
47 rows={4}
48 value={address}
49 onChange={(e) => setAddress(e.target.value)}
50 />
51 <Button
52 className={classes.button}
53 variant="contained"
54 color="secondary"
55 fullWidth
56 onClick={onCreate}
57 >
58 {t("event.creation.create")}
59 </Button>
60 </Paper>
61 );
62};
63
64const useStyles = makeStyles((theme) => ({
65 container: {
66 padding: theme.spacing(2),
67 },
68 textField: {},
69 button: {
70 marginTop: theme.spacing(2),
71 },
72}));
73
74export default Step2;