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