From 70a9b0be3782122750388c24eb98b0d45e6fc6d1 Mon Sep 17 00:00:00 2001 From: Noah Loomans Date: Sat, 6 Jan 2018 13:12:11 +0100 Subject: Save searchText in redux store --- src/client/react/actions/search.js | 4 ++-- src/client/react/components/container/Search.js | 4 ++++ src/client/react/reducers/search.js | 7 +++++-- src/client/react/reducers/search.test.js | 16 ++++++++++++++++ 4 files changed, 27 insertions(+), 4 deletions(-) (limited to 'src/client/react') diff --git a/src/client/react/actions/search.js b/src/client/react/actions/search.js index 1b6847d..d903e64 100644 --- a/src/client/react/actions/search.js +++ b/src/client/react/actions/search.js @@ -1,6 +1,6 @@ -export const inputChange = typedValue => ({ +export const inputChange = searchText => ({ type: 'SEARCH/INPUT_CHANGE', - typedValue, + searchText, }); /** diff --git a/src/client/react/components/container/Search.js b/src/client/react/components/container/Search.js index 957f76e..06523be 100644 --- a/src/client/react/components/container/Search.js +++ b/src/client/react/components/container/Search.js @@ -62,6 +62,7 @@ class Search extends React.Component { const { selectedResult, isExactMatch, + searchText, dispatch, } = this.props; @@ -82,6 +83,7 @@ class Search extends React.Component { id="search__input" onChange={event => dispatch(inputChange(event.target.value))} onKeyDown={this.onKeyDown} + value={searchText} placeholder="Zoeken" onFocus={this.onFocus} onBlur={this.onBlur} @@ -96,6 +98,7 @@ class Search extends React.Component { Search.propTypes = { selectedResult: PropTypes.string, isExactMatch: PropTypes.bool.isRequired, + searchText: PropTypes.string.isRequired, dispatch: PropTypes.func.isRequired, history: PropTypes.shape({ push: PropTypes.func.isRequired, @@ -108,6 +111,7 @@ Search.defaultProps = { const mapStateToProps = state => ({ results: state.search.results, + searchText: state.search.searchText, selectedResult: state.search.selectedResult, isExactMatch: state.search.isExactMatch, }); diff --git a/src/client/react/reducers/search.js b/src/client/react/reducers/search.js index 2a7e7a5..6027ed7 100644 --- a/src/client/react/reducers/search.js +++ b/src/client/react/reducers/search.js @@ -5,6 +5,7 @@ const DEFAULT_STATE = { results: [ 's/18562', ], + searchText: '', selectedResult: null, isExactMatch: false, }; @@ -27,13 +28,14 @@ function getSearchResults(allUsers, query) { const search = (state = DEFAULT_STATE, action) => { switch (action.type) { case 'SEARCH/INPUT_CHANGE': { - const results = getSearchResults(users.allUsers, action.typedValue); + const { searchText } = action; + const results = getSearchResults(users.allUsers, action.searchText); let selectedResult = null; let isExactMatch = false; // Is the typed value exactly the same as the first result? Then show the // appropiate icon instead of the generic search icon. - if ((results.length === 1) && (action.typedValue === users.byId[results[0]].value)) { + if ((results.length === 1) && (action.searchText === users.byId[results[0]].value)) { [selectedResult] = results; isExactMatch = true; } @@ -41,6 +43,7 @@ const search = (state = DEFAULT_STATE, action) => { return { ...state, results, + searchText, selectedResult, isExactMatch, }; diff --git a/src/client/react/reducers/search.test.js b/src/client/react/reducers/search.test.js index e0ca18e..ddd7f9b 100644 --- a/src/client/react/reducers/search.test.js +++ b/src/client/react/reducers/search.test.js @@ -20,6 +20,7 @@ describe('reducers', () => { it('Returns no results when nothing is typed in', () => { expect(search(undefined, inputChange(''))).toEqual({ results: [], + searchText: '', selectedResult: null, isExactMatch: false, }); @@ -28,6 +29,7 @@ describe('reducers', () => { it('Returns no results when a space is typed in', () => { expect(search(undefined, inputChange(' '))).toEqual({ results: [], + searchText: ' ', selectedResult: null, isExactMatch: false, }); @@ -41,6 +43,7 @@ describe('reducers', () => { 's/18563', 's/18564', ], + searchText: '18', selectedResult: null, isExactMatch: false, }); @@ -51,6 +54,7 @@ describe('reducers', () => { results: [ 's/18561', ], + searchText: '18561', selectedResult: 's/18561', isExactMatch: true, }); @@ -61,6 +65,7 @@ describe('reducers', () => { it('Does nothing when there are no results', () => { const prevState = { results: [], + searchText: '', selectedResult: null, isExactMatch: false, }; @@ -79,6 +84,7 @@ describe('reducers', () => { it('Does nothing when there is an exact match', () => { const prevState = { results: ['s/18561'], + searchText: '18561', selectedResult: 's/18561', isExactMatch: true, }; @@ -98,6 +104,7 @@ describe('reducers', () => { it('Switches to the correct selectedResult when no selected result is selected', () => { const prevState = { results: ['s/18561', 's/18562', 's/18563'], + searchText: '1856', selectedResult: null, isExactMatch: false, }; @@ -123,6 +130,7 @@ describe('reducers', () => { it('Switches to the correct selectedResult when there is a selected result selected', () => { const prevState = { results: ['s/18561', 's/18562', 's/18563'], + searchText: '1856', selectedResult: 's/18562', isExactMatch: false, }; @@ -148,20 +156,24 @@ describe('reducers', () => { it('Properly wraps arround when incrementing', () => { expect(search({ results: ['s/18561', 's/18562', 's/18563'], + searchText: '1856', selectedResult: 's/18563', isExactMatch: false, }, changeSelectedResult(+1))).toEqual({ results: ['s/18561', 's/18562', 's/18563'], + searchText: '1856', selectedResult: null, isExactMatch: false, }); expect(search({ results: ['s/18561', 's/18562', 's/18563'], + searchText: '1856', selectedResult: null, isExactMatch: false, }, changeSelectedResult(+1))).toEqual({ results: ['s/18561', 's/18562', 's/18563'], + searchText: '1856', selectedResult: 's/18561', isExactMatch: false, }); @@ -170,20 +182,24 @@ describe('reducers', () => { it('Properly wraps arround when decrementing', () => { expect(search({ results: ['s/18561', 's/18562', 's/18563'], + searchText: '1856', selectedResult: 's/18561', isExactMatch: false, }, changeSelectedResult(-1))).toEqual({ results: ['s/18561', 's/18562', 's/18563'], + searchText: '1856', selectedResult: null, isExactMatch: false, }); expect(search({ results: ['s/18561', 's/18562', 's/18563'], + searchText: '1856', selectedResult: null, isExactMatch: false, }, changeSelectedResult(-1))).toEqual({ results: ['s/18561', 's/18562', 's/18563'], + searchText: '1856', selectedResult: 's/18563', isExactMatch: false, }); -- cgit v1.1