all repos — caroster @ 6793873dc979591e3f4dabc03542b1b53977c905

[Octree] Group carpool to your event https://caroster.io

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;