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;