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 +-
 2 files changed, 34 insertions(+), 5 deletions(-)

(limited to 'src/client/react/components/container')

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>
     );
-- 
cgit v1.1