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