aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
authorNoah Loomans <noahloomans@gmail.com>2017-12-10 15:58:25 +0100
committerNoah Loomans <noahloomans@gmail.com>2017-12-10 15:58:25 +0100
commit797fb96cd0001d6c739c89507befc73d3d8a6614 (patch)
treeb5471fb96399526d056b5a57553313a92f22ed12 /src
parent36dc0fb88258af24069f61935656334c35ef13b3 (diff)
Show user icon instead of search icon on exact match
Diffstat (limited to 'src')
-rw-r--r--src/client/react/components/container/Search.js1
-rw-r--r--src/client/react/components/presentational/Search.jsx51
-rw-r--r--src/client/react/reducers/search.js15
3 files changed, 45 insertions, 22 deletions
diff --git a/src/client/react/components/container/Search.js b/src/client/react/components/container/Search.js
index 206a6a1..70b3685 100644
--- a/src/client/react/components/container/Search.js
+++ b/src/client/react/components/container/Search.js
@@ -6,6 +6,7 @@ const mapStateToProps = state => ({
results: state.search.searchResults,
value: state.search.searchInput,
hasFocus: state.search.hasFocus,
+ exactMatch: state.search.exactMatch,
});
const mapDispatchToProps = dispatch => ({
diff --git a/src/client/react/components/presentational/Search.jsx b/src/client/react/components/presentational/Search.jsx
index bdddf06..78beb56 100644
--- a/src/client/react/components/presentational/Search.jsx
+++ b/src/client/react/components/presentational/Search.jsx
@@ -12,34 +12,37 @@ const userShape = {
type: PropTypes.string.isRequired,
};
-const Result = ({ user }) => {
- let icon;
-
- switch (user.type) {
+const IconFromUserType = ({ userType }) => {
+ switch (userType) {
case 'c':
- icon = <ClassIcon />;
- break;
+ return <ClassIcon />;
case 't':
- icon = <TeacherIcon />;
- break;
+ return <TeacherIcon />;
case 's':
- icon = <StudentIcon />;
- break;
+ return <StudentIcon />;
case 'r':
- icon = <RoomIcon />;
- break;
+ return <RoomIcon />;
default:
- throw new Error(`Invalid user type: ${user.type}`);
+ return <SearchIcon />;
}
+};
- return (
- <div className="search__result">
- <div className="search__icon-wrapper">{icon}</div>
- <div className="search__result__text">{user.value}</div>
- </div>
- );
+IconFromUserType.propTypes = {
+ userType: PropTypes.string,
};
+IconFromUserType.defaultProps = {
+ userType: null,
+};
+
+
+const Result = ({ user }) => (
+ <div className="search__result">
+ <div className="search__icon-wrapper"><IconFromUserType userType={user.type} /></div>
+ <div className="search__result__text">{user.value}</div>
+ </div>
+);
+
Result.propTypes = {
user: PropTypes.shape(userShape).isRequired,
};
@@ -51,10 +54,12 @@ const Search = ({
hasFocus,
value,
results,
+ exactMatch,
}) => (
<div className={classnames('search', { 'search--has-focus': hasFocus, 'search--has-results': results.length > 0 })}>
<div className="search__input-wrapper">
- <div className="search__icon-wrapper"><SearchIcon /></div>
+ {/* Show the icon from the exact match if there is an exact match, otherwise show the search icon. */}
+ <div className="search__icon-wrapper"><IconFromUserType userType={exactMatch ? exactMatch.type : null} /></div>
<input
onChange={onInputChange}
value={value}
@@ -76,6 +81,12 @@ Search.propTypes = {
hasFocus: PropTypes.bool.isRequired,
value: PropTypes.string.isRequired,
results: PropTypes.arrayOf(PropTypes.shape(userShape)).isRequired,
+ exactMatch: PropTypes.shape(userShape),
};
+Search.defaultProps = {
+ exactMatch: null,
+};
+
+
export default Search;
diff --git a/src/client/react/reducers/search.js b/src/client/react/reducers/search.js
index 72fa469..dd737ed 100644
--- a/src/client/react/reducers/search.js
+++ b/src/client/react/reducers/search.js
@@ -6,6 +6,7 @@ const DEFAULT_STATE = {
searchResults: [
{ type: 's', value: '18561' },
],
+ exactMatch: null,
hasFocus: false,
};
@@ -26,12 +27,22 @@ function getSearchResults(query) {
const search = (state = DEFAULT_STATE, action) => {
switch (action.type) {
- case 'SEARCH/INPUT_CHANGE':
+ case 'SEARCH/INPUT_CHANGE': {
+ let results = getSearchResults(action.typedValue);
+ let exactMatch = false;
+
+ if ((results.length > 0) && (action.typedValue === results[0].value)) {
+ [exactMatch] = results;
+ results = results.splice(1);
+ }
+
return {
...state,
searchInput: action.typedValue,
- searchResults: getSearchResults(action.typedValue),
+ searchResults: results,
+ exactMatch,
};
+ }
case 'SEARCH/FOCUS_CHANGE':
return {
...state,