1import React, {useState, useEffect, useReducer, 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 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 = ({
 19  nextStep,
 20  previousStep,
 21  createEvent,
 22  event,
 23  addToEvent,
 24  ...props
 25}) => {
 26  const classes = useStyles();
 27  const {t} = useTranslation();
 28
 29  // States
 30  const [name, setName] = useState(event.name ?? '');
 31  const [email, setEmail] = useState(event.email ?? '');
 32  const [emailIsValid, setEmailIsValid] = useState(false);
 33  const [tos, setTos] = useState(false);
 34  const [showTos, toggleTos] = useReducer(i => !i, false);
 35  const debouncedEmail = useDebounce(email, 400);
 36  const canSubmit = useMemo(
 37    () => name.length > 0 && email.length > 0 && emailIsValid && tos,
 38    [name, email, emailIsValid, tos]
 39  );
 40  useEffect(() => {
 41    setEmailIsValid(isValidEmail(debouncedEmail));
 42  }, [debouncedEmail]);
 43
 44  const onNext = event => {
 45    if (event.preventDefault) event.preventDefault();
 46    addToEvent({name, email});
 47    nextStep();
 48    return false;
 49  };
 50
 51  return (
 52    <>
 53      <Paper {...props}>
 54        <TextField
 55          label={t('event.creation.event_name')}
 56          fullWidth
 57          autoFocus
 58          margin="dense"
 59          value={name}
 60          onChange={e => setName(e.target.value)}
 61          id="NewEventName"
 62          name="name"
 63        />
 64        <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        <div className={classes.tos}>
 75          <Checkbox
 76            name="tos"
 77            id="NewEventTos"
 78            checked={tos}
 79            onChange={e => setTos(e.target.checked)}
 80          />
 81          <Typography
 82            component="a"
 83            role="button"
 84            variant="caption"
 85            onClick={toggleTos}
 86            tabIndex="0"
 87            onKeyPress={({charCode}) => {
 88              if (charCode && (charCode === 32 || charCode === 13)) toggleTos();
 89            }}
 90          >
 91            {t('event.creation.tos')}
 92          </Typography>
 93        </div>
 94        <Button
 95          className={classes.button}
 96          type="submit"
 97          onClick={onNext}
 98          variant="contained"
 99          color="secondary"
100          fullWidth
101          disabled={!canSubmit}
102          aria-disabled={!canSubmit}
103        >
104          {t('event.creation.next')}
105        </Button>
106      </Paper>
107      <TosDialog open={showTos} toggle={toggleTos} />
108    </>
109  );
110};
111
112const useStyles = makeStyles(theme => ({
113  button: {
114    marginTop: theme.spacing(2),
115  },
116  tos: {
117    cursor: 'pointer',
118    marginTop: theme.spacing(2),
119    display: 'flex',
120    alignItems: 'center',
121    marginLeft: '-11px',
122  },
123}));
124
125export default Step1;