breaks out form submit to its own component (write)

__tests__/integration/react-example/App.js

@@ -3,16 +3,22 @@ import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import m3core from '../../../index.umd';
 import Display from './Display';
+import ManifestForm from './ManifestForm';
 
 class App extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      formValue: '',
       lastRequested: '',
     };
-    this.formSubmit = this.formSubmit.bind(this);
-    this.handleInputChange = this.handleInputChange.bind(this);
+
+    this.setLastRequested = this.setLastRequested.bind(this);
+  }
+
+  setLastRequested(requested) {
+    this.setState({
+      lastRequested: requested,
+    });
   }
 
   computedContent() {
@@ -28,48 +34,24 @@ class App extends Component {
     return 'Nothing Selected Yet';
   }
 
-  formSubmit(event) {
-    event.preventDefault();
-    this.props.fetchManifest(this.state.formValue);
-    this.setState({
-      lastRequested: this.state.formValue,
-    });
-  }
-  handleInputChange(event) {
-    const that = this;
-    event.preventDefault();
-    that.setState({
-      formValue: event.target.value,
-    });
-  }
   render() {
     const manifestList = Object.keys(this.props.manifests).map(manifest => (
       <li key={manifest}>{manifest}</li>
     ));
     return (
       <div className="App">
-        <form onSubmit={this.formSubmit}>
-          <input
-            value={this.state.formValue}
-            id="manifestURL"
-            type="text"
-            onChange={this.handleInputChange}
-          />
-
-          <button id="fetchBtn" type="submit">FetchManifest</button>
+        <ManifestForm setLastRequested={this.setLastRequested} />
         <ul>{manifestList}</ul>
 
         <Display
           manifest={this.props.manifests[this.state.lastRequested]}
         />
-        </form>
       </div>
     );
   }
 }
 
 App.propTypes = {
-  fetchManifest: PropTypes.func.isRequired,
   manifests: PropTypes.instanceOf(Object).isRequired,
 };
 

__tests__/integration/react-example/ManifestForm.js

+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import m3core from '../../../index.umd';
+
+class ManifestForm extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      formValue: '',
+    };
+
+    this.formSubmit = this.formSubmit.bind(this);
+    this.handleInputChange = this.handleInputChange.bind(this);
+  }
+
+  formSubmit(event) {
+    event.preventDefault();
+    this.props.fetchManifest(this.state.formValue);
+    this.props.setLastRequested(this.state.formValue);
+  }
+
+  handleInputChange(event) {
+    const that = this;
+    event.preventDefault();
+    that.setState({
+      formValue: event.target.value,
+    });
+  }
+
+
+  render() {
+    return (
+      <form onSubmit={this.formSubmit}>
+        <input
+          value={this.state.formValue}
+          id="manifestURL"
+          type="text"
+          onChange={this.handleInputChange}
+        />
+        <button id="fetchBtn" type="submit">FetchManifest</button>
+      </form>
+    );
+  }
+}
+
+ManifestForm.propTypes = {
+  fetchManifest: PropTypes.func.isRequired,
+  setLastRequested: PropTypes.func.isRequired,
+};
+
+const mapStateToProps = () => (
+  {}
+);
+
+
+const mapDispatchToProps = dispatch => ({
+  fetchManifest: manifestUrl => (
+    dispatch(m3core.actions.fetchManifest(manifestUrl))
+  ),
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(ManifestForm);