app/src/containers/EventDetails/index.js (view raw)
1import React from "react";
2import Typography from "@material-ui/core/Typography";
3import TextField from "../../components/TextField";
4import moment from "moment";
5import { useEvent } from "../../contexts/Event";
6import { useTranslation } from "react-i18next";
7import { makeStyles } from "@material-ui/core";
8import Button from "@material-ui/core/Button";
9import { DatePicker } from "@material-ui/pickers";
10import Map from "../../components/Map";
11
12const EventDetails = ({ toggleDetails }) => {
13 const { t } = useTranslation();
14 const classes = useStyles();
15 const { event, isEditing, setEditingEvent, editingEvent } = useEvent();
16
17 if (!event) return null;
18
19 return (
20 <div>
21 <div className={classes.section}>
22 <Typography variant="h6">{t("event.fields.starts_on")}</Typography>
23 {isEditing ? (
24 <DatePicker
25 value={
26 editingEvent.date ? moment(editingEvent.date) : moment(event.date)
27 }
28 onChange={(date) =>
29 setEditingEvent({ ...editingEvent, date: date.toISOString() })
30 }
31 className={classes.textField}
32 fullWidth
33 format="DD.MM.YYYY"
34 disablePast
35 id="UpdateEventDate"
36 name="date"
37 TextFieldComponent={(p) => <TextField light {...p} />}
38 />
39 ) : (
40 <Typography variant="body1">{event.date}</Typography>
41 )}
42 </div>
43 <div className={classes.section}>
44 <Typography variant="h6">{t("event.fields.address")}</Typography>
45 {isEditing ? (
46 <TextField
47 light
48 multiline
49 rows={4}
50 value={editingEvent.address ?? event.address}
51 onChange={(e) =>
52 setEditingEvent({ ...editingEvent, address: e.target.value })
53 }
54 id="UpdateEventAddress"
55 name="address"
56 />
57 ) : (
58 <Typography variant="body1">{event.address}</Typography>
59 )}
60 </div>
61 <div className={classes.actions}>
62 <Button onClick={toggleDetails} variant="contained">
63 {t("event.actions.find_car")}
64 </Button>
65 </div>
66 {event.position && (
67 <div className={classes.map}>
68 <Map position={event.position} />
69 </div>
70 )}
71 </div>
72 );
73};
74
75const useStyles = makeStyles((theme) => ({
76 section: {
77 marginBottom: theme.spacing(2),
78 },
79 actions: {
80 display: "flex",
81 justifyContent: "center",
82 marginTop: theme.spacing(4),
83 },
84 map: {
85 marginTop: theme.spacing(4),
86 },
87}));
88
89export default EventDetails;