1import React, {useState, useEffect, useMemo} from 'react';
  2import {makeStyles} from '@material-ui/core/styles';
  3import TextField from '@material-ui/core/TextField';
  4import Button from '@material-ui/core/Button';
  5import Checkbox from '@material-ui/core/Checkbox';
  6import FormControlLabel from '@material-ui/core/FormControlLabel';
  7import {useTranslation} from 'react-i18next';
  8import useDebounce from '../../hooks/useDebounce';
  9
 10const isValidEmail = email =>
 11  // eslint-disable-next-line
 12  /^(([^<>()\[\]\\.,;:\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(
 13    email
 14  );
 15
 16const Step1 = ({nextStep, previousStep, createEvent, event, addToEvent}) => {
 17  const classes = useStyles();
 18  const {t} = useTranslation();
 19
 20  // States
 21  const [name, setName] = useState(event.name ?? '');
 22  const [email, setEmail] = useState(event.email ?? '');
 23  const [emailIsValid, setEmailIsValid] = useState(false);
 24  const [newsletter, setNewsletter] = useState(false);
 25  const debouncedEmail = useDebounce(email, 400);
 26  const canSubmit = useMemo(
 27    () => name.length > 0 && email.length > 0 && emailIsValid,
 28    [name, email, emailIsValid]
 29  );
 30  useEffect(() => {
 31    setEmailIsValid(isValidEmail(debouncedEmail));
 32  }, [debouncedEmail]);
 33
 34  const onNext = event => {
 35    if (event.preventDefault) event.preventDefault();
 36    addToEvent({name, email, newsletter});
 37    nextStep();
 38    return false;
 39  };
 40
 41  return (
 42    <form onSubmit={onNext}>
 43      <TextField
 44        className={classes.textField}
 45        label={t('event.creation.event_name')}
 46        fullWidth
 47        autoFocus
 48        margin="dense"
 49        value={name}
 50        onChange={e => setName(e.target.value)}
 51        id="NewEventName"
 52        name="name"
 53      />
 54      <TextField
 55        className={classes.textField}
 56        label={t('event.creation.creator_email')}
 57        fullWidth
 58        margin="dense"
 59        value={email}
 60        onChange={e => setEmail(e.target.value)}
 61        id="NewEventEmail"
 62        name="email"
 63        type="email"
 64      />
 65      <FormControlLabel
 66        className={classes.newsletter}
 67        label={t('event.creation.newsletter')}
 68        control={
 69          <Checkbox
 70            name="newsletter"
 71            color="primary"
 72            id="NewEventNewsletter"
 73            checked={newsletter}
 74            onChange={e => setNewsletter(e.target.checked)}
 75          />
 76        }
 77      />
 78      <Button
 79        className={classes.button}
 80        type="submit"
 81        variant="contained"
 82        color="secondary"
 83        fullWidth
 84        disabled={!canSubmit}
 85        aria-disabled={!canSubmit}
 86      >
 87        {t('event.creation.next')}
 88      </Button>
 89    </form>
 90  );
 91};
 92
 93const useStyles = makeStyles(theme => ({
 94  textField: {},
 95  button: {
 96    marginTop: theme.spacing(2),
 97  },
 98  newsletter: {
 99    marginTop: theme.spacing(2),
100  },
101}));
102
103export default Step1;