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