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}
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={editingEvent.date ? moment(editingEvent.date) : null}
40 onChange={date =>
41 setEditingEvent({...editingEvent, date: date?.toISOString()})
42 }
43 className={classes.textField}
44 fullWidth
45 format="DD.MM.YYYY"
46 disablePast
47 id={`${idPrefix}Date`}
48 name="date"
49 TextFieldComponent={p => <TextField light {...p} />}
50 cancelLabel={t('generic.cancel')}
51 />
52 ) : (
53 <Typography variant="body1" id={`${idPrefix}Date`}>
54 {event.date || t('event.fields.empty')}
55 </Typography>
56 )}
57 </div>
58 <div className={classes.section}>
59 <Typography variant="h6">
60 {t('event.fields.address')}
61 {!isEditing && event.address && (
62 <Button
63 href={`https://www.google.ch/maps/place/${encodeURI(
64 'event.address'
65 )}`}
66 size="small"
67 color="primary"
68 className={classes.seeOnGMapButton}
69 id="SeeOnGoogleMap"
70 >
71 {t('event.actions.see_on_gmap')}
72 </Button>
73 )}
74 </Typography>
75 {isEditing ? (
76 <TextField
77 light
78 multiline
79 rows={4}
80 value={editingEvent.address}
81 onChange={e =>
82 setEditingEvent({...editingEvent, address: e.target.value})
83 }
84 id={`${idPrefix}Address`}
85 name="address"
86 />
87 ) : (
88 <Typography variant="body1" id={`${idPrefix}Address`}>
89 {event.address || t('event.fields.empty')}
90 </Typography>
91 )}
92 </div>
93 <div className={classes.actions}>
94 <Button onClick={toggleDetails} variant="contained" id={`CarFindBtn`}>
95 {t('event.actions.find_car')}
96 </Button>
97 </div>
98 {event.position && (
99 <div className={classes.map} id={`${idPrefix}AddressMap`}>
100 <Map position={event.position} />
101 </div>
102 )}
103 </div>
104 );
105};
106
107const useStyles = makeStyles(theme => ({
108 section: {
109 marginBottom: theme.spacing(2),
110 },
111 actions: {
112 display: 'flex',
113 justifyContent: 'center',
114 marginTop: theme.spacing(4),
115 },
116 map: {
117 marginTop: theme.spacing(4),
118 },
119 seeOnGMapButton: {
120 marginLeft: theme.spacing(2),
121 },
122}));
123
124export default EventDetails;