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