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