From 5cceade5162f606dff66be8a29230d930fa74d77 Mon Sep 17 00:00:00 2001 From: Vesa Luusua Date: Wed, 5 Sep 2018 17:40:37 +0300 Subject: [PATCH 1/2] Reduce small character queries on LocationAutocompleteInput --- .../LocationAutocompleteInputImpl.js | 30 ++++++++++++++----- 1 file changed, 23 insertions(+), 7 deletions(-) diff --git a/src/components/LocationAutocompleteInput/LocationAutocompleteInputImpl.js b/src/components/LocationAutocompleteInput/LocationAutocompleteInputImpl.js index 525c93b6..148ddfe5 100644 --- a/src/components/LocationAutocompleteInput/LocationAutocompleteInputImpl.js +++ b/src/components/LocationAutocompleteInput/LocationAutocompleteInputImpl.js @@ -22,7 +22,8 @@ export const defaultPredictions = (config.maps.search.suggestCurrentLocation : [] ).concat(config.maps.search.defaults); -const DEBOUNCE_WAIT_TIME = 200; +const DEBOUNCE_WAIT_TIME = 300; +const DEBOUNCE_WAIT_TIME_FOR_SHORT_QUERIES = 1000; const KEY_CODE_ARROW_UP = 38; const KEY_CODE_ARROW_DOWN = 40; const KEY_CODE_ENTER = 13; @@ -166,6 +167,7 @@ class LocationAutocompleteInputImpl extends Component { // Ref to the input element. this.input = null; + this.shortQueryTimeout = null; this.getGeocoder = this.getGeocoder.bind(this); this.currentPredictions = this.currentPredictions.bind(this); @@ -188,7 +190,9 @@ class LocationAutocompleteInputImpl extends Component { componentDidMount() { this._isMounted = true; } + componentWillUnmount() { + window.clearTimeout(this.shortQueryTimeout); this._isMounted = false; } @@ -257,7 +261,16 @@ class LocationAutocompleteInputImpl extends Component { return; } - this.predict(newValue); + if (newValue.length >= 3) { + if (this.shortQueryTimeout) { + window.clearTimeout(this.shortQueryTimeout); + } + this.predict(newValue); + } else { + this.shortQueryTimeout = window.setTimeout(() => { + this.predict(newValue); + }, DEBOUNCE_WAIT_TIME_FOR_SHORT_QUERIES); + } } // Change the currently highlighted item by calculating the new @@ -322,20 +335,23 @@ class LocationAutocompleteInputImpl extends Component { }); } selectItemIfNoneSelected() { - const { selectedPlace } = currentValue(this.props); + const { search, selectedPlace } = currentValue(this.props); const predictions = this.currentPredictions(); if (!selectedPlace) { - const index = this.state.highlightedIndex !== -1 ? this.state.highlightedIndex : 0; - - if (index >= 0 && index < predictions.length) { + if (predictions && predictions.length > 0) { + const index = this.state.highlightedIndex !== -1 ? this.state.highlightedIndex : 0; this.selectPrediction(predictions[index]); + } else { + this.predict(search).then(() => { + this.selectPrediction(predictions[0]); + }); } } } predict(search) { const onChange = this.props.input.onChange; - this.getGeocoder() + return this.getGeocoder() .getPlacePredictions(search) .then(results => { const { search: currentSearch } = currentValue(this.props); From 9191e247b682e8b50b15d82d20a42dc1c4c084e5 Mon Sep 17 00:00:00 2001 From: Vesa Luusua Date: Wed, 5 Sep 2018 17:48:12 +0300 Subject: [PATCH 2/2] Update changelog --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 65301a3d..53373f27 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,6 +12,8 @@ way to update this template, but currently, we follow a pattern: --- ## Upcoming version 2018-09-XX +* [add] Reduce character queries on LocationAutocompleteInput to reduce geocoding costs. + [#883](https://github.com/sharetribe/flex-template-web/pull/883) * [change] Update git links and improve documentation [#911](https://github.com/sharetribe/flex-template-web/pull/911) * [change] improve env-template to better defaults.