From f00f7adb339f0587c8cf4a82ac2dadebe6a25bfd Mon Sep 17 00:00:00 2001 From: Noah Loomans Date: Wed, 31 Jan 2018 16:13:02 +0100 Subject: Add click functionality to result --- src/client/react/components/container/Results.js | 37 +++++++++++++++++++--- src/client/react/components/container/Search.js | 2 +- .../react/components/presentational/Result.js | 9 ++++-- src/client/style/_component-search.scss | 3 +- 4 files changed, 43 insertions(+), 8 deletions(-) (limited to 'src') 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, +}) => (
0, @@ -14,18 +23,38 @@ const Results = (({ results, isExactMatch, selectedResult }) => ( }} > {!isExactMatch && results.map(userId => ( - + { + 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}`); + } + }} + /> ))}
-)); +); 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" /> - + ); diff --git a/src/client/react/components/presentational/Result.js b/src/client/react/components/presentational/Result.js index 0b9e024..6d39a80 100644 --- a/src/client/react/components/presentational/Result.js +++ b/src/client/react/components/presentational/Result.js @@ -5,13 +5,17 @@ import users from '../../users'; import IconFromUserType from './IconFromUserType'; -const Result = ({ userId, isSelected }) => ( +const Result = ({ userId, isSelected, onClick }) => ( + // eslint-disable-next-line
-
+
+ +
{users.byId[userId].value}
); @@ -19,6 +23,7 @@ const Result = ({ userId, isSelected }) => ( Result.propTypes = { userId: PropTypes.string.isRequired, isSelected: PropTypes.bool.isRequired, + onClick: PropTypes.func.isRequired, }; export default Result; diff --git a/src/client/style/_component-search.scss b/src/client/style/_component-search.scss index 99e7b1e..1687ec3 100644 --- a/src/client/style/_component-search.scss +++ b/src/client/style/_component-search.scss @@ -50,8 +50,9 @@ &__result { display: flex; + cursor: pointer; - &--selected { + &:hover, &--selected { background-color: lightgray; } -- cgit v1.1