aboutsummaryrefslogtreecommitdiff
path: root/src/client
diff options
context:
space:
mode:
authorNoah Loomans <noahloomans@gmail.com>2018-02-16 22:10:33 +0100
committerNoah Loomans <noahloomans@gmail.com>2018-02-16 22:10:33 +0100
commit065c798078586b98f974c4f8ee2d1a7af1ad9218 (patch)
tree8f7c3e6132da54438b26a169e9d1ecab95d3c6df /src/client
parent48ca524d275e05d39904a40486fb2a146eb37371 (diff)
Add client support for alts
Diffstat (limited to 'src/client')
-rw-r--r--src/client/react/components/presentational/Result.js9
-rw-r--r--src/client/react/reducers/search.js14
-rw-r--r--src/client/react/users.js1
-rw-r--r--src/client/style/_component-search.scss5
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;
+ }
}
}
}