app/src/containers/CreateEvent/Step1.js (view raw)
1import React, {useState, useEffect, 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 Checkbox from '@material-ui/core/Checkbox';
6import FormControlLabel from '@material-ui/core/FormControlLabel';
7import {useTranslation} from 'react-i18next';
8import useDebounce from '../../hooks/useDebounce';
9import Paper from '../../components/Paper';
10
11const isValidEmail = email =>
12 // eslint-disable-next-line
13 /^(([^<>()\[\]\\.,;:\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(
14 email
15 );
16
17const Step1 = ({
18 nextStep,
19 previousStep,
20 createEvent,
21 event,
22 addToEvent,
23 ...props
24}) => {
25 const classes = useStyles();
26 const {t} = useTranslation();
27
28 // States
29 const [name, setName] = useState(event.name ?? '');
30 const [email, setEmail] = useState(event.email ?? '');
31 const [emailIsValid, setEmailIsValid] = useState(false);
32 const [newsletter, setNewsletter] = useState(false);
33 const debouncedEmail = useDebounce(email, 400);
34 const canSubmit = useMemo(
35 () => name.length > 0 && email.length > 0 && emailIsValid,
36 [name, email, emailIsValid]
37 );
38 useEffect(() => {
39 setEmailIsValid(isValidEmail(debouncedEmail));
40 }, [debouncedEmail]);
41
42 const onNext = event => {
43 if (event.preventDefault) event.preventDefault();
44 addToEvent({name, email, newsletter});
45 nextStep();
46 return false;
47 };
48
49 return (
50 <Paper {...props}>
51 <form onSubmit={onNext}>
52 <TextField
53 className={classes.textField}
54 label={t('event.creation.event_name')}
55 fullWidth
56 autoFocus
57 margin="dense"
58 value={name}
59 onChange={e => setName(e.target.value)}
60 id="NewEventName"
61 name="name"
62 />
63 <TextField
64 className={classes.textField}
65 label={t('event.creation.creator_email')}
66 fullWidth
67 margin="dense"
68 value={email}
69 onChange={e => setEmail(e.target.value)}
70 id="NewEventEmail"
71 name="email"
72 type="email"
73 />
74 <FormControlLabel
75 className={classes.newsletter}
76 label={t('event.creation.newsletter')}
77 control={
78 <Checkbox
79 name="newsletter"
80 id="NewEventNewsletter"
81 checked={newsletter}
82 onChange={e => setNewsletter(e.target.checked)}
83 />
84 }
85 />
86 <Button
87 className={classes.button}
88 type="submit"
89 variant="contained"
90 color="secondary"
91 fullWidth
92 disabled={!canSubmit}
93 aria-disabled={!canSubmit}
94 >
95 {t('event.creation.next')}
96 </Button>
97 </form>
98 </Paper>
99 );
100};
101
102const useStyles = makeStyles(theme => ({
103 textField: {},
104 button: {
105 marginTop: theme.spacing(2),
106 },
107 newsletter: {
108 marginTop: theme.spacing(2),
109 },
110}));
111
112export default Step1;