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