Add client support for alts

6 files changed, 26 insertions, 11 deletions

diff --git a/package.json b/package.json
index 00b71b4..3b5a774 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,7 @@
     "express": "^4.13.4",
     "extract-text-webpack-plugin": "^3.0.2",
     "flexibility": "^2.0.1",
-    "fuzzy": "^0.1.1",
+    "fuzzy-search": "^2.0.1",
     "iconv-lite": "^0.4.17",
     "jade": "~1.11.0",
     "left-pad": "^1.1.1",
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;
+      }
     }
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 525ecbe..10dc919 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3234,9 +3234,9 @@ functional-red-black-tree@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
 
-fuzzy@^0.1.1:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/fuzzy/-/fuzzy-0.1.3.tgz#4c76ec2ff0ac1a36a9dccf9a00df8623078d4ed8"
+fuzzy-search@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/fuzzy-search/-/fuzzy-search-2.0.1.tgz#f96c34434d7a41543c257842ac60d62bcbcac934"
 
 gauge@~2.7.3:
   version "2.7.4"