From f00f7adb339f0587c8cf4a82ac2dadebe6a25bfd Mon Sep 17 00:00:00 2001
From: Noah Loomans <noahloomans@gmail.com>
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 ++++--
3 files changed, 41 insertions(+), 7 deletions(-)
(limited to 'src/client/react')
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>
);
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
<div
className={classnames('search__result', {
'search__result--selected': isSelected,
})}
+ onClick={onClick}
>
- <div className="search__icon-wrapper"><IconFromUserType userType={users.byId[userId].type} /></div>
+ <div className="search__icon-wrapper">
+ <IconFromUserType userType={users.byId[userId].type} />
+ </div>
<div className="search__result__text">{users.byId[userId].value}</div>
</div>
);
@@ -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;
--
cgit v1.1