aboutsummaryrefslogtreecommitdiff
path: root/src/client/react/components
diff options
context:
space:
mode:
authorNoah Loomans <noahloomans@gmail.com>2018-07-06 16:14:30 +0200
committerNoah Loomans <noahloomans@gmail.com>2018-07-06 16:14:30 +0200
commitebb14ffc54670c8e2cbeba18eac238965eee4e81 (patch)
treed411ba6066a0ee4f38e85a6327456b9b4bc4b13b /src/client/react/components
parent9f935565ebe09444b7b576b0be986c6271baef39 (diff)
client: Simplify setUser
Diffstat (limited to 'src/client/react/components')
-rw-r--r--src/client/react/components/container/HelpBox.js2
-rw-r--r--src/client/react/components/container/Results.js20
-rw-r--r--src/client/react/components/container/Search.js23
-rw-r--r--src/client/react/components/presentational/Results.js13
-rw-r--r--src/client/react/components/presentational/Search.js11
5 files changed, 36 insertions, 33 deletions
diff --git a/src/client/react/components/container/HelpBox.js b/src/client/react/components/container/HelpBox.js
index 30b2942..d10c26b 100644
--- a/src/client/react/components/container/HelpBox.js
+++ b/src/client/react/components/container/HelpBox.js
@@ -22,7 +22,7 @@ import { connect } from 'react-redux';
import HelpBox from '../presentational/HelpBox';
const mapStateToProps = state => ({
- isVisible: state.search.results.length === 0 && state.search.text === '',
+ isVisible: !state.search || (state.search.results.length === 0 && state.search.text === ''),
});
export default connect(mapStateToProps)(HelpBox);
diff --git a/src/client/react/components/container/Results.js b/src/client/react/components/container/Results.js
index 0d761d1..398adaa 100644
--- a/src/client/react/components/container/Results.js
+++ b/src/client/react/components/container/Results.js
@@ -19,27 +19,17 @@
*/
import { connect } from 'react-redux';
-import { withRouter } from 'react-router-dom';
-
-import users from '../../users';
-import { userFromMatch } from '../../lib/url';
import { setUser } from '../../store/actions';
import Results from '../presentational/Results';
-const mapStateToProps = (state, { match }) => {
- const user = userFromMatch(match);
- const searchText = state.search.text;
-
- return {
- isExactMatch: user != null && searchText === users.byId[user].value,
- results: state.search.results,
- selectedResult: state.search.selected,
- };
-};
+const mapStateToProps = state => ({
+ results: state.search ? state.search.results : undefined,
+ selectedResult: state.search && state.search.selected,
+});
const mapDispatchToProps = dispatch => ({
setUser: user => dispatch(setUser(user)),
});
-export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Results));
+export default connect(mapStateToProps, mapDispatchToProps)(Results);
diff --git a/src/client/react/components/container/Search.js b/src/client/react/components/container/Search.js
index b680fc6..73919d3 100644
--- a/src/client/react/components/container/Search.js
+++ b/src/client/react/components/container/Search.js
@@ -28,21 +28,32 @@ import users from '../../users';
const mapStateToProps = (state, { location }) => {
const currentUser = userFromLocation(location);
- const searchText = state.search.text;
- const isExactMatch = currentUser != null && searchText === users.byId[currentUser].value;
+ const selectedUser = state.search && state.search.selected;
+ let searchText;
+ let isExactMatch;
+
+ if (state.search) {
+ searchText = state.search.text;
+ isExactMatch = false;
+ } else if (currentUser) {
+ searchText = users.byId[currentUser].value;
+ isExactMatch = true;
+ } else {
+ searchText = '';
+ isExactMatch = false;
+ }
return {
currentUser,
+ selectedUser,
+ searchText,
isExactMatch,
- selectedUser: state.search.selected,
- results: state.search.results,
- searchText: state.search.text,
};
};
const mapDispatchToProps = dispatch => ({
setUser: user => dispatch(setUserAction(user)),
- onInputChange: searchText => dispatch({
+ changeInput: searchText => dispatch({
type: 'SEARCH/INPUT_CHANGE',
searchText,
}),
diff --git a/src/client/react/components/presentational/Results.js b/src/client/react/components/presentational/Results.js
index 173c644..4abd507 100644
--- a/src/client/react/components/presentational/Results.js
+++ b/src/client/react/components/presentational/Results.js
@@ -27,34 +27,35 @@ import './Results.scss';
class Results extends React.Component {
static propTypes = {
- results: PropTypes.arrayOf(PropTypes.string).isRequired,
+ results: PropTypes.arrayOf(PropTypes.string),
selectedResult: PropTypes.string,
- isExactMatch: PropTypes.bool.isRequired,
setUser: PropTypes.func.isRequired,
};
static defaultProps = {
selectedResult: null,
+ results: [],
};
render() {
const {
results,
selectedResult,
- isExactMatch,
setUser,
} = this.props;
+ const hasResults = results.length > 0;
+
return (
<div
className={classnames('Results', {
- hasResults: !isExactMatch && results.length > 0,
+ hasResults,
})}
style={{
- minHeight: isExactMatch ? 0 : results.length * 54,
+ minHeight: hasResults ? results.length * 54 : 0,
}}
>
- {!isExactMatch && results.map(userId => (
+ {results.map(userId => (
<Result
key={userId}
userId={userId}
diff --git a/src/client/react/components/presentational/Search.js b/src/client/react/components/presentational/Search.js
index c39b441..e7f49d6 100644
--- a/src/client/react/components/presentational/Search.js
+++ b/src/client/react/components/presentational/Search.js
@@ -37,8 +37,9 @@ class Search extends React.Component {
selectedUser: PropTypes.string,
searchText: PropTypes.string.isRequired,
isExactMatch: PropTypes.bool.isRequired,
- onInputChange: PropTypes.func.isRequired,
+
setUser: PropTypes.func.isRequired,
+ changeInput: PropTypes.func.isRequired,
changeSelectedUser: PropTypes.func.isRequired,
};
@@ -106,9 +107,9 @@ class Search extends React.Component {
render() {
const {
searchText,
- selectedUser,
+ currentUser,
isExactMatch,
- onInputChange,
+ changeInput,
} = this.props;
const {
@@ -121,13 +122,13 @@ class Search extends React.Component {
<div className="inputWrapper">
<div className="iconWrapper">
<IconFromUserType
- userType={isExactMatch ? users.byId[selectedUser].type : null}
+ userType={isExactMatch ? users.byId[currentUser].type : null}
defaultIcon={<SearchIcon />}
/>
</div>
<input
id="searchInput"
- onChange={event => onInputChange(event.target.value)}
+ onChange={event => changeInput(event.target.value)}
onKeyDown={event => this.handleKeyDown(event)}
value={searchText}
placeholder="Zoeken"