Add client support for alts

4 files changed, 22 insertions, 7 deletions

diff --git a/src/client/react/components/presentational/Result.js b/src/client/react/components/presentational/Result.js
index a30cf52..83c6709 100644
--- a/src/client/react/components/presentational/Result.js
+++ b/src/client/react/components/presentational/Result.js
@@ -24,7 +24,14 @@ class Result extends React.Component {
         <div className="search__icon-wrapper">
           <IconFromUserType userType={users.byId[this.props.userId].type} />
         </div>
-        <div className="search__result__text">{users.byId[this.props.userId].value}</div>
+        <div className="search__result__text">
+          {users.byId[this.props.userId].value}
+          {users.byId[this.props.userId].alt &&
+            <span className="search__result__text__alt">
+              {` ${users.byId[this.props.userId].alt}`}
+            </span>
+          }
+        </div>
       </div>
     );
   }
diff --git a/src/client/react/reducers/search.js b/src/client/react/reducers/search.js
index 6293b8a..2f02874 100644
--- a/src/client/react/reducers/search.js
+++ b/src/client/react/reducers/search.js
@@ -1,4 +1,5 @@
-import fuzzy from 'fuzzy';
+import FuzzySearch from 'fuzzy-search';
+import uniqBy from 'lodash/uniqBy';
 import users from '../users';
 
 const DEFAULT_STATE = {
@@ -11,16 +12,17 @@ const DEFAULT_STATE = {
 };
 
 function getSearchResults(allUsers, query) {
+  const searcher = new FuzzySearch(allUsers, ['value', 'alt']);
+
   if (query.trim() === '') {
     return [];
   }
 
-  const allResults = fuzzy.filter(query, allUsers, {
-    extract: user => user.value,
-  });
+  const allResults = searcher.search(query);
+  const uniqResults = uniqBy(allResults, result => result.id);
+  const firstResults = uniqResults.splice(0, 4);
 
-  const firstResults = allResults.splice(0, 4);
-  const userIds = firstResults.map(result => result.original.id);
+  const userIds = firstResults.map(result => result.id);
 
   return userIds;
 }
diff --git a/src/client/react/users.js b/src/client/react/users.js
index 01ff093..bb28317 100644
--- a/src/client/react/users.js
+++ b/src/client/react/users.js
@@ -56,6 +56,7 @@ USERS.forEach((user) => {
     user: {
       type: user.type,
       value: user.value,
+      alt: user.alt,
       id: getId(user),
     },
   });
diff --git a/src/client/style/_component-search.scss b/src/client/style/_component-search.scss
index 1687ec3..b989cc1 100644
--- a/src/client/style/_component-search.scss
+++ b/src/client/style/_component-search.scss
@@ -61,6 +61,11 @@
       padding-left: 0px;
       font-size: 16px;
       transform: translate(0, 3px);
+
+      &__alt {
+        font-style: italic;
+        color: gray;
+      }
     }
   }
 }