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 const idPrefix = isEditing ? 'EditEvent' : 'Event';
28
29 return (
30 <ThemeProvider theme={theme}>
31 <div className={classes.container}>
32 <div className={classes.section}>
33 {isEditing && (
34 <div className={classes.section}>
35 <Typography variant="h6">{t('event.fields.name')}</Typography>
36 <TextField
37 defaultValue={event.name}
38 value={editingEvent.name}
39 onChange={e =>
40 setEditingEvent({...editingEvent, name: e.target.value})
41 }
42 fullWidth
43 id="EditEventName"
44 name="name"
45 />
46 </div>
47 )}
48 <Typography variant="h6">{t('event.fields.starts_on')}</Typography>
49 {isEditing ? (
50 <DatePicker
51 value={
52 editingEvent.date
53 ? moment(editingEvent.date)
54 : event.date
55 ? moment(event.date)
56 : null
57 }
58 onChange={date =>
59 setEditingEvent({...editingEvent, date: date?.toISOString()})
60 }
61 fullWidth
62 format="DD.MM.YYYY"
63 disablePast
64 id={`${idPrefix}Date`}
65 name="date"
66 TextFieldComponent={p => <TextField {...p} />}
67 cancelLabel={t('generic.cancel')}
68 />
69 ) : (
70 <Typography variant="body1" id={`${idPrefix}Date`}>
71 {moment(event.date).format('DD.MM.YYYY') ||
72 t('event.fields.empty')}
73 </Typography>
74 )}
75 </div>
76 <div className={classes.section}>
77 <Typography variant="h6">{t('event.fields.address')}</Typography>
78 {isEditing ? (
79 <TextField
80 defaultValue={event.address}
81 value={editingEvent.address}
82 onChange={e =>
83 setEditingEvent({...editingEvent, address: e.target.value})
84 }
85 fullWidth
86 multiline
87 rows={4}
88 id={`${idPrefix}Address`}
89 name="address"
90 />
91 ) : (
92 <Typography variant="body1" id={`${idPrefix}Address`}>
93 {event.address ? (
94 <Link
95 target="_blank"
96 rel="noreferrer"
97 href={`https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(
98 event.address
99 )}`}
100 onClick={e => e.preventDefault}
101 >
102 {event.address}
103 </Link>
104 ) : (
105 t('event.fields.empty')
106 )}
107 </Typography>
108 )}
109 </div>
110 <div className={classes.actions}>
111 <Button onClick={toggleDetails} variant="contained" id={`CarFindBtn`}>
112 {t('event.actions.find_car')}
113 </Button>
114 </div>
115 </div>
116 </ThemeProvider>
117 );
118};
119
120const useStyles = makeStyles(theme => ({
121 container: {
122 marginBottom: theme.spacing(12),
123 },
124 section: {
125 marginBottom: theme.spacing(2),
126 },
127 actions: {
128 display: 'flex',
129 justifyContent: 'center',
130 marginTop: theme.spacing(4),
131 },
132 map: {
133 marginTop: theme.spacing(4),
134 },
135 seeOnGMapButton: {
136 marginLeft: theme.spacing(2),
137 },
138}));
139
140export default EventDetails;