Merge branch '218-sid-autocompleter-delay' into 'master'

Resolve "SID autocompleter delay"

Closes #218

See merge request genesys-pgr/genesys-ui!226

package.json

@@ -48,6 +48,7 @@
     "compression": "^1.7.2",
     "cookie-parser": "^1.4.3",
     "csvtojson": "^2.0.8",
+    "debounce": "^1.2.0",
     "debug": "^4.1.0",
     "es-cookie": "^1.2.0",
     "express": "^4.16.3",

src/datasets/ui/dashboard/dataset-stepper/steps/creators/DatasetCreatorAutocompleteField.tsx

 import * as React from 'react';
 import { translate } from 'react-i18next';
+import { debounce } from 'debounce';
 import MenuItem from '@material-ui/core/MenuItem';
 import Menu from '@material-ui/core/Menu';
 import TextField from '@material-ui/core/TextField';
@@ -77,12 +78,16 @@ class DatasetCreatorAutocompleteField extends React.Component<IDatasetCreatorAut
   }
 
   private handleInputChange = (e) => {
-    const {input, autocompleteCreators} = this.props;
-    autocompleteCreators(e.target.value)
-      .then((creators) => this.setState({ suggestions: creators }));
+    const { input } = this.props;
+    this.doAutocomplete(e.target.value);
     input.onChange(e.target.value);
   }
 
+  private doAutocomplete = debounce((value) => {
+    this.props.autocompleteCreators(value)
+      .then((creators) => this.setState({ suggestions: creators }));
+  }, 1000);
+
   private select = (datasetCreator) => {
     const { updateDatasetCreator } = this.props;
     updateDatasetCreator(datasetCreator);

src/datasets/ui/dashboard/dataset-stepper/steps/location/CountryCodePicker.tsx

@@ -3,6 +3,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { Field } from 'redux-form';
 import { translate } from 'react-i18next';
+import { debounce } from 'debounce';
 
 // Model
 import VocabularyTerm from 'model/vocabulary/VocabularyTerm';
@@ -31,10 +32,17 @@ class SelectCountryInternal extends React.Component<ISelectCountryCodeInternal,
 
   protected handleInputChange = (event) => {
     this.setState({ searchText: event.target.value });
-    this.props.autocomplete(event.target.value).then((suggestions) => {
+    if (event.target.value) {
+      this.doAutocomplete(event.target.value);
+    }
+  }
+
+  private doAutocomplete = debounce((value) => {
+    this.props.autocomplete(value).then((suggestions) => {
       this.setState({ suggestions });
     });
-  }
+  }, 1000);
+
   protected handleClick = (event) => {
     this.setState({ open: true, anchorEl: event.currentTarget });
   }

src/descriptors/ui/c/DescriptorListPicker.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { translate } from 'react-i18next';
+import { debounce } from 'debounce';
 
 import DescriptorList from 'model/catalog/DescriptorList';
 import { autocomplete, promiseDescriptorList } from 'descriptorlists/actions/public';
@@ -29,10 +30,13 @@ class SelectDescriptorListInternal extends React.Component<ISelectDescriptorList
 
   protected handleInputChange = (event) => {
     this.setState({ searchText: event.target.value });
-    this.props.autocomplete(event.target.value).then((suggestions) => {
+    this.doAutocomplete(event.target.value);
+  }
+  private doAutocomplete = debounce((value) => {
+    this.props.autocomplete(value).then((suggestions) => {
       this.setState({ suggestions });
     });
-  }
+  }, 1000);
   protected handleClick = (event) => {
     this.setState({ open: true, anchorEl: event.currentTarget });
   }

src/partners/ui/c/InstitutePicker.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { translate } from 'react-i18next';
+import { debounce } from 'debounce';
 
 import {autocompleteWiewsTerm, loadWiewsTerm} from 'vocabulary/actions/public';
 
@@ -26,14 +27,16 @@ interface ISelectFaoInstituteInternal extends React.ClassAttributes<any> {
 class SelectFaoInstituteInternal extends React.Component<ISelectFaoInstituteInternal, any> {
 
   protected handleInputChange = (event) => {
-    const { autocompleteWiewsTerm } = this.props;
     this.setState({searchText: event.target.value});
     if (event.target.value) {
-      autocompleteWiewsTerm(event.target.value).then((suggestions) => {
-        this.setState({suggestions});
-      });
+      this.doAutocomplete(event.target.value);
     }
   }
+  private doAutocomplete = debounce((value) => {
+    this.props.autocompleteWiewsTerm(value).then((suggestions) => {
+      this.setState({suggestions});
+    });
+  }, 1000);
   protected handleClick = (event) => {
     this.setState({open: true, anchorEl: event.currentTarget});
   }

src/ui/common/permission/SidRow.tsx

 import * as React from 'react';
 import {Field} from 'redux-form';
+import { debounce } from 'debounce';
 
 import Button from '@material-ui/core/Button';
 import TableCell from '@material-ui/core/TableCell';
@@ -84,7 +85,7 @@ class SidRow extends React.Component<ISidRowProps> {
                 component={ MaterialAutosuggest }
                 label="Sid"
                 placeholder="Sid"
-                onChange={ this.onInputChange }
+                onChange={ debounce(this.onInputChange, 1000) }
                 suggestions={ Object.keys(this.state.autocompleteObj).map((key) => ({label: key})) }
                 suggestionLabel="label"
                 classes={ {textField: classes.textField} }

src/vocabulary/ui/c/VocabularyTermPicker.tsx

@@ -4,6 +4,7 @@ import { connect } from 'react-redux';
 import MaterialAutosuggest from 'ui/common/material-autosuggest';
 import { bindActionCreators } from 'redux';
 import { autocomplete } from 'vocabulary/actions/public';
+import { debounce } from 'debounce';
 
 interface IVocabularyTermPickerProps extends React.ClassAttributes<any> {
   vocabularyUuid: string;
@@ -17,22 +18,23 @@ interface IVocabularyTermPickerProps extends React.ClassAttributes<any> {
 class VocabularyTermPicker extends React.Component<IVocabularyTermPickerProps, any> {
 
   private onInputChange = (e, term) => {
+    const { input } = this.props;
     if (term) {
       this.doAutocomplete(term.newValue);
+      input.onChange(term.newValue);
     }
   }
   private onBlur = (e) => {
     // do nothing
   }
-  private doAutocomplete = (query) => {
-    const { autocomplete, vocabularyUuid, input } = this.props;
+  private doAutocomplete = debounce((query) => {
+    const { autocomplete, vocabularyUuid } = this.props;
 
     autocomplete(vocabularyUuid, query)
       .then((results) => {
         this.setState({ languages: results });
-        input.onChange(query);
       });
-  }
+  }, 1000);
 
   constructor(props: IVocabularyTermPickerProps, context: any) {
     super(props, context);