aboutsummaryrefslogtreecommitdiff
path: root/src/client
diff options
context:
space:
mode:
authorNoah Loomans <noahloomans@gmail.com>2018-01-31 16:13:02 +0100
committerNoah Loomans <noahloomans@gmail.com>2018-01-31 16:13:02 +0100
commitf00f7adb339f0587c8cf4a82ac2dadebe6a25bfd (patch)
tree12f9786d99084f427d9f652e6c4b53cf70d92daa /src/client
parent54d166b6756929843ff0804f5da1507fc459f767 (diff)
Add click functionality to result
Diffstat (limited to 'src/client')
-rw-r--r--src/client/react/components/container/Results.js37
-rw-r--r--src/client/react/components/container/Search.js2
-rw-r--r--src/client/react/components/presentational/Result.js9
-rw-r--r--src/client/style/_component-search.scss3
4 files changed, 43 insertions, 8 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>
);
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;
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;
}