app/src/containers/AddToMyEventDialog/AddToMyEventDialog.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';
11const Transition = React.forwardRef(function Transition(props, ref) {
12 return <Slide direction="up" ref={ref} {...props} />;
13});
14
15const AddToMyEventDialog = ({event, open, onClose}) => {
16 const {t} = useTranslation();
17 const [redirectTo, setRedirectTo] = useState(null);
18 if (!event) return null;
19 if (redirectTo) {
20 return <Redirect push to={{path: redirectTo, state: {event: event.id}}} />;
21 }
22 return (
23 <Dialog open={open} TransitionComponent={Transition} onClose={onClose}>
24 <DialogContent>
25 <DialogTitle>
26 {t('event.add_to_my_events.title', {eventName: event.name})}
27 </DialogTitle>
28 <DialogContentText
29 dangerouslySetInnerHTML={{
30 __html: t('event.add_to_my_events.text_html', {
31 eventName: event.name,
32 }),
33 }}
34 />
35 </DialogContent>
36 <DialogActions>
37 <Button onClick={onClose} id="AddToMyEventCancel">
38 {t('event.add_to_my_events.cancel')}
39 </Button>
40 <Button id="AddToMyEventLogin" onClick={() => setRedirectTo('/login')}>
41 {t('event.add_to_my_events.login')}
42 </Button>
43 <Button
44 id="AddToMyEventRegister"
45 onClick={() => setRedirectTo('/register')}
46 color="primary"
47 >
48 {t('event.add_to_my_events.register')}
49 </Button>
50 </DialogActions>
51 </Dialog>
52 );
53};
54
55export default AddToMyEventDialog;