export default()

in src/components/Subscribe.js [89:177]
80 lines of code
9 McCabe index (conditional complexity)

export default ({action}) => {
  const [value, setValue] = useState('');
  const onChange = useCallback(({target: {value: v}}) => setValue(v), []);
  const [showForm, setShowForm] = useState(false);
  const [showSuccess, setShowSuccess] = useState(false);

  const onClick = async () => {
    const [internal, emailAddress] = value.includes('INTERNAL_USER')
      ? [true, value.split('INTERNAL_USER')[0]]
      : [false, value];
    const valid = isValidEmailAddress(emailAddress);
    let type;
    // eslint-disable-next-line
    let __html;
    if (valid) {
      const internalQueryString = internal ? '&internal=true' : '';
      const fullQueryString = `email_address=${encodeURIComponent(
        emailAddress,
      )}&action=${action}${internalQueryString}`;
      const requestUrl = `${endpoint}?${fullQueryString}`;
      const {data} = await axios.get(requestUrl);
      const successful = data.message.includes('Successfully');

      if (successful) {
        setValue('');
        setShowSuccess(true);
        setTimeout(() => setShowSuccess(false), 2000);
        type = 'success';
      } else {
        type = 'error';
      }

      ({message: __html} = data);
    } else {
      type = 'error';
      __html = 'Please enter a valid email address.';
    }

    // eslint-disable-next-line
    toast(<div dangerouslySetInnerHTML={{__html}} />, {
      position: toast.POSITION.BOTTOM_RIGHT,
      autoClose: 3000,
      hideProgressBar: true,
      type,
    });
  };

  return (
    <div css={styles} className='rounded'>
      {!showForm && (
        <Basic
          onClick={() => setShowForm(true)}
          className='actionable three-dee rounded'
        >
          <Text
            className='subscribe-label'
            children={ctaTextByAction[action]}
          />
        </Basic>
      )}

      {showForm && (
        <form>
          <input
            autoFocus
            type='email'
            autoCapitalize='off'
            autoCorrect='off'
            placeholder='your@email.com'
            {...{value, onChange}}
            onKeyPress={e => {
              const {key} = e;
              if (key === 'Enter') {
                e.preventDefault();
                onClick();
              }
            }}
          />

          <Basic {...{onClick}}>
            <div className='shadow actionable rounded'>
              {showSuccess ? <MdCheck /> : <MdArrowForward />}
            </div>
          </Basic>
        </form>
      )}
    </div>
  );
};