diff options
Diffstat (limited to 'src/client/react/components/container')
-rw-r--r-- | src/client/react/components/container/Results.js | 37 | ||||
-rw-r--r-- | src/client/react/components/container/Search.js | 2 |
2 files changed, 34 insertions, 5 deletions
diff --git a/src/client/react/components/container/Results.js b/src/client/react/components/container/Results.js index 1fb5f44..c329c3c 100644 --- a/src/client/react/components/container/Results.js +++ b/src/client/react/components/container/Results.js @@ -2,9 +2,18 @@ import React from 'react'; import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import classnames from 'classnames'; +import { withRouter } from 'react-router-dom'; import Result from '../presentational/Result'; +import { setUser } from '../../actions/search'; -const Results = (({ results, isExactMatch, selectedResult }) => ( +const Results = ({ + results, + isExactMatch, + urlUser, + selectedResult, + history, + dispatch, +}) => ( <div className={classnames('search__results', { 'search__results--has-results': !isExactMatch && results.length > 0, @@ -14,18 +23,38 @@ const Results = (({ results, isExactMatch, selectedResult }) => ( }} > {!isExactMatch && results.map(userId => ( - <Result key={userId} userId={userId} isSelected={userId === selectedResult} /> + <Result + key={userId} + userId={userId} + isSelected={userId === selectedResult} + onClick={() => { + if (userId === urlUser) { + // EDGE CASE: The user is set if the user changes, but it doesn't + // change if the result is already the one we are viewing. + // Therefor, we need to dispatch the SET_USER command manually. + dispatch(setUser(urlUser)); + } else { + history.push(`/${userId}`); + } + }} + /> ))} </div> -)); +); Results.propTypes = { results: PropTypes.arrayOf(PropTypes.string).isRequired, isExactMatch: PropTypes.bool.isRequired, + urlUser: PropTypes.string, selectedResult: PropTypes.string, + history: PropTypes.shape({ + push: PropTypes.func.isRequired, + }).isRequired, + dispatch: PropTypes.func.isRequired, }; Results.defaultProps = { + urlUser: null, selectedResult: null, }; @@ -35,4 +64,4 @@ const mapStateToProps = state => ({ selectedResult: state.search.selectedResult, }); -export default connect(mapStateToProps)(Results); +export default withRouter(connect(mapStateToProps)(Results)); diff --git a/src/client/react/components/container/Search.js b/src/client/react/components/container/Search.js index 8adbecf..a92e647 100644 --- a/src/client/react/components/container/Search.js +++ b/src/client/react/components/container/Search.js @@ -109,7 +109,7 @@ class Search extends React.Component { autoComplete="off" /> </div> - <Results /> + <Results urlUser={this.props.urlUser} /> </div> </div> ); |