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