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 {isEditing && (
23 <div className={classes.section}>
24 <Typography variant="h6">{t('event.fields.name')}</Typography>
25 <TextField
26 light
27 value={editingEvent.name ?? event.name}
28 onChange={e =>
29 setEditingEvent({...editingEvent, name: e.target.value})
30 }
31 id="EditEventName"
32 name="name"
33 />
34 </div>
35 )}
36 <Typography variant="h6">{t('event.fields.starts_on')}</Typography>
37 {isEditing ? (
38 <DatePicker
39 value={
40 editingEvent.date ? moment(editingEvent.date) : moment(event.date)
41 }
42 onChange={date =>
43 setEditingEvent({...editingEvent, date: date.toISOString()})
44 }
45 className={classes.textField}
46 fullWidth
47 format="DD.MM.YYYY"
48 disablePast
49 id={`${idPrefix}Date`}
50 name="date"
51 TextFieldComponent={p => <TextField light {...p} />}
52 />
53 ) : (
54 <Typography variant="body1" id={`${idPrefix}Date`}>
55 {event.date || t('event.fields.empty')}
56 </Typography>
57 )}
58 </div>
59 <div className={classes.section}>
60 <Typography variant="h6">{t('event.fields.address')}</Typography>
61 {isEditing ? (
62 <TextField
63 light
64 multiline
65 rows={4}
66 value={editingEvent.address ?? event.address}
67 onChange={e =>
68 setEditingEvent({...editingEvent, address: e.target.value})
69 }
70 id={`${idPrefix}Address`}
71 name="address"
72 />
73 ) : (
74 <Typography variant="body1" id={`${idPrefix}Address`}>
75 {event.address || t('event.fields.empty')}
76 </Typography>
77 )}
78 </div>
79 <div className={classes.actions}>
80 <Button onClick={toggleDetails} variant="contained" id={`CarFindBtn`}>
81 {t('event.actions.find_car')}
82 </Button>
83 </div>
84 {event.position && (
85 <div className={classes.map} id={`${idPrefix}AddressMap`}>
86 <Map position={event.position} />
87 </div>
88 )}
89 </div>
90 );
91};
92
93const useStyles = makeStyles(theme => ({
94 section: {
95 marginBottom: theme.spacing(2),
96 },
97 actions: {
98 display: 'flex',
99 justifyContent: 'center',
100 marginTop: theme.spacing(4),
101 },
102 map: {
103 marginTop: theme.spacing(4),
104 },
105}));
106
107export default EventDetails;