From 23cf9bd58fad03db8af04bf83a5bb07a69c06ac3 Mon Sep 17 00:00:00 2001
From: aneurysmjs <aneurysmjs@outlook.com>
Date: Sat, 30 Dec 2017 00:55:07 -0500
Subject: [PATCH] feat(RmMovies): connect 'RmMovies' with the store

use ReactRedux's connect method
---
 src/containers/RmMovies/RmMovies.jsx | 28 ++++++++++++++++------------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/containers/RmMovies/RmMovies.jsx b/src/containers/RmMovies/RmMovies.jsx
index fed15ba6..55ea1707 100755
--- a/src/containers/RmMovies/RmMovies.jsx
+++ b/src/containers/RmMovies/RmMovies.jsx
@@ -1,38 +1,34 @@
 import React, { Component } from 'react';
+import { connect } from 'react-redux';
 import { arrayOf, shape, string, number } from 'prop-types';
 
 import RmHeader from '../../components/RmHeader/RmHeader';
 import MovieCard from '../../components/RmMovieCard/RmMovieCard';
 
-export default class RmMovies extends Component {
+class RmMovies extends Component {
 
   constructor(props) {
     super(props);
 
-    /**
-     * Movies's state, search term to filter the movies that match that criteria.
-     */
-    this.state = {
-      searchTerm: ''
-    };
-
     this.searchTermHandler = this.searchTermHandler.bind(this);
   }
 
   render() {
 
-    const { movies } = this.props;
+    const { movies, searchTerm } = this.props;
+
+    console.log('searchTerm', searchTerm);
 
     return (
       <section>
         <RmHeader
           showSearch={true}
-          searchTerm={this.state.searchTerm}
+          searchTerm={searchTerm}
           onSearch={this.searchTermHandler}
         />
         <div className="d-flex align-items-start justify-content-between flex-wrap">
           {movies.filter(movie => (
-            `${movie.movieTitle} ${movie.description}`.toUpperCase().indexOf(this.state.searchTerm.toUpperCase()) >= 0
+            `${movie.movieTitle} ${movie.description}`.toUpperCase().indexOf(searchTerm.toUpperCase()) >= 0
           )).map(movie => (
             /*
               we can also `spread` the object, is like taking everything inside of `movie` and spread it out
@@ -68,4 +64,12 @@ RmMovies.propTypes = {
     description: string,
     movieGenre: string
   }))
-};
\ No newline at end of file
+};
+
+const mapStateToProps = (state) => {
+  return {
+    searchTerm: state.searchTerm
+  };
+};
+
+export default connect(mapStateToProps)(RmMovies);
\ No newline at end of file