frontend/containers/AddToMyEventDialog/index.js (view raw)
1import React, {useState} from 'react';
2import Dialog from '@material-ui/core/Dialog';
3import DialogTitle from '@material-ui/core/DialogTitle';
4import DialogActions from '@material-ui/core/DialogActions';
5import DialogContent from '@material-ui/core/DialogContent';
6import {makeStyles} from '@material-ui/core/styles';
7import DialogContentText from '@material-ui/core/DialogContentText';
8import Icon from '@material-ui/core/Icon';
9import Slide from '@material-ui/core/Slide';
10import Button from '@material-ui/core/Button';
11import IconButton from '@material-ui/core/IconButton';
12import {useTranslation} from 'react-i18next';
13import {Redirect} from 'react-router-dom';
14
15const Transition = React.forwardRef(function Transition(props, ref) {
16 return <Slide direction="up" ref={ref} {...props} />;
17});
18
19const AddToMyEventDialog = ({event, open, onClose}) => {
20 const {t} = useTranslation();
21 const [redirectTo, setRedirectTo] = useState(null);
22 const classes = useStyles();
23 if (!event) return null;
24
25 if (redirectTo) {
26 return (
27 <Redirect push to={{pathname: redirectTo, state: {event: event.id}}} />
28 );
29 }
30
31 return (
32 <Dialog open={open} TransitionComponent={Transition} onClose={onClose}>
33 <IconButton onClick={onClose} className={classes.close}>
34 <Icon>close</Icon>
35 </IconButton>
36 <DialogTitle>
37 {t('event.add_to_my_events.title', {eventName: event.name})}
38 </DialogTitle>
39 <DialogContent>
40 <DialogContentText
41 dangerouslySetInnerHTML={{
42 __html: t('event.add_to_my_events.text_html', {
43 eventName: event.name,
44 }),
45 }}
46 />
47 </DialogContent>
48 <DialogActions>
49 <Button id="AddToMyEventLogin" onClick={() => setRedirectTo('/login')}>
50 {t('event.add_to_my_events.login')}
51 </Button>
52 <Button
53 id="AddToMyEventRegister"
54 onClick={() => setRedirectTo('/register')}
55 color="primary"
56 >
57 {t('event.add_to_my_events.register')}
58 </Button>
59 </DialogActions>
60 </Dialog>
61 );
62};
63
64const useStyles = makeStyles(theme => ({
65 close: {
66 position: 'absolute',
67 top: theme.spacing(1),
68 right: theme.spacing(0.5),
69 },
70}));
71export default AddToMyEventDialog;