carrousel imporvements

src/containers/App.js

@@ -66,6 +66,7 @@ makeAipCall = (searchItem) => {
     } 
   }
 
+  /* Get the appropriate details for a specific movie that was clicked */
   selectMovieHandler = (movie) => {
     this.setState({toggleModal: true}); 
     let url; 

src/containers/MovieShowcase/MovieShowcase.js

@@ -1,18 +1,34 @@
 import React, { Component } from "react";
 import axios from 'axios'; 
 import MovieShowCaseRow from '../MovieShowcase/MovieShowcaseRow/MovieShowcaseRow'; 
+import Modal from "../../components/UI/Modal/Modal"; 
+import MovieSummary from '../../components/MovieRow/MovieSummary/MovieSummary'; 
 
 class MovieShowcase extends Component {
 
   state = {
     trendingMovieRows: [],
-    movies: []
+    toggle: false,
+    movieDetails: {}
   }
 
   componentWillMount() {
     this.getTrending(); 
   }
   
+  /** 
+   Get the movie details for a single movie 
+   @param {object} movieObject - A single movie object
+   */
+  getMovieDetails = (movieObject) => {
+    this.setState({ toggle: true }); 
+    this.setState({ movieDetails: movieObject }); 
+  }
+
+  closeModal = () => {
+    this.setState({toggle: false})
+  }
+
   getTrending = () => {
     const url = 'https://api.themoviedb.org/3/movie/popular?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&language=en-US&page=1'; 
 
@@ -26,6 +42,7 @@ class MovieShowcase extends Component {
           const movieImageUrl = "https://image.tmdb.org/t/p/original/" + movie.backdrop_path;
           console.log(movieImageUrl);
           const movieComponent = <MovieShowCaseRow
+                                  movieDetails={() => this.getMovieDetails(movie)}
                                   key={movie.id}
                                   posterUrl={movieImageUrl}
                                   movie={movie}/>
@@ -45,38 +62,22 @@ class MovieShowcase extends Component {
    render() {
 
 
-
-      return <div className="movieShowcase">
-          <h1 className="movieShowcase__heading">
-            New Releases
-          </h1>
+      return (  
+        <div className="movieShowcase">
+          <h1 className="movieShowcase__heading">Trending Now</h1>
           <div className="movieShowcase__container">
-            {/* {this.state.movies[0].title} */}
-            {/* {/* <div className="movieShowcase__container--movie">movie 1</div> */}
-            {/* <div className="movieShowcase__container--movie"> */}
               {this.state.trendingMovieRows}
-              {/* {this.state.trendingMovieRows}
-              {this.state.trendingMovieRows}
-              {this.state.trendingMovieRows} */}
-            {/* </div> */}
-            {/* <div className="movieShowcase__container--movie">movie 3</div>
-            <div className="movieShowcase__container--movie">movie 4</div>
-            <div className="movieShowcase__container--movie">movie 5</div>
-            <div className="movieShowcase__container--movie">
-              movie 6
-            </div> */} 
-            {/* </div> */}
-            {/* <h1 className="movieShowcase__heading">Trending Now</h1>
-          <div className="movieShowcase__container">
-            <div className="movieShowcase__container--movie">movie 1</div>
-            <div className="movieShowcase__container--movie">movie 2</div>
-            <div className="movieShowcase__container--movie">movie 3</div>
-            <div className="movieShowcase__container--movie">movie 4</div>
-            <div className="movieShowcase__container--movie">movie 5</div>
-            <div className="movieShowcase__container--movie">movie 6</div>
-          </div> */}
           </div>
-        </div>;
+          <h1 className="movieShowcase__heading">Popular on Netflix</h1>
+          <div className="movieShowcase__container">
+              {this.state.trendingMovieRows}
+          </div>
+        
+          <Modal show={this.state.toggle} modalClosed={this.closeModal} movie={this.state.movieDetails}>
+            <MovieSummary movie={this.state.movieDetails}/>
+          </Modal>
+        </div>
+      );
    }
 }
 

src/containers/MovieShowcase/MovieShowcaseRow/MovieShowcaseRow.js

@@ -5,9 +5,9 @@ import React, { Component } from 'react';
 const movieShowcaseRow = (props) => (
 
    
-   <div className="movieShowcase__container--movie">
+   <div onClick={props.movieDetails} className="movieShowcase__container--movie">
       <img src={props.posterUrl} className="movieShowcase__container--movie-image"/>
-         </div>
+   </div>
 
 );