aboutsummaryrefslogtreecommitdiff
path: root/src/client
diff options
context:
space:
mode:
Diffstat (limited to 'src/client')
-rw-r--r--src/client/react/actions/search.js4
-rw-r--r--src/client/react/components/container/Search.js4
-rw-r--r--src/client/react/reducers/search.js7
-rw-r--r--src/client/react/reducers/search.test.js16
4 files changed, 27 insertions, 4 deletions
diff --git a/src/client/react/actions/search.js b/src/client/react/actions/search.js
index 1b6847d..d903e64 100644
--- a/src/client/react/actions/search.js
+++ b/src/client/react/actions/search.js
@@ -1,6 +1,6 @@
-export const inputChange = typedValue => ({
+export const inputChange = searchText => ({
type: 'SEARCH/INPUT_CHANGE',
- typedValue,
+ searchText,
});
/**
diff --git a/src/client/react/components/container/Search.js b/src/client/react/components/container/Search.js
index 957f76e..06523be 100644
--- a/src/client/react/components/container/Search.js
+++ b/src/client/react/components/container/Search.js
@@ -62,6 +62,7 @@ class Search extends React.Component {
const {
selectedResult,
isExactMatch,
+ searchText,
dispatch,
} = this.props;
@@ -82,6 +83,7 @@ class Search extends React.Component {
id="search__input"
onChange={event => dispatch(inputChange(event.target.value))}
onKeyDown={this.onKeyDown}
+ value={searchText}
placeholder="Zoeken"
onFocus={this.onFocus}
onBlur={this.onBlur}
@@ -96,6 +98,7 @@ class Search extends React.Component {
Search.propTypes = {
selectedResult: PropTypes.string,
isExactMatch: PropTypes.bool.isRequired,
+ searchText: PropTypes.string.isRequired,
dispatch: PropTypes.func.isRequired,
history: PropTypes.shape({
push: PropTypes.func.isRequired,
@@ -108,6 +111,7 @@ Search.defaultProps = {
const mapStateToProps = state => ({
results: state.search.results,
+ searchText: state.search.searchText,
selectedResult: state.search.selectedResult,
isExactMatch: state.search.isExactMatch,
});
diff --git a/src/client/react/reducers/search.js b/src/client/react/reducers/search.js
index 2a7e7a5..6027ed7 100644
--- a/src/client/react/reducers/search.js
+++ b/src/client/react/reducers/search.js
@@ -5,6 +5,7 @@ const DEFAULT_STATE = {
results: [
's/18562',
],
+ searchText: '',
selectedResult: null,
isExactMatch: false,
};
@@ -27,13 +28,14 @@ function getSearchResults(allUsers, query) {
const search = (state = DEFAULT_STATE, action) => {
switch (action.type) {
case 'SEARCH/INPUT_CHANGE': {
- const results = getSearchResults(users.allUsers, action.typedValue);
+ const { searchText } = action;
+ const results = getSearchResults(users.allUsers, action.searchText);
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 === 1) && (action.typedValue === users.byId[results[0]].value)) {
+ if ((results.length === 1) && (action.searchText === users.byId[results[0]].value)) {
[selectedResult] = results;
isExactMatch = true;
}
@@ -41,6 +43,7 @@ const search = (state = DEFAULT_STATE, action) => {
return {
...state,
results,
+ searchText,
selectedResult,
isExactMatch,
};
diff --git a/src/client/react/reducers/search.test.js b/src/client/react/reducers/search.test.js
index e0ca18e..ddd7f9b 100644
--- a/src/client/react/reducers/search.test.js
+++ b/src/client/react/reducers/search.test.js
@@ -20,6 +20,7 @@ describe('reducers', () => {
it('Returns no results when nothing is typed in', () => {
expect(search(undefined, inputChange(''))).toEqual({
results: [],
+ searchText: '',
selectedResult: null,
isExactMatch: false,
});
@@ -28,6 +29,7 @@ describe('reducers', () => {
it('Returns no results when a space is typed in', () => {
expect(search(undefined, inputChange(' '))).toEqual({
results: [],
+ searchText: ' ',
selectedResult: null,
isExactMatch: false,
});
@@ -41,6 +43,7 @@ describe('reducers', () => {
's/18563',
's/18564',
],
+ searchText: '18',
selectedResult: null,
isExactMatch: false,
});
@@ -51,6 +54,7 @@ describe('reducers', () => {
results: [
's/18561',
],
+ searchText: '18561',
selectedResult: 's/18561',
isExactMatch: true,
});
@@ -61,6 +65,7 @@ describe('reducers', () => {
it('Does nothing when there are no results', () => {
const prevState = {
results: [],
+ searchText: '',
selectedResult: null,
isExactMatch: false,
};
@@ -79,6 +84,7 @@ describe('reducers', () => {
it('Does nothing when there is an exact match', () => {
const prevState = {
results: ['s/18561'],
+ searchText: '18561',
selectedResult: 's/18561',
isExactMatch: true,
};
@@ -98,6 +104,7 @@ describe('reducers', () => {
it('Switches to the correct selectedResult when no selected result is selected', () => {
const prevState = {
results: ['s/18561', 's/18562', 's/18563'],
+ searchText: '1856',
selectedResult: null,
isExactMatch: false,
};
@@ -123,6 +130,7 @@ describe('reducers', () => {
it('Switches to the correct selectedResult when there is a selected result selected', () => {
const prevState = {
results: ['s/18561', 's/18562', 's/18563'],
+ searchText: '1856',
selectedResult: 's/18562',
isExactMatch: false,
};
@@ -148,20 +156,24 @@ describe('reducers', () => {
it('Properly wraps arround when incrementing', () => {
expect(search({
results: ['s/18561', 's/18562', 's/18563'],
+ searchText: '1856',
selectedResult: 's/18563',
isExactMatch: false,
}, changeSelectedResult(+1))).toEqual({
results: ['s/18561', 's/18562', 's/18563'],
+ searchText: '1856',
selectedResult: null,
isExactMatch: false,
});
expect(search({
results: ['s/18561', 's/18562', 's/18563'],
+ searchText: '1856',
selectedResult: null,
isExactMatch: false,
}, changeSelectedResult(+1))).toEqual({
results: ['s/18561', 's/18562', 's/18563'],
+ searchText: '1856',
selectedResult: 's/18561',
isExactMatch: false,
});
@@ -170,20 +182,24 @@ describe('reducers', () => {
it('Properly wraps arround when decrementing', () => {
expect(search({
results: ['s/18561', 's/18562', 's/18563'],
+ searchText: '1856',
selectedResult: 's/18561',
isExactMatch: false,
}, changeSelectedResult(-1))).toEqual({
results: ['s/18561', 's/18562', 's/18563'],
+ searchText: '1856',
selectedResult: null,
isExactMatch: false,
});
expect(search({
results: ['s/18561', 's/18562', 's/18563'],
+ searchText: '1856',
selectedResult: null,
isExactMatch: false,
}, changeSelectedResult(-1))).toEqual({
results: ['s/18561', 's/18562', 's/18563'],
+ searchText: '1856',
selectedResult: 's/18563',
isExactMatch: false,
});
generated by cgit v1.1 at 2025-10-31 08:49:20 +0000