diff options
| -rw-r--r-- | package.json | 2 | ||||
| -rw-r--r-- | src/client/react/components/presentational/Result.js | 9 | ||||
| -rw-r--r-- | src/client/react/reducers/search.js | 14 | ||||
| -rw-r--r-- | src/client/react/users.js | 1 | ||||
| -rw-r--r-- | src/client/style/_component-search.scss | 5 | ||||
| -rw-r--r-- | yarn.lock | 6 |
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; + } } } } @@ -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" |