app/src/containers/CreateEvent/Step1.js (view raw)
1import React, {useState, useEffect, useReducer, useMemo} from 'react';
2import {makeStyles} from '@material-ui/core/styles';
3import TextField from '@material-ui/core/TextField';
4import Button from '@material-ui/core/Button';
5import Typography from '@material-ui/core/Typography';
6import Checkbox from '@material-ui/core/Checkbox';
7import {useTranslation} from 'react-i18next';
8import useDebounce from '../../hooks/useDebounce';
9import Paper from '../../components/Paper';
10import TosDialog from '../TosDialog';
11
12const isValidEmail = email =>
13 // eslint-disable-next-line
14 /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
15 email
16 );
17
18const Step1 = ({
19 nextStep,
20 previousStep,
21 createEvent,
22 event,
23 addToEvent,
24 ...props
25}) => {
26 const classes = useStyles();
27 const {t} = useTranslation();
28
29 // States
30 const [name, setName] = useState(event.name ?? '');
31 const [email, setEmail] = useState(event.email ?? '');
32 const [emailIsValid, setEmailIsValid] = useState(false);
33 const [tos, setTos] = useState(false);
34 const [showTos, toggleTos] = useReducer(i => !i, false);
35 const debouncedEmail = useDebounce(email, 400);
36 const canSubmit = useMemo(
37 () => name.length > 0 && email.length > 0 && emailIsValid && tos,
38 [name, email, emailIsValid, tos]
39 );
40 useEffect(() => {
41 setEmailIsValid(isValidEmail(debouncedEmail));
42 }, [debouncedEmail]);
43
44 const onNext = () => {
45 addToEvent({name, email});
46 nextStep();
47 };
48
49 return (
50 <>
51 <Paper {...props}>
52 <form onSubmit={onNext}>
53 <TextField
54 className={classes.textField}
55 label={t('event.creation.event_name')}
56 fullWidth
57 autoFocus
58 margin="dense"
59 value={name}
60 onChange={e => setName(e.target.value)}
61 id="NewEventName"
62 name="name"
63 />
64 <TextField
65 className={classes.textField}
66 label={t('event.creation.creator_email')}
67 fullWidth
68 margin="dense"
69 value={email}
70 onChange={e => setEmail(e.target.value)}
71 id="NewEventEmail"
72 name="email"
73 type="email"
74 />
75 <div className={classes.tos}>
76 <Checkbox
77 name="tos"
78 id="NewEventTos"
79 checked={tos}
80 onChange={e => setTos(e.target.checked)}
81 />
82 <Typography
83 component="a"
84 role="button"
85 variant="caption"
86 onClick={toggleTos}
87 tabIndex="0"
88 onKeyPress={({charCode}) => {
89 if (charCode && (charCode === 32 || charCode === 13))
90 toggleTos();
91 }}
92 >
93 {t('event.creation.tos')}
94 </Typography>
95 </div>
96 <Button
97 className={classes.button}
98 type="submit"
99 variant="contained"
100 color="secondary"
101 fullWidth
102 disabled={!canSubmit}
103 aria-disabled={!canSubmit}
104 >
105 {t('event.creation.next')}
106 </Button>
107 </form>
108 </Paper>
109 <TosDialog open={showTos} toggle={toggleTos} />
110 </>
111 );
112};
113
114const useStyles = makeStyles(theme => ({
115 textField: {},
116 button: {
117 marginTop: theme.spacing(2),
118 },
119 tos: {
120 cursor: 'pointer',
121 marginTop: theme.spacing(2),
122 display: 'flex',
123 alignItems: 'center',
124 marginLeft: '-11px',
125 },
126}));
127
128export default Step1;