1import React, { useState, useEffect } from "react";
 2import { makeStyles } from "@material-ui/core/styles";
 3import TextField from "@material-ui/core/TextField";
 4import Button from "@material-ui/core/Button";
 5import { useTranslation } from "react-i18next";
 6import useDebounce from "../../hooks/useDebounce";
 7import Paper from "../../components/Paper";
 8
 9const isValidEmail = (email) =>
10  // eslint-disable-next-line
11  /^(([^<>()\[\]\\.,;:\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(
12    email
13  );
14
15const Step1 = ({ nextStep, event, addToEvent, ...props }) => {
16  const classes = useStyles();
17  const { t } = useTranslation();
18
19  // States
20  const [name, setName] = useState(event.name ?? "");
21  const [email, setEmail] = useState(event.email ?? "");
22  const [emailIsValid, setEmailIsValid] = useState(false);
23
24  const debouncedEmail = useDebounce(email, 400);
25  useEffect(() => {
26    setEmailIsValid(isValidEmail(debouncedEmail));
27  }, [debouncedEmail]);
28
29  const onNext = () => {
30    addToEvent({ name, email });
31    nextStep();
32  };
33
34  return (
35    <Paper {...props}>
36      <TextField
37        className={classes.textField}
38        label={t("event.creation.event_name")}
39        fullWidth
40        autoFocus
41        margin="dense"
42        value={name}
43        onChange={(e) => setName(e.target.value)}
44        id="NewEventName"
45        name="name"
46      />
47      <TextField
48        className={classes.textField}
49        label={t("event.creation.creator_email")}
50        fullWidth
51        margin="dense"
52        value={email}
53        onChange={(e) => setEmail(e.target.value)}
54        id="NewEventEmail"
55        name="email"
56        type="email"
57      />
58      <Button
59        className={classes.button}
60        variant="contained"
61        color="secondary"
62        fullWidth
63        onClick={onNext}
64        disabled={!name || !email || !emailIsValid}
65      >
66        {t("event.creation.next")}
67      </Button>
68    </Paper>
69  );
70};
71
72const useStyles = makeStyles((theme) => ({
73  textField: {},
74  button: {
75    marginTop: theme.spacing(2),
76  },
77}));
78
79export default Step1;