Save searchText in redux store

4 files changed, 27 insertions, 4 deletions

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,
         });