updated modal

src/components/MovieRow/MovieRow.js

@@ -4,11 +4,10 @@ import React from 'react';
 
 const movieRow = (props) => (
 
-   <div className="movie">
+   <div onClick={props.getMovie} className="movie">
-         <div className="movie__column-poster">
+         <div onClick={props.movieDetails} className="movie__column-poster">
             <img src={props.movie.posterSrc} alt="" className="movie__poster" />
          </div>
-         <button onClick={props.movieDetails}>hellooo</button>
    </div> 
 );
 

src/components/MovieRow/MovieSummary/MovieSummary.js

@@ -1,18 +1,19 @@
 import React from 'react'; 
-import Aux from '../../../hoc/Aux/Aux'; 
+import Aux from '../../../hoc/Aux/Aux';
+import MovieRow from '../MovieRow'; 
+ 
 
 const movieSummary = (props) => (
 
-   // // map object into an array of jsx elemenst 
+ // get movieid and make api call 
-   // const movieDetails = Object.keys(props.movies)
+
-   //    .map(movieKey => {
+ // render data dynamically 
-   //       return <p>{movieKey}: {props.movies[movieKey]}</p>
-   //    }); 
    
 
    <Aux>
+    
       {/* <img src="" alt=""/> */}
-      <h1>Movie Title</h1>
+      <h1>Movie Title: {props.movieInfo.title}</h1>
       <p>rating: 45% realease-date: 2018 runtime: 100m </p>
       <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nemo, delectus! Veniam error perferendis pariatur atque facere? Repudiandae, quia mollitia sapiente 
          necessitatibus vitae error assumenda maiores perferendis quaerat excepturi voluptatum quidem?</p>

src/components/UI/Backdrop/Backdrop.js

@@ -1,7 +1,6 @@
 import React from 'react'; 
 
 
-
 const backdrop = (props) => (
    props.show ? <div 
                   onClick={props.toggleBackdrop}

src/containers/App.js

@@ -14,7 +14,8 @@ class App extends Component {
     toggleMovieList: true,
     //an array that will hold all of our movies component 
     rows: [],
-    toggleModal: false
+    toggleModal: false,
+    movieDetails: {}
   }
 
 makeAipCall = (searchItem) => {
@@ -22,12 +23,11 @@ makeAipCall = (searchItem) => {
       axios.get(url)
          .then(res => {
             // extract the data from json object 
-            console.log(res); 
+            // console.log(res); 
             const movies = res.data.results;
             // console.log(movies); 
             // Holds our movieComponent. 
             let movieRows = [];
-            let total = 0; 
             movies.forEach((movie) => {
                // manually build our image url and set it on the movie object 
                if (movie.poster_path !== null) {
@@ -35,8 +35,8 @@ makeAipCall = (searchItem) => {
                  // pass in the movie object to our MovieRow component and keep it in a variable called 
                  // movieComponent 
                   const movieComponent = <MovieRow
+                  getMovie={this.getMovieDetailsHandler}
                   movieDetails={this.selectMovieHandler}
-                   val={total}
                    key={movie.id}
                    movie={movie}/>
                  // push our movieComponent to our movieRows array; 
@@ -44,6 +44,7 @@ makeAipCall = (searchItem) => {
                } 
             
             })
+
             // update state 
             this.setState({ rows: movieRows });
          }).catch(error => {
@@ -68,13 +69,48 @@ makeAipCall = (searchItem) => {
 
   selectMovieHandler = () => {
     this.setState({toggleModal: true}); 
-    
+ 
+  
+    // const url = `https://api.themoviedb.org/3/movie/${movieId}?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&language=en-US`;
+    // axios.get(url)
+    //   .then(res => {
+
+    //     console.log(res.data)
+    //   }).catch(error => {
+    //     console.log(error);
+    //   }); 
   }
 
   closeModal = () => {
     this.setState({ toggleModal: false }); 
   }
 
+  // get movie details 
+  // return object 
+  getMovieDetailsHandler = (movieId) => {
+    const url = `https://api.themoviedb.org/3/movie/${503314}?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&language=en-US`;
+    axios.get(url)
+      .then(res => {
+
+        const movieData = res.data; 
+        console.log(movieData); 
+        this.setState({movieDetails: movieData}); 
+      }).catch(error => {
+
+        console.log(error); 
+      }); 
+  }
+
+
+
+
+
+
+
+
+
+
+
    render() {
 
       return (
@@ -83,7 +119,7 @@ makeAipCall = (searchItem) => {
           {this.state.toggleMovieList ? <Layout /> : <div //onClick={this.onChangeHandler} 
                                             className="search-container">{this.state.rows}</div>}
           <Modal show={this.state.toggleModal} modalClosed={this.closeModal}>
-            <MovieSummary />
+            <MovieSummary movieInfo={this.state.movieDetails}/>
           </Modal>  
          </div>
          

src/static/sass/components/_backdrop.scss

@@ -5,5 +5,5 @@
    z-index: 100; 
    left: 0; 
    top: 0; 
-   background-color: rgba($color-background, .5); 
+   background-color: rgba($color-background, .7); 
 }