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