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 const idPrefix = isEditing ? "EditEvent" : "Event";
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={`${idPrefix}Date`}
36 name="date"
37 TextFieldComponent={(p) => <TextField light {...p} />}
38 />
39 ) : (
40 <Typography variant="body1" id={`${idPrefix}Date`}>
41 {event.date}
42 </Typography>
43 )}
44 </div>
45 <div className={classes.section}>
46 <Typography variant="h6">{t("event.fields.address")}</Typography>
47 {isEditing ? (
48 <TextField
49 light
50 multiline
51 rows={4}
52 value={editingEvent.address ?? event.address}
53 onChange={(e) =>
54 setEditingEvent({ ...editingEvent, address: e.target.value })
55 }
56 id={`${idPrefix}Address`}
57 name="address"
58 />
59 ) : (
60 <Typography variant="body1" id={`${idPrefix}Address`}>
61 {event.address}
62 </Typography>
63 )}
64 </div>
65 <div className={classes.actions}>
66 <Button onClick={toggleDetails} variant="contained" id={`CarFindBtn`}>
67 {t("event.actions.find_car")}
68 </Button>
69 </div>
70 {event.position && (
71 <div className={classes.map} id={`${idPrefix}AddressMap`}>
72 <Map position={event.position} />
73 </div>
74 )}
75 </div>
76 );
77};
78
79const useStyles = makeStyles((theme) => ({
80 section: {
81 marginBottom: theme.spacing(2),
82 },
83 actions: {
84 display: "flex",
85 justifyContent: "center",
86 marginTop: theme.spacing(4),
87 },
88 map: {
89 marginTop: theme.spacing(4),
90 },
91}));
92
93export default EventDetails;