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