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>
 
 );
 

src/static/sass/components/_movie.scss

@@ -12,7 +12,7 @@
       &:hover {
           z-index: -1;
          transform: scale(1.25); 
-        
+
       }
 
    }

src/static/sass/components/_movieShowcase.scss

@@ -7,8 +7,8 @@
       padding-top: 2rem;
    }
 
-   &__container { // row inner
-      // z-index: 10000000;
+   &__container { 
+     
       transition: transform 450ms;
       overflow: scroll;
       flex: 1 1 auto;
@@ -16,9 +16,6 @@
       grid-template-columns: repeat(20, 1fr);
       column-gap: .5rem;
 
-      // &:hover {
-      //    transform: translate3d(3rem, 0, 0);
-      // }
 
       &:hover &--movie {
          opacity: .3;
@@ -35,7 +32,7 @@
           transform: translate3d(5rem, 0, 0); 
       }
 
-      &--movie { // tile
+      &--movie { 
          cursor: pointer;
          transition: all 450ms; 
          transform: center left;