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