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;