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 classes = useStyles();
18 const event = useEventStore(s => s.event);
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
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 value={event.name}
35 onChange={e => setEventUpdate({name: e.target.value})}
36 fullWidth
37 id="EditEventName"
38 name="name"
39 />
40 </div>
41 )}
42 <Typography variant="h6">{t('event.fields.starts_on')}</Typography>
43 {isEditing ? (
44 <DatePicker
45 id={`${idPrefix}Date`}
46 fullWidth
47 label={t('event.creation.date')}
48 format="DD/MM/YYYY"
49 value={event.date}
50 onChange={date =>
51 setEventUpdate({
52 date: !date ? null : moment(date).format('YYYY-MM-DD'),
53 })
54 }
55 clearable
56 clearLabel={t('generic.clear')}
57 cancelLabel={t('generic.cancel')}
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 defaultValue={event.address}
72 value={event.address}
73 onChange={e => setEventUpdate({address: e.target.value})}
74 fullWidth
75 multiline
76 rows={4}
77 id={`${idPrefix}Address`}
78 name="address"
79 />
80 ) : (
81 <Typography variant="body1" id={`${idPrefix}Address`}>
82 {event.address ? (
83 <Link
84 target="_blank"
85 rel="noreferrer"
86 href={`https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(
87 event.address
88 )}`}
89 onClick={e => e.preventDefault}
90 >
91 {event.address}
92 </Link>
93 ) : (
94 t('event.fields.empty')
95 )}
96 </Typography>
97 )}
98 </div>
99 <Typography variant="h6">{t('event.fields.link')}</Typography>
100 <Typography>{t('event.fields.link_desc')}</Typography>
101 <TextField
102 value={window.location.href}
103 inputProps={{
104 ref: shareInput,
105 }}
106 InputProps={{disableUnderline: true}}
107 onFocus={() => {
108 if (shareInput) shareInput.current.select();
109 }}
110 fullWidth
111 readOnly
112 name="eventShareLink"
113 id="ShareLink"
114 />
115
116 <Button
117 variant="outlined"
118 startIcon={<Icon>share</Icon>}
119 onClick={() => {
120 if (shareInput) shareInput.current.select();
121 onShare();
122 }}
123 >
124 {t('event.fields.share')}
125 </Button>
126 </Box>
127 </ThemeProvider>
128 );
129};
130
131const theme = createMuiTheme({
132 ...caroster,
133 palette: {
134 ...caroster.palette,
135 type: 'dark',
136 },
137});
138
139const useStyles = makeStyles(theme => ({
140 container: {
141 padding: theme.spacing(2, 9),
142 marginBottom: theme.spacing(12),
143
144 [theme.breakpoints.down('xs')]: {
145 padding: theme.spacing(2),
146 },
147 },
148 section: {
149 marginBottom: theme.spacing(2),
150 },
151 map: {
152 marginTop: theme.spacing(4),
153 },
154 seeOnGMapButton: {
155 marginLeft: theme.spacing(2),
156 },
157}));
158
159export default EventDetails;