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