From 357c5d2ab0c0a26cda59bb2556f1db3fde4c040c Mon Sep 17 00:00:00 2001
From: Esko Ikkala <esko.ikkala@aalto.fi>
Date: Wed, 6 Jun 2018 16:35:19 +0300
Subject: [PATCH] Clear suggestions on input change, use old suggestions if
input unchanged
---
src/components/IntegrationAutosuggest.js | 47 ++++++++++++++++++++----
src/reducers/search.js | 16 +++++---
2 files changed, 51 insertions(+), 12 deletions(-)
diff --git a/src/components/IntegrationAutosuggest.js b/src/components/IntegrationAutosuggest.js
index ed9122c0..cb7b5f70 100644
--- a/src/components/IntegrationAutosuggest.js
+++ b/src/components/IntegrationAutosuggest.js
@@ -72,7 +72,13 @@ const styles = theme => ({
const IntegrationAutosuggest = (props) => {
- const handleOnChange = (event, { newValue }) => props.updateQuery(newValue);
+ const handleOnChange = (event, { newValue }) => {
+ props.clearSuggestions();
+ props.updateQuery(newValue);
+ //if (newValue.length < 3) {
+
+ // }
+ };
const handleOnSuggestionSelected = () => {
props.clearSuggestions();
@@ -86,9 +92,37 @@ const IntegrationAutosuggest = (props) => {
}
};
+ // const handleOnBlur = (event, { highlightedSuggestion }) => {
+ // // console.log(event);
+ // // console.log(highlightedSuggestion);
+ // };
+
+ const handleOnSuggestionsFetchRequested = ({ value }) => {
+ // console.log(value)
+ // console.log(reason)
+ // console.log(props.search.suggestionsQuery)
+ if (props.search.suggestionsQuery != value ) {
+ // console.log('fetching suggestions');
+ props.fetchSuggestions();
+ }
+ // else {
+ // console.log('using old suggestions');
+ // }
+ };
+
+ const shouldRenderSuggestions = (value) => {
+ return value.trim().length > 2;
+ };
+
+ const handleOnSuggestionsClearRequested = () => {
+ //console.log('SuggestionsClearRequested');
+ //props.clearSuggestions();
+ };
+ //alwaysRenderSuggestions={true}
+
const { classes } = props;
- //console.log('IntegrationAutosuggest', props);
+ //console.log('IntegrationAutosuggest', props.search.suggestions);
return (
<Autosuggest
@@ -97,13 +131,12 @@ const IntegrationAutosuggest = (props) => {
suggestionsContainerOpen: classes.suggestionsContainerOpen,
suggestionsList: classes.suggestionsList,
suggestion: classes.suggestion,
- sectionContainer : classes.sectionContainer,
- sectionContainerFirst : classes.sectionContainerFirst,
}}
renderInputComponent={renderInput}
suggestions={props.search.suggestions}
- onSuggestionsClearRequested={props.clearSuggestions}
- onSuggestionsFetchRequested={props.fetchSuggestions}
+ shouldRenderSuggestions={shouldRenderSuggestions}
+ onSuggestionsFetchRequested={handleOnSuggestionsFetchRequested}
+ onSuggestionsClearRequested={handleOnSuggestionsClearRequested}
renderSuggestionsContainer={renderSuggestionsContainer}
getSuggestionValue={getSuggestionValue}
renderSuggestion={renderSuggestion}
@@ -113,7 +146,7 @@ const IntegrationAutosuggest = (props) => {
placeholder: 'Search place names',
value: props.search.query,
onChange: handleOnChange,
- onKeyDown: handleOnKeyDown
+ onKeyDown: handleOnKeyDown,
}}
/>
);
diff --git a/src/reducers/search.js b/src/reducers/search.js
index 9ef2998a..dcf09469 100644
--- a/src/reducers/search.js
+++ b/src/reducers/search.js
@@ -11,9 +11,11 @@ import results from './results';
export const INITIAL_STATE = {
query: '',
- datasets: ['warsa_karelian_places', 'warsa_municipalities'],
+ datasets: ['warsa_karelian_places', 'warsa_municipalities', 'kotus'],
suggestions: [],
- results: []
+ suggestionsQuery: '',
+ results: [],
+ resultsQuery: ''
};
const search = (state = INITIAL_STATE, action) => {
@@ -24,14 +26,18 @@ const search = (state = INITIAL_STATE, action) => {
return { ...state, datasets: action.datasets || [] };
case CLEAR_SUGGESTIONS:
case UPDATE_SUGGESTIONS:
- return { ...state, suggestions: suggestions(state.suggestions, action) };
+ return {
+ ...state,
+ suggestions: suggestions(state.suggestions, action),
+ suggestionsQuery: state.query
+ };
case CLEAR_RESULTS:
case UPDATE_RESULTS:
return {
...state,
suggestions: [],
- results: results(state.results, action)
-
+ results: results(state.results, action),
+ resultsQuery: state.query
};
default:
return state;
--
GitLab