From 2cac093369ecb965ddbef60e6dc2aa6e50f0e937 Mon Sep 17 00:00:00 2001
From: Noah Loomans <noahloomans@gmail.com>
Date: Mon, 11 Dec 2017 20:36:51 +0100
Subject: Refactor Results out of Search

---
 src/client/react/components/container/Results.jsx | 15 +++++++++++++++
 src/client/react/components/container/Search.jsx  | 13 ++++---------
 2 files changed, 19 insertions(+), 9 deletions(-)
 create mode 100644 src/client/react/components/container/Results.jsx

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

diff --git a/src/client/react/components/container/Results.jsx b/src/client/react/components/container/Results.jsx
new file mode 100644
index 0000000..04d1f84
--- /dev/null
+++ b/src/client/react/components/container/Results.jsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import Result from '../presentational/Result';
+
+const Results = (({ results }) => (
+  results.map(user => (
+    <Result key={user.value} user={user} />
+  ))
+));
+
+const mapStateToProps = state => ({
+  results: state.search.results,
+});
+
+export default connect(mapStateToProps)(Results);
diff --git a/src/client/react/components/container/Search.jsx b/src/client/react/components/container/Search.jsx
index 7a2822f..7890423 100644
--- a/src/client/react/components/container/Search.jsx
+++ b/src/client/react/components/container/Search.jsx
@@ -7,8 +7,8 @@ import SearchIcon from 'react-icons/lib/md/search';
 
 import { inputChange, focusChange } from '../../actions/search';
 
+import Results from './Results';
 import IconFromUserType from '../presentational/IconFromUserType';
-import Result from '../presentational/Result';
 
 const userShape = {
   value: PropTypes.string.isRequired,
@@ -21,16 +21,14 @@ const Search = ({
   onBlur,
   hasFocus,
   value,
-  results,
   exactMatch,
 }) => (
-  <div className={classnames('search', { 'search--has-focus': hasFocus, 'search--has-results': results.length > 0 })}>
+  <div className={classnames('search', { 'search--has-focus': hasFocus })}>
     <div className="search__input-wrapper">
-      {/* Show the icon from the exact match if there is an exact match, otherwise show the search icon. */}
       <div className="search__icon-wrapper">
         <IconFromUserType
           userType={exactMatch ? exactMatch.type : null}
-          default={<SearchIcon />}
+          defaultIcon={<SearchIcon />}
         />
       </div>
       <input
@@ -42,9 +40,7 @@ const Search = ({
         onBlur={onBlur}
       />
     </div>
-    {results.map(user => (
-      <Result key={user.value} user={user} />
-    ))}
+    <Results />
   </div>
 );
 
@@ -54,7 +50,6 @@ Search.propTypes = {
   onBlur: PropTypes.func.isRequired,
   hasFocus: PropTypes.bool.isRequired,
   value: PropTypes.string.isRequired,
-  results: PropTypes.arrayOf(PropTypes.shape(userShape)).isRequired,
   exactMatch: PropTypes.shape(userShape),
 };
 
-- 
cgit v1.1