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 ++++--
 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,
+}) => (
   <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;
     }
 
-- 
cgit v1.1