Show user icon instead of search icon on exact match

3 files changed, 45 insertions, 22 deletions

diff --git a/src/client/react/components/container/Search.js b/src/client/react/components/container/Search.js
index 206a6a1..70b3685 100644
--- a/src/client/react/components/container/Search.js
+++ b/src/client/react/components/container/Search.js
@@ -6,6 +6,7 @@ const mapStateToProps = state => ({
   results: state.search.searchResults,
   value: state.search.searchInput,
   hasFocus: state.search.hasFocus,
+  exactMatch: state.search.exactMatch,
 });
 
 const mapDispatchToProps = dispatch => ({
diff --git a/src/client/react/components/presentational/Search.jsx b/src/client/react/components/presentational/Search.jsx
index bdddf06..78beb56 100644
--- a/src/client/react/components/presentational/Search.jsx
+++ b/src/client/react/components/presentational/Search.jsx
@@ -12,34 +12,37 @@ const userShape = {
   type: PropTypes.string.isRequired,
 };
 
-const Result = ({ user }) => {
-  let icon;
-
-  switch (user.type) {
+const IconFromUserType = ({ userType }) => {
+  switch (userType) {
     case 'c':
-      icon = <ClassIcon />;
-      break;
+      return <ClassIcon />;
     case 't':
-      icon = <TeacherIcon />;
-      break;
+      return <TeacherIcon />;
     case 's':
-      icon = <StudentIcon />;
-      break;
+      return <StudentIcon />;
     case 'r':
-      icon = <RoomIcon />;
-      break;
+      return <RoomIcon />;
     default:
-      throw new Error(`Invalid user type: ${user.type}`);
+      return <SearchIcon />;
   }
+};
 
-  return (
-    <div className="search__result">
-      <div className="search__icon-wrapper">{icon}</div>
-      <div className="search__result__text">{user.value}</div>
-    </div>
-  );
+IconFromUserType.propTypes = {
+  userType: PropTypes.string,
 };
 
+IconFromUserType.defaultProps = {
+  userType: null,
+};
+
+
+const Result = ({ user }) => (
+  <div className="search__result">
+    <div className="search__icon-wrapper"><IconFromUserType userType={user.type} /></div>
+    <div className="search__result__text">{user.value}</div>
+  </div>
+);
+
 Result.propTypes = {
   user: PropTypes.shape(userShape).isRequired,
 };
@@ -51,10 +54,12 @@ const Search = ({
   hasFocus,
   value,
   results,
+  exactMatch,
 }) => (
   <div className={classnames('search', { 'search--has-focus': hasFocus, 'search--has-results': results.length > 0 })}>
     <div className="search__input-wrapper">
-      <div className="search__icon-wrapper"><SearchIcon /></div>
+      {/* Show the icon from the exact match if there is an exact match, otherwise show the search icon. */}
+      <div className="search__icon-wrapper"><IconFromUserType userType={exactMatch ? exactMatch.type : null} /></div>
       <input
         onChange={onInputChange}
         value={value}
@@ -76,6 +81,12 @@ Search.propTypes = {
   hasFocus: PropTypes.bool.isRequired,
   value: PropTypes.string.isRequired,
   results: PropTypes.arrayOf(PropTypes.shape(userShape)).isRequired,
+  exactMatch: PropTypes.shape(userShape),
 };
 
+Search.defaultProps = {
+  exactMatch: null,
+};
+
+
 export default Search;
diff --git a/src/client/react/reducers/search.js b/src/client/react/reducers/search.js
index 72fa469..dd737ed 100644
--- a/src/client/react/reducers/search.js
+++ b/src/client/react/reducers/search.js
@@ -6,6 +6,7 @@ const DEFAULT_STATE = {
   searchResults: [
     { type: 's', value: '18561' },
   ],
+  exactMatch: null,
   hasFocus: false,
 };
 
@@ -26,12 +27,22 @@ function getSearchResults(query) {
 
 const search = (state = DEFAULT_STATE, action) => {
   switch (action.type) {
-    case 'SEARCH/INPUT_CHANGE':
+    case 'SEARCH/INPUT_CHANGE': {
+      let results = getSearchResults(action.typedValue);
+      let exactMatch = false;
+
+      if ((results.length > 0) && (action.typedValue === results[0].value)) {
+        [exactMatch] = results;
+        results = results.splice(1);
+      }
+
       return {
         ...state,
         searchInput: action.typedValue,
-        searchResults: getSearchResults(action.typedValue),
+        searchResults: results,
+        exactMatch,
       };
+    }
     case 'SEARCH/FOCUS_CHANGE':
       return {
         ...state,