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 {caroster} from '../../theme';
12
13const theme = createMuiTheme({
14 ...caroster,
15 palette: {
16 ...caroster.palette,
17 type: 'dark',
18 },
19});
20
21const EventDetails = ({toggleDetails}) => {
22 const {t} = useTranslation();
23 const classes = useStyles();
24 const {event, isEditing, setEditingEvent, editingEvent} = useEvent();
25
26 if (!event) return null;
27
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 format="DD.MM.YYYY"
63 TextFieldComponent={p => <TextField {...p} />}
64 minDateMessage={t('generic.errors.date_min')}
65 cancelLabel={t('generic.cancel')}
66 name="date"
67 disablePast
68 fullWidth
69 id={`${idPrefix}Date`}
70 />
71 ) : (
72 <Typography variant="body1" id={`${idPrefix}Date`}>
73 {event.date
74 ? moment(event.date).format('DD.MM.YYYY')
75 : t('event.fields.empty')}
76 </Typography>
77 )}
78 </div>
79 <div className={classes.section}>
80 <Typography variant="h6">{t('event.fields.address')}</Typography>
81 {isEditing ? (
82 <TextField
83 defaultValue={event.address}
84 value={editingEvent.address}
85 onChange={e =>
86 setEditingEvent({...editingEvent, address: e.target.value})
87 }
88 fullWidth
89 multiline
90 rows={4}
91 id={`${idPrefix}Address`}
92 name="address"
93 />
94 ) : (
95 <Typography variant="body1" id={`${idPrefix}Address`}>
96 {event.address ? (
97 <Link
98 target="_blank"
99 rel="noreferrer"
100 href={`https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(
101 event.address
102 )}`}
103 onClick={e => e.preventDefault}
104 >
105 {event.address}
106 </Link>
107 ) : (
108 t('event.fields.empty')
109 )}
110 </Typography>
111 )}
112 </div>
113 <div className={classes.actions}>
114 <Button onClick={toggleDetails} variant="outlined" id={`CarFindBtn`}>
115 {t('event.actions.find_car')}
116 </Button>
117 </div>
118 </div>
119 </ThemeProvider>
120 );
121};
122
123const useStyles = makeStyles(theme => ({
124 container: {
125 marginBottom: theme.spacing(12),
126 },
127 section: {
128 marginBottom: theme.spacing(2),
129 },
130 actions: {
131 display: 'flex',
132 justifyContent: 'center',
133 marginTop: theme.spacing(4),
134 },
135 map: {
136 marginTop: theme.spacing(4),
137 },
138 seeOnGMapButton: {
139 marginLeft: theme.spacing(2),
140 },
141}));
142
143export default EventDetails;