diff options
Diffstat (limited to 'src/client')
-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 |
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; + } } } } |