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