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