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">{t('event.fields.address')}</Typography>
60 {isEditing ? (
61 <TextField
62 light
63 multiline
64 rows={4}
65 value={editingEvent.address}
66 onChange={e =>
67 setEditingEvent({...editingEvent, address: e.target.value})
68 }
69 id={`${idPrefix}Address`}
70 name="address"
71 />
72 ) : (
73 <Typography variant="body1" id={`${idPrefix}Address`}>
74 {event.address || t('event.fields.empty')}
75 </Typography>
76 )}
77 </div>
78 <div className={classes.actions}>
79 <Button onClick={toggleDetails} variant="contained" id={`CarFindBtn`}>
80 {t('event.actions.find_car')}
81 </Button>
82 </div>
83 {event.position && (
84 <div className={classes.map} id={`${idPrefix}AddressMap`}>
85 <Map position={event.position} />
86 </div>
87 )}
88 </div>
89 );
90};
91
92const useStyles = makeStyles(theme => ({
93 section: {
94 marginBottom: theme.spacing(2),
95 },
96 actions: {
97 display: 'flex',
98 justifyContent: 'center',
99 marginTop: theme.spacing(4),
100 },
101 map: {
102 marginTop: theme.spacing(4),
103 },
104}));
105
106export default EventDetails;