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