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 format="DD.MM.YYYY"
53 value={
54 editingEvent.date
55 ? moment(editingEvent.date)
56 : event.date
57 ? moment(event.date)
58 : null
59 }
60 onChange={date =>
61 setEditingEvent({
62 ...editingEvent,
63 date: moment(date).format('YYYY-MM-DD'),
64 })
65 }
66 TextFieldComponent={p => <TextField {...p} />}
67 minDateMessage={t('generic.errors.date_min')}
68 cancelLabel={t('generic.cancel')}
69 name="date"
70 disablePast
71 fullWidth
72 id={`${idPrefix}Date`}
73 />
74 ) : (
75 <Typography variant="body1" id={`${idPrefix}Date`}>
76 {event.date
77 ? moment(event.date).format('DD.MM.YYYY')
78 : t('event.fields.empty')}
79 </Typography>
80 )}
81 </div>
82 <div className={classes.section}>
83 <Typography variant="h6">{t('event.fields.address')}</Typography>
84 {isEditing ? (
85 <TextField
86 defaultValue={event.address}
87 value={editingEvent.address}
88 onChange={e =>
89 setEditingEvent({...editingEvent, address: e.target.value})
90 }
91 fullWidth
92 multiline
93 rows={4}
94 id={`${idPrefix}Address`}
95 name="address"
96 />
97 ) : (
98 <Typography variant="body1" id={`${idPrefix}Address`}>
99 {event.address ? (
100 <Link
101 target="_blank"
102 rel="noreferrer"
103 href={`https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(
104 event.address
105 )}`}
106 onClick={e => e.preventDefault}
107 >
108 {event.address}
109 </Link>
110 ) : (
111 t('event.fields.empty')
112 )}
113 </Typography>
114 )}
115 </div>
116 </div>
117 </ThemeProvider>
118 );
119};
120
121const useStyles = makeStyles(theme => ({
122 container: {
123 marginBottom: theme.spacing(12),
124 },
125 section: {
126 marginBottom: theme.spacing(2),
127 },
128 map: {
129 marginTop: theme.spacing(4),
130 },
131 seeOnGMapButton: {
132 marginLeft: theme.spacing(2),
133 },
134}));
135
136export default EventDetails;