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 <Typography variant="h6">{t('event.fields.link')}</Typography>
102 <Typography>{t('event.fields.link_desc')}</Typography>
103 <TextField
104 value={window.location.href}
105 inputProps={{
106 ref: shareInput,
107 }}
108 InputProps={{disableUnderline: true}}
109 onFocus={() => {
110 if (shareInput) shareInput.current.select();
111 }}
112 fullWidth
113 readOnly
114 name="eventShareLink"
115 id="ShareLink"
116 />
117
118 <Button
119 className={'tour_event_share'}
120 variant="outlined"
121 startIcon={<Icon>share</Icon>}
122 onClick={() => {
123 if (shareInput) shareInput.current.select();
124 onShare();
125 }}
126 >
127 {t('event.fields.share')}
128 </Button>
129 </Box>
130 </ThemeProvider>
131 );
132};
133
134const theme = createMuiTheme({
135 ...caroster,
136 palette: {
137 ...caroster.palette,
138 type: 'dark',
139 },
140});
141
142const useStyles = makeStyles(theme => ({
143 container: {
144 padding: theme.spacing(2, 9),
145 marginBottom: theme.spacing(12),
146
147 [theme.breakpoints.down('xs')]: {
148 padding: theme.spacing(2),
149 },
150 },
151 section: {
152 marginBottom: theme.spacing(2),
153 },
154 map: {
155 marginTop: theme.spacing(4),
156 },
157 seeOnGMapButton: {
158 marginLeft: theme.spacing(2),
159 },
160}));
161
162export default EventDetails;