app/src/containers/CreateEvent/Step1.js (view raw)
1import React, { useState, useEffect, useReducer } from "react";
2import { makeStyles } from "@material-ui/core/styles";
3import TextField from "@material-ui/core/TextField";
4import Button from "@material-ui/core/Button";
5import Typography from "@material-ui/core/Typography";
6import Checkbox from "@material-ui/core/Checkbox";
7import { useTranslation } from "react-i18next";
8import useDebounce from "../../hooks/useDebounce";
9import Paper from "../../components/Paper";
10import TosDialog from "../TosDialog";
11
12const isValidEmail = (email) =>
13 // eslint-disable-next-line
14 /^(([^<>()\[\]\\.,;:\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(
15 email
16 );
17
18const Step1 = ({ nextStep, event, addToEvent, ...props }) => {
19 const classes = useStyles();
20 const { t } = useTranslation();
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 [tos, setTos] = useState(false);
27 const [showTos, toggleTos] = useReducer((i) => !i, false);
28
29 const debouncedEmail = useDebounce(email, 400);
30 useEffect(() => {
31 setEmailIsValid(isValidEmail(debouncedEmail));
32 }, [debouncedEmail]);
33
34 const onNext = () => {
35 addToEvent({ name, email });
36 nextStep();
37 };
38
39 return (
40 <>
41 <Paper {...props}>
42 <TextField
43 className={classes.textField}
44 label={t("event.creation.event_name")}
45 fullWidth
46 autoFocus
47 margin="dense"
48 value={name}
49 onChange={(e) => setName(e.target.value)}
50 id="NewEventName"
51 name="name"
52 />
53 <TextField
54 className={classes.textField}
55 label={t("event.creation.creator_email")}
56 fullWidth
57 margin="dense"
58 value={email}
59 onChange={(e) => setEmail(e.target.value)}
60 id="NewEventEmail"
61 name="email"
62 type="email"
63 />
64 <div className={classes.tos}>
65 <Checkbox
66 name="tos"
67 id="NewEventTos"
68 checked={tos}
69 onChange={(e) => setTos(e.target.checked)}
70 />
71 <Typography variant="caption" onClick={toggleTos}>
72 {t("event.creation.tos")}
73 </Typography>
74 </div>
75 <Button
76 className={classes.button}
77 variant="contained"
78 color="secondary"
79 fullWidth
80 onClick={onNext}
81 disabled={!name || !email || !emailIsValid || !tos}
82 >
83 {t("event.creation.next")}
84 </Button>
85 </Paper>
86 <TosDialog open={showTos} toggle={toggleTos} />
87 </>
88 );
89};
90
91const useStyles = makeStyles((theme) => ({
92 textField: {},
93 button: {
94 marginTop: theme.spacing(2),
95 },
96 tos: {
97 cursor: "pointer",
98 marginTop: theme.spacing(2),
99 display: "flex",
100 alignItems: "center",
101 marginLeft: "-11px",
102 },
103}));
104
105export default Step1;