Reimplement isExactMatch to compair against the url user.

4 files changed, 23 insertions, 78 deletions

diff --git a/src/client/react/components/container/Results.js b/src/client/react/components/container/Results.js
index 68a090b..f65c0c8 100644
--- a/src/client/react/components/container/Results.js
+++ b/src/client/react/components/container/Results.js
@@ -4,13 +4,14 @@ import classnames from 'classnames';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
 
+import users from '../../users';
 import { setUser } from '../../actions/search';
 import { userFromMatch } from '../../lib/url';
 import Result from '../presentational/Result';
 
 const Results = ({
   results,
-  isExactMatch,
+  searchText,
   selectedResult,
   match,
   history,
@@ -18,6 +19,10 @@ const Results = ({
 }) => {
   const user = userFromMatch(match);
 
+  const isExactMatch =
+    user != null &&
+    searchText === users.byId[user].value;
+
   return (
     <div
       className={classnames('search__results', {
@@ -50,7 +55,7 @@ const Results = ({
 
 Results.propTypes = {
   results: PropTypes.arrayOf(PropTypes.string).isRequired,
-  isExactMatch: PropTypes.bool.isRequired,
+  searchText: PropTypes.string.isRequired,
   selectedResult: PropTypes.string,
 
   // react-router
@@ -67,7 +72,7 @@ Results.defaultProps = {
 
 const mapStateToProps = state => ({
   results: state.search.results,
-  isExactMatch: state.search.isExactMatch,
+  searchText: state.search.searchText,
   selectedResult: state.search.selectedResult,
 });
 
diff --git a/src/client/react/components/container/Search.js b/src/client/react/components/container/Search.js
index b42699f..32996e3 100644
--- a/src/client/react/components/container/Search.js
+++ b/src/client/react/components/container/Search.js
@@ -82,9 +82,8 @@ class Search extends React.Component {
 
   render() {
     const {
-      selectedResult,
-      isExactMatch,
       searchText,
+      match,
       dispatch,
     } = this.props;
 
@@ -92,13 +91,19 @@ class Search extends React.Component {
       hasFocus,
     } = this.state;
 
+    const urlUser = userFromMatch(match);
+
+    const isExactMatch =
+      urlUser != null &&
+      searchText === users.byId[urlUser].value;
+
     return (
       <div className="search">
         <div className={classnames('search-overflow', { 'search--has-focus': hasFocus })}>
           <div className="search__input-wrapper">
             <div className="search__icon-wrapper">
               <IconFromUserType
-                userType={isExactMatch ? users.byId[selectedResult].type : null}
+                userType={isExactMatch ? users.byId[urlUser].type : null}
                 defaultIcon={<SearchIcon />}
               />
             </div>
@@ -123,7 +128,6 @@ class Search extends React.Component {
 Search.propTypes = {
   results: PropTypes.arrayOf(PropTypes.string).isRequired,
   selectedResult: PropTypes.string,
-  isExactMatch: PropTypes.bool.isRequired,
   searchText: PropTypes.string.isRequired,
 
   // react-router
diff --git a/src/client/react/reducers/search.js b/src/client/react/reducers/search.js
index 770cdcb..6293b8a 100644
--- a/src/client/react/reducers/search.js
+++ b/src/client/react/reducers/search.js
@@ -8,7 +8,6 @@ const DEFAULT_STATE = {
   results: [],
   searchText: '',
   selectedResult: null,
-  isExactMatch: false,
 };
 
 function getSearchResults(allUsers, query) {
@@ -40,36 +39,19 @@ const search = (state = DEFAULT_STATE, action) => {
         results: [],
         searchText: users.byId[user].value,
         selectedResult: user,
-        isExactMatch: true,
       };
     }
 
-    case 'SEARCH/INPUT_CHANGE': {
-      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
-      // appropriate icon instead of the generic search icon.
-      if ((results.length === 1) && (action.searchText === users.byId[results[0]].value)) {
-        [selectedResult] = results;
-        isExactMatch = true;
-      }
-
+    case 'SEARCH/INPUT_CHANGE':
       return {
         ...state,
-        results,
-        searchText,
-        selectedResult,
-        isExactMatch,
+        results: getSearchResults(users.allUsers, action.searchText),
+        searchText: action.searchText,
+        selectedResult: null,
       };
-    }
 
     case 'SEARCH/CHANGE_SELECTED_RESULT': {
-      const { results, isExactMatch } = state;
-
-      if (isExactMatch) return state;
+      const { results } = state;
 
       const prevSelectedResult = state.selectedResult;
       const prevSelectedResultIndex = results.indexOf(prevSelectedResult);
diff --git a/src/client/react/reducers/search.test.js b/src/client/react/reducers/search.test.js
index 22d32e2..423a5aa 100644
--- a/src/client/react/reducers/search.test.js
+++ b/src/client/react/reducers/search.test.js
@@ -31,7 +31,6 @@ describe('reducers', () => {
           results: [],
           searchText: '18561',
           selectedResult: 's/18561',
-          isExactMatch: true,
         });
       });
     });
@@ -42,7 +41,6 @@ describe('reducers', () => {
           results: [],
           searchText: '',
           selectedResult: null,
-          isExactMatch: false,
         });
       });
 
@@ -51,7 +49,6 @@ describe('reducers', () => {
           results: [],
           searchText: ' ',
           selectedResult: null,
-          isExactMatch: false,
         });
       });
 
@@ -65,18 +62,6 @@ describe('reducers', () => {
           ],
           searchText: '18',
           selectedResult: null,
-          isExactMatch: false,
-        });
-      });
-
-      it('Selects the first result and sets isExactMatch to true when there is an exact match', () => {
-        expect(search(undefined, inputChange('18561'))).toEqual({
-          results: [
-            's/18561',
-          ],
-          searchText: '18561',
-          selectedResult: 's/18561',
-          isExactMatch: true,
         });
       });
     });
@@ -87,7 +72,6 @@ describe('reducers', () => {
           results: [],
           searchText: '',
           selectedResult: null,
-          isExactMatch: false,
         };
 
         const actionPlus = changeSelectedResult(+1);
@@ -101,32 +85,11 @@ describe('reducers', () => {
         expect(nextStateMin).toEqual(prevState);
       });
 
-      it('Does nothing when there is an exact match', () => {
-        const prevState = {
-          results: ['s/18561'],
-          searchText: '18561',
-          selectedResult: 's/18561',
-          isExactMatch: true,
-        };
-
-        const actionPlus = changeSelectedResult(+1);
-        const actionMin = changeSelectedResult(-1);
-
-        deepFreeze([prevState, actionPlus, actionMin]);
-
-        const nextStatePlus = search(prevState, actionPlus);
-        const nextStateMin = search(prevState, actionMin);
-
-        expect(nextStatePlus).toEqual(prevState);
-        expect(nextStateMin).toEqual(prevState);
-      });
-
       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,
         };
 
         const actionPlus = changeSelectedResult(+1);
@@ -152,7 +115,6 @@ describe('reducers', () => {
           results: ['s/18561', 's/18562', 's/18563'],
           searchText: '1856',
           selectedResult: 's/18562',
-          isExactMatch: false,
         };
 
         const actionPlus = changeSelectedResult(+1);
@@ -173,55 +135,47 @@ describe('reducers', () => {
         });
       });
 
-      it('Properly wraps arround when incrementing', () => {
+      it('Properly wraps around 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,
         });
       });
 
-      it('Properly wraps arround when decrementing', () => {
+      it('Properly wraps around 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,
         });
       });
     });