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;