Refactor CaptchaField

app/gabsocial/features/auth_login/components/captcha.js

@@ -0,0 +1,96 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { connect } from 'react-redux';
+import { Map as ImmutableMap } from 'immutable';
+import { fetchCaptcha } from 'gabsocial/actions/auth';
+import { TextInput } from 'gabsocial/features/forms';
+
+const noOp = () => {};
+
+export default @connect()
+class CaptchaField extends React.Component {
+
+  static propTypes = {
+    onChange: PropTypes.func,
+    onFetch: PropTypes.func,
+    onFetchFail: PropTypes.func,
+    dispatch: PropTypes.func,
+    refreshInterval: PropTypes.number,
+  }
+
+  static defaultProps = {
+    onChange: noOp,
+    onFetch: noOp,
+    onFetchFail: noOp,
+    refreshInterval: 5*60*1000, // 5 minutes, Pleroma default
+  }
+
+  state = {
+    captcha: ImmutableMap(),
+  }
+
+  setRefreshTimeout = () => {
+    const { refreshInterval } = this.props;
+    if (refreshInterval) {
+      const refreshTimeout = setTimeout(this.fetchCaptcha, refreshInterval);
+      this.setState({ refreshTimeout });
+    }
+  }
+
+  clearRefreshTimeout = () => {
+    clearTimeout(this.state.refreshTimeout);
+  }
+
+  fetchCaptcha = () => {
+    const { dispatch, onFetch, onFetchFail } = this.props;
+    dispatch(fetchCaptcha()).then(response => {
+      const captcha = ImmutableMap(response.data);
+      this.setState({ captcha });
+      onFetch(captcha);
+    }).catch(error => {
+      onFetchFail(error);
+    });
+    this.setRefreshTimeout(); // Refresh periodically
+  }
+
+  componentWillMount() {
+    this.fetchCaptcha();
+  }
+
+  componentWillUnmount() {
+    this.clearRefreshTimeout();
+  }
+
+  render() {
+    const { captcha } = this.state;
+    const { onChange } = this.props;
+
+    switch(captcha.get('type')) {
+    case 'native':
+      return <NativeCaptchaField captcha={captcha} onChange={onChange} />;
+    case 'none':
+    default:
+      return null;
+    }
+  }
+
+}
+
+const NativeCaptchaField = ({ captcha, onChange }) => (
+  <div className='captcha'>
+    <img alt='captcha' src={captcha.get('url')} />
+    <TextInput
+      placeholder='Enter the pictured text'
+      name='captcha_solution'
+      autoComplete='off'
+      onChange={onChange}
+      required
+    />
+  </div>
+);
+
+NativeCaptchaField.propTypes = {
+  captcha: ImmutablePropTypes.map.isRequired,
+  onChange: PropTypes.func,
+};

app/gabsocial/features/landing_page/components/registration_form.js

@@ -9,7 +9,8 @@ import {
   TextInput,
   Checkbox,
 } from 'gabsocial/features/forms';
-import { register, fetchCaptcha } from 'gabsocial/actions/auth';
+import { register } from 'gabsocial/actions/auth';
+import CaptchaField from 'gabsocial/features/auth_login/components/captcha';
 import { Map as ImmutableMap } from 'immutable';
 
 const mapStateToProps = (state, props) => ({
@@ -24,16 +25,11 @@ class RegistrationForm extends ImmutablePureComponent {
   }
 
   state = {
-    captcha: ImmutableMap(),
     captchaLoading: true,
     submissionLoading: false,
     params: ImmutableMap(),
   }
 
-  componentWillMount() {
-    this.fetchCaptcha();
-  }
-
   setParams = map => {
     this.setState({ params: this.state.params.merge(ImmutableMap(map)) });
   }
@@ -50,34 +46,16 @@ class RegistrationForm extends ImmutablePureComponent {
     this.props.dispatch(register(this.state.params.toJS()));
   }
 
-  fetchCaptcha = () => {
+  onFetchCaptcha = captcha => {
-    this.props.dispatch(fetchCaptcha()).then(response => {
+    this.setState({ captchaLoading: false });
-      const captcha = ImmutableMap(response.data);
+    this.setParams({
-      this.setState({ captcha: captcha, captchaLoading: false });
+      captcha_token: captcha.get('token'),
-      this.setParams({
+      captcha_answer_data: captcha.get('answer_data'),
-        captcha_token: captcha.get('token'),
+    });
-        captcha_answer_data: captcha.get('answer_data'),
-      });
-    }).catch(error => console.error(error));
-    setTimeout(this.fetchCaptcha, 5*60*100); // Captcha invalidates after 5 minutes
   }
 
-  getCaptchaElem = () => {
+  onFetchCaptchaFail = error => {
-    const { captcha } = this.state;
+    this.setState({ captchaLoading: false });
-    if (captcha.get('type') !== 'native') return null;
-
-    return (
-      <div className='captcha'>
-        <img alt='captcha' src={captcha.get('url')} />
-        <TextInput
-          placeholder='Enter the pictured text'
-          name='captcha_solution'
-          autoComplete='off'
-          onChange={this.onInputChange}
-          required
-        />
-      </div>
-    );
   }
 
   render() {
@@ -123,7 +101,11 @@ class RegistrationForm extends ImmutablePureComponent {
                   required
                 />
               </div>
-              {this.getCaptchaElem()}
+              <CaptchaField
+                onFetch={this.onFetchCaptcha}
+                onFetchFail={this.onFetchCaptchaFail}
+                onChange={this.onInputChange}
+              />
               <div className='fields-group'>
                 <Checkbox
                   label={<>I agree to the <Link to='/about/tos' target='_blank'>Terms of Service</Link>.</>}