3 files changed, 24 insertions, 13 deletions
diff --git a/src/client/react/actions/search.js b/src/client/react/actions/search.js
index 53993d3..1b6847d 100644
--- a/src/client/react/actions/search.js
+++ b/src/client/react/actions/search.js
@@ -1,10 +1,14 @@
-// eslint-disable-next-line import/prefer-default-export
 export const inputChange = typedValue => ({
   type: 'SEARCH/INPUT_CHANGE',
   typedValue,
 });
 
-export const focusChange = hasFocus => ({
-  type: 'SEARCH/FOCUS_CHANGE',
-  hasFocus,
+/**
+ * Change the selected result.
+ * @param {+1/-1} relativeChange usually +1 or -1, the change relative to the
+ *     current result.
+ */
+export const changeSelectedResult = relativeChange => ({
+  type: 'SEARCH/CHANGE_SELECTED_RESULT',
+  relativeChange,
 });
diff --git a/src/client/react/components/container/Search.jsx b/src/client/react/components/container/Search.jsx
index e974bd9..7e33e84 100644
--- a/src/client/react/components/container/Search.jsx
+++ b/src/client/react/components/container/Search.jsx
@@ -42,7 +42,8 @@ class Search extends React.Component {
   render() {
     const {
       value,
-      exactMatch,
+      selectedResult,
+      isExactMatch,
       dispatch,
     } = this.props;
 
@@ -55,7 +56,7 @@ class Search extends React.Component {
         <div className="search__input-wrapper">
           <div className="search__icon-wrapper">
             <IconFromUserType
-              userType={exactMatch ? exactMatch.type : null}
+              userType={isExactMatch ? selectedResult.type : null}
               defaultIcon={<SearchIcon />}
             />
           </div>
@@ -76,18 +77,20 @@ class Search extends React.Component {
 
 Search.propTypes = {
   value: PropTypes.string.isRequired,
-  exactMatch: PropTypes.shape(userShape),
+  selectedResult: PropTypes.shape(userShape),
+  isExactMatch: PropTypes.bool.isRequired,
   dispatch: PropTypes.func.isRequired,
 };
 
 Search.defaultProps = {
-  exactMatch: null,
+  selectedResult: null,
 };
 
 const mapStateToProps = state => ({
   results: state.search.results,
   value: state.search.input,
-  exactMatch: state.search.exactMatch,
+  selectedResult: state.search.selectedResult,
+  isExactMatch: state.search.isExactMatch,
 });
 
 export default connect(mapStateToProps)(Search);
diff --git a/src/client/react/reducers/search.js b/src/client/react/reducers/search.js
index d61689b..f566b49 100644
--- a/src/client/react/reducers/search.js
+++ b/src/client/react/reducers/search.js
@@ -6,7 +6,8 @@ const DEFAULT_STATE = {
   results: [
     { type: 's', value: '18561' },
   ],
-  exactMatch: null,
+  selectedResult: null,
+  isExactMatch: false,
 };
 
 function getSearchResults(query) {
@@ -28,12 +29,14 @@ const search = (state = DEFAULT_STATE, action) => {
   switch (action.type) {
     case 'SEARCH/INPUT_CHANGE': {
       let results = getSearchResults(action.typedValue);
-      let exactMatch = null;
+      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 > 0) && (action.typedValue === results[0].value)) {
-        [exactMatch] = results;
+        [selectedResult] = results;
+        isExactMatch = true;
         results = results.splice(1);
       }
 
@@ -41,7 +44,8 @@ const search = (state = DEFAULT_STATE, action) => {
         ...state,
         input: action.typedValue,
         results,
-        exactMatch,
+        selectedResult,
+        isExactMatch,
       };
     }
     default: