app/src/containers/EventDetails/index.js (view raw)
1import React from 'react';
2import Typography from '@material-ui/core/Typography';
3import Button from '@material-ui/core/Button';
4import Link from '@material-ui/core/Link';
5import {DatePicker} from '@material-ui/pickers';
6import TextField from '@material-ui/core/TextField';
7import {makeStyles, createMuiTheme, ThemeProvider} from '@material-ui/core';
8import {useTranslation} from 'react-i18next';
9import moment from 'moment';
10import {useEvent} from '../../contexts/Event';
11import Map from '../../components/Map';
12import {caroster} from '../../theme';
13
14const theme = createMuiTheme({
15 ...caroster,
16 palette: {
17 ...caroster.palette,
18 type: 'dark',
19 },
20});
21
22const EventDetails = ({toggleDetails}) => {
23 const {t} = useTranslation();
24 const classes = useStyles();
25 const {event, isEditing, setEditingEvent, editingEvent} = useEvent();
26
27 if (!event) return null;
28 const idPrefix = isEditing ? 'EditEvent' : 'Event';
29
30 return (
31 <ThemeProvider theme={theme}>
32 <div className={classes.container}>
33 <div className={classes.section}>
34 {isEditing && (
35 <div className={classes.section}>
36 <Typography variant="h6">{t('event.fields.name')}</Typography>
37 <TextField
38 defaultValue={event.name}
39 value={editingEvent.name}
40 onChange={e =>
41 setEditingEvent({...editingEvent, name: e.target.value})
42 }
43 fullWidth
44 id="EditEventName"
45 name="name"
46 />
47 </div>
48 )}
49 <Typography variant="h6">{t('event.fields.starts_on')}</Typography>
50 {isEditing ? (
51 <DatePicker
52 value={
53 editingEvent.date
54 ? moment(editingEvent.date)
55 : event.date
56 ? moment(event.date)
57 : null
58 }
59 onChange={date =>
60 setEditingEvent({...editingEvent, date: date?.toISOString()})
61 }
62 fullWidth
63 format="DD.MM.YYYY"
64 disablePast
65 id={`${idPrefix}Date`}
66 name="date"
67 TextFieldComponent={p => <TextField {...p} />}
68 cancelLabel={t('generic.cancel')}
69 />
70 ) : (
71 <Typography variant="body1" id={`${idPrefix}Date`}>
72 {moment(event.date).format('DD.MM.YYYY') ||
73 t('event.fields.empty')}
74 </Typography>
75 )}
76 </div>
77 <div className={classes.section}>
78 <Typography variant="h6">{t('event.fields.address')}</Typography>
79 {isEditing ? (
80 <TextField
81 defaultValue={event.address}
82 value={editingEvent.address}
83 onChange={e =>
84 setEditingEvent({...editingEvent, address: e.target.value})
85 }
86 fullWidth
87 multiline
88 rows={4}
89 id={`${idPrefix}Address`}
90 name="address"
91 />
92 ) : (
93 <Typography variant="body1" id={`${idPrefix}Address`}>
94 {event.address ? (
95 <Link
96 href={`https://maps.google.com/?q=${encodeURI(
97 event.address
98 )}`}
99 rel="noopener noreferrer"
100 component="a"
101 target="_blank"
102 >
103 {event.address}
104 </Link>
105 ) : (
106 t('event.fields.empty')
107 )}
108 </Typography>
109 )}
110 </div>
111 <div className={classes.actions}>
112 <Button onClick={toggleDetails} variant="contained" id={`CarFindBtn`}>
113 {t('event.actions.find_car')}
114 </Button>
115 </div>
116 {event.position && (
117 <div className={classes.map} id={`${idPrefix}AddressMap`}>
118 <Map position={event.position} />
119 </div>
120 )}
121 </div>
122 </ThemeProvider>
123 );
124};
125
126const useStyles = makeStyles(theme => ({
127 container: {
128 marginBottom: theme.spacing(12),
129 },
130 section: {
131 marginBottom: theme.spacing(2),
132 },
133 actions: {
134 display: 'flex',
135 justifyContent: 'center',
136 marginTop: theme.spacing(4),
137 },
138 map: {
139 marginTop: theme.spacing(4),
140 },
141 seeOnGMapButton: {
142 marginLeft: theme.spacing(2),
143 },
144}));
145
146export default EventDetails;