frontend/containers/CreateEvent/Step1.js (view raw)
1import React, {useState, useEffect, useMemo} from 'react';
2import {makeStyles} from '@material-ui/core/styles';
3import Typography from '@material-ui/core/Typography';
4import TextField from '@material-ui/core/TextField';
5import Button from '@material-ui/core/Button';
6import Checkbox from '@material-ui/core/Checkbox';
7import FormControlLabel from '@material-ui/core/FormControlLabel';
8import {useTranslation} from 'react-i18next';
9import useDebounce from '../../hooks/useDebounce';
10import useProfile from '../../hooks/useProfile';
11import {CardActions} from '@material-ui/core';
12
13const Step1 = ({nextStep, event, addToEvent}) => {
14 const {t} = useTranslation();
15 const {connected, user} = useProfile();
16 const classes = useStyles({connected});
17
18 // States
19 const [name, setName] = useState(event.name ?? '');
20 const [email, setEmail] = useState(event.email ?? '');
21 const [emailIsValid, setEmailIsValid] = useState(false);
22 const [newsletter, setNewsletter] = useState(false);
23 const debouncedEmail = useDebounce(email, 400);
24
25 useEffect(() => {
26 setEmailIsValid(isValidEmail(debouncedEmail));
27 }, [debouncedEmail]);
28
29 const canSubmit = useMemo(() => {
30 const n = name.length > 0;
31 const e = email.length > 0 && emailIsValid;
32 return connected ? n : n && e;
33 }, [name, email, emailIsValid, connected]);
34
35 const onNext = event => {
36 if (event.preventDefault) event.preventDefault();
37 addToEvent({
38 name,
39 email: connected ? user.email : email,
40 newsletter: connected ? true : newsletter,
41 });
42 nextStep();
43 return false;
44 };
45
46 return (
47 <form onSubmit={onNext}>
48 <TextField
49 label={t('event.creation.event_name')}
50 fullWidth
51 autoFocus
52 margin="dense"
53 value={name}
54 onChange={e => setName(e.target.value)}
55 id="NewEventName"
56 name="name"
57 />
58 {!connected && (
59 <>
60 <TextField
61 label={t('event.creation.creator_email')}
62 fullWidth
63 margin="dense"
64 value={email}
65 onChange={e => setEmail(e.target.value)}
66 id="NewEventEmail"
67 name="email"
68 type="email"
69 />
70 <FormControlLabel
71 className={classes.newsletter}
72 label={t('event.creation.newsletter')}
73 control={
74 <Checkbox
75 name="newsletter"
76 color="primary"
77 id="NewEventNewsletter"
78 checked={newsletter}
79 onChange={e => setNewsletter(e.target.checked)}
80 />
81 }
82 />
83 </>
84 )}
85 <Button
86 className={classes.button}
87 type="submit"
88 variant="contained"
89 color="secondary"
90 fullWidth
91 disabled={!canSubmit}
92 aria-disabled={!canSubmit}
93 >
94 {t('event.creation.next')}
95 </Button>
96
97 {!connected && (
98 <div className={classes.addFromAccountSection}>
99 <Typography variant="body1">
100 {t('event.creation.addFromAccount.title')}
101 </Typography>
102 <Typography variant="body2">
103 {t('event.creation.addFromAccount.subtitle')}
104 </Typography>
105 <CardActions className={classes.actions}>
106 <Button variant="text" href="/auth/register">
107 {t('event.creation.addFromAccount.actions.register')}
108 </Button>
109 <Button color="primary" href="/auth/login">
110 {t('event.creation.addFromAccount.actions.login')}
111 </Button>
112 </CardActions>
113 </div>
114 )}
115 </form>
116 );
117};
118
119const useStyles = makeStyles(theme => ({
120 button: {
121 marginTop: theme.spacing(2),
122 },
123 newsletter: {
124 marginTop: theme.spacing(2),
125 },
126 addFromAccountSection: {
127 marginTop: theme.spacing(8),
128 textAlign: 'center',
129 },
130 actions: {
131 marginTop: theme.spacing(1),
132 justifyContent: 'space-evenly',
133 textAlign: 'center',
134 },
135}));
136
137const isValidEmail = email =>
138 // eslint-disable-next-line
139 /^(([^<>()\[\]\\.,;:\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(
140 email
141 );
142
143export default Step1;