aboutsummaryrefslogtreecommitdiff
path: root/src/client
diff options
context:
space:
mode:
authorNoah Loomans <noahloomans@gmail.com>2018-02-04 11:36:44 +0100
committerNoah Loomans <noahloomans@gmail.com>2018-02-04 11:36:44 +0100
commitc325916e381d6ac13fcc840b2d4baa87913a3184 (patch)
tree398b7c274f6d41db28d331d5925d12acf8701ca6 /src/client
parent77f5b8fbe87ce992c46ee5513eaa25c7a7f129ec (diff)
Reimplement isExactMatch to compair against the url user.
Diffstat (limited to 'src/client')
-rw-r--r--src/client/react/components/container/Results.js11
-rw-r--r--src/client/react/components/container/Search.js12
-rw-r--r--src/client/react/reducers/search.js28
-rw-r--r--src/client/react/reducers/search.test.js50
4 files changed, 23 insertions, 78 deletions
diff --git a/src/client/react/components/container/Results.js b/src/client/react/components/container/Results.js
index 68a090b..f65c0c8 100644
--- a/src/client/react/components/container/Results.js
+++ b/src/client/react/components/container/Results.js
@@ -4,13 +4,14 @@ import classnames from 'classnames';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
+import users from '../../users';
import { setUser } from '../../actions/search';
import { userFromMatch } from '../../lib/url';
import Result from '../presentational/Result';
const Results = ({
results,
- isExactMatch,
+ searchText,
selectedResult,
match,
history,
@@ -18,6 +19,10 @@ const Results = ({
}) => {
const user = userFromMatch(match);
+ const isExactMatch =
+ user != null &&
+ searchText === users.byId[user].value;
+
return (
<div
className={classnames('search__results', {
@@ -50,7 +55,7 @@ const Results = ({
Results.propTypes = {
results: PropTypes.arrayOf(PropTypes.string).isRequired,
- isExactMatch: PropTypes.bool.isRequired,
+ searchText: PropTypes.string.isRequired,
selectedResult: PropTypes.string,
// react-router
@@ -67,7 +72,7 @@ Results.defaultProps = {
const mapStateToProps = state => ({
results: state.search.results,
- isExactMatch: state.search.isExactMatch,
+ searchText: state.search.searchText,
selectedResult: state.search.selectedResult,
});
diff --git a/src/client/react/components/container/Search.js b/src/client/react/components/container/Search.js
index b42699f..32996e3 100644
--- a/src/client/react/components/container/Search.js
+++ b/src/client/react/components/container/Search.js
@@ -82,9 +82,8 @@ class Search extends React.Component {
render() {
const {
- selectedResult,
- isExactMatch,
searchText,
+ match,
dispatch,
} = this.props;
@@ -92,13 +91,19 @@ class Search extends React.Component {
hasFocus,
} = this.state;
+ const urlUser = userFromMatch(match);
+
+ const isExactMatch =
+ urlUser != null &&
+ searchText === users.byId[urlUser].value;
+
return (
<div className="search">
<div className={classnames('search-overflow', { 'search--has-focus': hasFocus })}>
<div className="search__input-wrapper">
<div className="search__icon-wrapper">
<IconFromUserType
- userType={isExactMatch ? users.byId[selectedResult].type : null}
+ userType={isExactMatch ? users.byId[urlUser].type : null}
defaultIcon={<SearchIcon />}
/>
</div>
@@ -123,7 +128,6 @@ class Search extends React.Component {
Search.propTypes = {
results: PropTypes.arrayOf(PropTypes.string).isRequired,
selectedResult: PropTypes.string,
- isExactMatch: PropTypes.bool.isRequired,
searchText: PropTypes.string.isRequired,
// react-router
diff --git a/src/client/react/reducers/search.js b/src/client/react/reducers/search.js
index 770cdcb..6293b8a 100644
--- a/src/client/react/reducers/search.js
+++ b/src/client/react/reducers/search.js
@@ -8,7 +8,6 @@ const DEFAULT_STATE = {
results: [],
searchText: '',
selectedResult: null,
- isExactMatch: false,
};
function getSearchResults(allUsers, query) {
@@ -40,36 +39,19 @@ const search = (state = DEFAULT_STATE, action) => {
results: [],
searchText: users.byId[user].value,
selectedResult: user,
- isExactMatch: true,
};
}
- case 'SEARCH/INPUT_CHANGE': {
- 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
- // appropriate icon instead of the generic search icon.
- if ((results.length === 1) && (action.searchText === users.byId[results[0]].value)) {
- [selectedResult] = results;
- isExactMatch = true;
- }
-
+ case 'SEARCH/INPUT_CHANGE':
return {
...state,
- results,
- searchText,
- selectedResult,
- isExactMatch,
+ results: getSearchResults(users.allUsers, action.searchText),
+ searchText: action.searchText,
+ selectedResult: null,
};
- }
case 'SEARCH/CHANGE_SELECTED_RESULT': {
- const { results, isExactMatch } = state;
-
- if (isExactMatch) return state;
+ const { results } = state;
const prevSelectedResult = state.selectedResult;
const prevSelectedResultIndex = results.indexOf(prevSelectedResult);
diff --git a/src/client/react/reducers/search.test.js b/src/client/react/reducers/search.test.js
index 22d32e2..423a5aa 100644
--- a/src/client/react/reducers/search.test.js
+++ b/src/client/react/reducers/search.test.js
@@ -31,7 +31,6 @@ describe('reducers', () => {
results: [],
searchText: '18561',
selectedResult: 's/18561',
- isExactMatch: true,
});
});
});
@@ -42,7 +41,6 @@ describe('reducers', () => {
results: [],
searchText: '',
selectedResult: null,
- isExactMatch: false,
});
});
@@ -51,7 +49,6 @@ describe('reducers', () => {
results: [],
searchText: ' ',
selectedResult: null,
- isExactMatch: false,
});
});
@@ -65,18 +62,6 @@ describe('reducers', () => {
],
searchText: '18',
selectedResult: null,
- isExactMatch: false,
- });
- });
-
- it('Selects the first result and sets isExactMatch to true when there is an exact match', () => {
- expect(search(undefined, inputChange('18561'))).toEqual({
- results: [
- 's/18561',
- ],
- searchText: '18561',
- selectedResult: 's/18561',
- isExactMatch: true,
});
});
});
@@ -87,7 +72,6 @@ describe('reducers', () => {
results: [],
searchText: '',
selectedResult: null,
- isExactMatch: false,
};
const actionPlus = changeSelectedResult(+1);
@@ -101,32 +85,11 @@ describe('reducers', () => {
expect(nextStateMin).toEqual(prevState);
});
- it('Does nothing when there is an exact match', () => {
- const prevState = {
- results: ['s/18561'],
- searchText: '18561',
- selectedResult: 's/18561',
- isExactMatch: true,
- };
-
- const actionPlus = changeSelectedResult(+1);
- const actionMin = changeSelectedResult(-1);
-
- deepFreeze([prevState, actionPlus, actionMin]);
-
- const nextStatePlus = search(prevState, actionPlus);
- const nextStateMin = search(prevState, actionMin);
-
- expect(nextStatePlus).toEqual(prevState);
- expect(nextStateMin).toEqual(prevState);
- });
-
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,
};
const actionPlus = changeSelectedResult(+1);
@@ -152,7 +115,6 @@ describe('reducers', () => {
results: ['s/18561', 's/18562', 's/18563'],
searchText: '1856',
selectedResult: 's/18562',
- isExactMatch: false,
};
const actionPlus = changeSelectedResult(+1);
@@ -173,55 +135,47 @@ describe('reducers', () => {
});
});
- it('Properly wraps arround when incrementing', () => {
+ it('Properly wraps around 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,
});
});
- it('Properly wraps arround when decrementing', () => {
+ it('Properly wraps around 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,
});
});
});