frontend/containers/AddToMyEventDialog/index.tsx (view raw)
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;