Merge pull request #124 from creative-commoners/pulls/2.2/ready-or-no…

…t-here-i-load

FIX Adding a debounce to fetching lazy loaded tags with tag field

.gitignore

@@ -4,3 +4,4 @@ framework
 node_modules/
 /**/*.js.map
 /**/*.css.map
+yarn-error.log

client/src/components/TagField.js

@@ -2,6 +2,8 @@ import React, { Component, PropTypes } from 'react';
 import Select from 'react-select';
 import fetch from 'isomorphic-fetch';
 import url from 'url';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import debounce from 'lodash/debounce';
 
 class TagField extends Component {
   constructor(props) {
@@ -13,6 +15,7 @@ class TagField extends Component {
 
     this.onChange = this.onChange.bind(this);
     this.getOptions = this.getOptions.bind(this);
+    this.fetchOptions = debounce(this.fetchOptions, 500);
   }
 
   onChange(value) {
@@ -26,7 +29,7 @@ class TagField extends Component {
   }
 
   getOptions(input) {
-    const { lazyLoad, options, optionUrl, labelKey, valueKey } = this.props;
+    const { lazyLoad, options } = this.props;
 
     if (!lazyLoad) {
       return Promise.resolve({ options });
@@ -36,6 +39,11 @@ class TagField extends Component {
       return Promise.resolve({ options: [] });
     }
 
+    return this.fetchOptions(input);
+  }
+
+  fetchOptions(input) {
+    const { optionUrl, labelKey, valueKey } = this.props;
     const fetchURL = url.parse(optionUrl, true);
     fetchURL.query.term = input;
 

client/src/components/tests/TagField-test.js

@@ -73,9 +73,13 @@ describe('TagField', () => {
       }));
     });
 
-    it('should fetch the URL for results', () => {
+    it('should fetch the URL for results', done => {
       wrapper.instance().getOptions('a');
-      expect(fetch).toBeCalledWith('localhost/some-fetch-url?term=a', expect.anything());
+
+      setTimeout(() => {
+        expect(fetch).toBeCalledWith('localhost/some-fetch-url?term=a', expect.anything());
+        done();
+      }, 500);
     });
   });
 });

package.json

@@ -17,7 +17,7 @@
     "node": ">=6.x"
   },
   "scripts": {
-    "build": "yarn && yarn lint && NODE_ENV=production webpack -p --bail --progress",
+    "build": "yarn && yarn lint && yarn test && NODE_ENV=production webpack -p --bail --progress",
     "dev": "NODE_ENV=development webpack --progress",
     "watch": "NODE_ENV=development webpack --watch --progress",
     "css": "WEBPACK_CHILD=css npm run build",
@@ -72,6 +72,7 @@
     "classnames": "^2.2.5",
     "isomorphic-fetch": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
     "jquery": "^3.1.1",
+    "lodash.debounce": "^4.0.8",
     "react": "15.3.1",
     "react-dom": "15.3.1",
     "react-select": "^1.0.0-rc.5",