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 = event => {
45 if (event.preventDefault) event.preventDefault();
46 addToEvent({name, email});
47 nextStep();
48 return false;
49 };
50
51 return (
52 <>
53 <Paper {...props}>
54 <form onSubmit={onNext}>
55 <TextField
56 className={classes.textField}
57 label={t('event.creation.event_name')}
58 fullWidth
59 autoFocus
60 margin="dense"
61 value={name}
62 onChange={e => setName(e.target.value)}
63 id="NewEventName"
64 name="name"
65 />
66 <TextField
67 className={classes.textField}
68 label={t('event.creation.creator_email')}
69 fullWidth
70 margin="dense"
71 value={email}
72 onChange={e => setEmail(e.target.value)}
73 id="NewEventEmail"
74 name="email"
75 type="email"
76 />
77 <div className={classes.tos}>
78 <Checkbox
79 name="tos"
80 id="NewEventTos"
81 checked={tos}
82 onChange={e => setTos(e.target.checked)}
83 />
84 <Typography
85 component="a"
86 role="button"
87 variant="caption"
88 onClick={toggleTos}
89 tabIndex="0"
90 onKeyPress={({charCode}) => {
91 if (charCode && (charCode === 32 || charCode === 13))
92 toggleTos();
93 }}
94 >
95 {t('event.creation.tos')}
96 </Typography>
97 </div>
98 <Button
99 className={classes.button}
100 type="submit"
101 variant="contained"
102 color="secondary"
103 fullWidth
104 disabled={!canSubmit}
105 aria-disabled={!canSubmit}
106 >
107 {t('event.creation.next')}
108 </Button>
109 </form>
110 </Paper>
111 <TosDialog open={showTos} toggle={toggleTos} />
112 </>
113 );
114};
115
116const useStyles = makeStyles(theme => ({
117 textField: {},
118 button: {
119 marginTop: theme.spacing(2),
120 },
121 tos: {
122 cursor: 'pointer',
123 marginTop: theme.spacing(2),
124 display: 'flex',
125 alignItems: 'center',
126 marginLeft: '-11px',
127 },
128}));
129
130export default Step1;