aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
authorNoah Loomans <noahloomans@gmail.com>2017-12-13 12:26:36 +0100
committerNoah Loomans <noahloomans@gmail.com>2017-12-13 12:26:36 +0100
commitfe27a0819a60caaa69b059f0c86d95ab0c4084b7 (patch)
tree62bc3ce011b97c9a2e7d00819beaccf145cf1b58 /src
parent41a01f056984dc74f47e0380e2fe28fa16a59ff7 (diff)
Prepair changeSelectedResult
Diffstat (limited to 'src')
-rw-r--r--src/client/react/actions/search.js12
-rw-r--r--src/client/react/components/container/Search.jsx13
-rw-r--r--src/client/react/reducers/search.js12
3 files changed, 24 insertions, 13 deletions
diff --git a/src/client/react/actions/search.js b/src/client/react/actions/search.js
index 53993d3..1b6847d 100644
--- a/src/client/react/actions/search.js
+++ b/src/client/react/actions/search.js
@@ -1,10 +1,14 @@
-// eslint-disable-next-line import/prefer-default-export
export const inputChange = typedValue => ({
type: 'SEARCH/INPUT_CHANGE',
typedValue,
});
-export const focusChange = hasFocus => ({
- type: 'SEARCH/FOCUS_CHANGE',
- hasFocus,
+/**
+ * Change the selected result.
+ * @param {+1/-1} relativeChange usually +1 or -1, the change relative to the
+ * current result.
+ */
+export const changeSelectedResult = relativeChange => ({
+ type: 'SEARCH/CHANGE_SELECTED_RESULT',
+ relativeChange,
});
diff --git a/src/client/react/components/container/Search.jsx b/src/client/react/components/container/Search.jsx
index e974bd9..7e33e84 100644
--- a/src/client/react/components/container/Search.jsx
+++ b/src/client/react/components/container/Search.jsx
@@ -42,7 +42,8 @@ class Search extends React.Component {
render() {
const {
value,
- exactMatch,
+ selectedResult,
+ isExactMatch,
dispatch,
} = this.props;
@@ -55,7 +56,7 @@ class Search extends React.Component {
<div className="search__input-wrapper">
<div className="search__icon-wrapper">
<IconFromUserType
- userType={exactMatch ? exactMatch.type : null}
+ userType={isExactMatch ? selectedResult.type : null}
defaultIcon={<SearchIcon />}
/>
</div>
@@ -76,18 +77,20 @@ class Search extends React.Component {
Search.propTypes = {
value: PropTypes.string.isRequired,
- exactMatch: PropTypes.shape(userShape),
+ selectedResult: PropTypes.shape(userShape),
+ isExactMatch: PropTypes.bool.isRequired,
dispatch: PropTypes.func.isRequired,
};
Search.defaultProps = {
- exactMatch: null,
+ selectedResult: null,
};
const mapStateToProps = state => ({
results: state.search.results,
value: state.search.input,
- exactMatch: state.search.exactMatch,
+ selectedResult: state.search.selectedResult,
+ isExactMatch: state.search.isExactMatch,
});
export default connect(mapStateToProps)(Search);
diff --git a/src/client/react/reducers/search.js b/src/client/react/reducers/search.js
index d61689b..f566b49 100644
--- a/src/client/react/reducers/search.js
+++ b/src/client/react/reducers/search.js
@@ -6,7 +6,8 @@ const DEFAULT_STATE = {
results: [
{ type: 's', value: '18561' },
],
- exactMatch: null,
+ selectedResult: null,
+ isExactMatch: false,
};
function getSearchResults(query) {
@@ -28,12 +29,14 @@ const search = (state = DEFAULT_STATE, action) => {
switch (action.type) {
case 'SEARCH/INPUT_CHANGE': {
let results = getSearchResults(action.typedValue);
- let exactMatch = null;
+ let selectedResult = null;
+ let isExactMatch = false;
// Is the typed value exactly the same as the first result? Then show the
// appropiate icon instead of the generic search icon.
if ((results.length > 0) && (action.typedValue === results[0].value)) {
- [exactMatch] = results;
+ [selectedResult] = results;
+ isExactMatch = true;
results = results.splice(1);
}
@@ -41,7 +44,8 @@ const search = (state = DEFAULT_STATE, action) => {
...state,
input: action.typedValue,
results,
- exactMatch,
+ selectedResult,
+ isExactMatch,
};
}
default: