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