header layout

src/containers/App.js

@@ -34,7 +34,7 @@ makeAipCall = (searchItem) => {
                   movieImageUrl = "https://image.tmdb.org/t/p/w500" + movie.poster_path;
                  // pass in the movie object to our MovieRow component and keep it in a variable called 
                  // movieComponent 
-                 const movieComponent = <MovieRow
+                  const movieComponent = <MovieRow
                    movieDetails={() => this.selectMovieHandler(movie)}
                    key={movie.id}
                    movieImage={movieImageUrl}
@@ -110,5 +110,3 @@ makeAipCall = (searchItem) => {
 }
 
 export default App; 
-
-

src/containers/Layout/Layout.js

@@ -17,9 +17,9 @@ class Layout extends Component {
     this.getMovie(); 
   }
   
-  71411
+  // 71411
   getMovie = () => {
-    // 1) make api call to retrieve movie 
+    
     const url = "https://api.themoviedb.org/3/tv/71411?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0";
     axios.get(url) 
       .then(res => {

src/containers/MovieShowcase/MovieShowcase.js

@@ -1,20 +1,65 @@
 import React, { Component } from "react";
+import axios from 'axios'; 
+import MovieShowCaseRow from '../MovieShowcase/MovieShowcaseRow/MovieShowcaseRow'; 
 
 class MovieShowcase extends Component {
+
+  state = {
+    trendingMovieRows: [],
+    movies: []
+  }
+
+  componentWillMount() {
+    this.getTrending(); 
+  }
+  
+  getTrending = () => {
+    const url = 'https://api.themoviedb.org/3/movie/popular?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&language=en-US&page=1'; 
+
+    axios.get(url)
+      .then(res => {
+        console.log(res.data.results); 
+        const results = res.data.results; 
+        let movieRows = []; 
+
+        results.forEach((movie) => {
+          const movieImageUrl = "url(https://image.tmdb.org/t/p/original/" + movie.poster_path;
+          const movieComponent = <MovieShowcase 
+                                  key={movie.id}
+                                  posterUrl={movieImageUrl}
+                                  movie={movie}/>
+          movieRows.push(movieComponent);                                   
+        })
+        // update state 
+        this.setState({trendingMovieRows: movieRows})
+
+      }).catch(error => {
+        console.log(error); 
+      })
+  }
+
+
+
+
    render() {
+
+
+
       return (
          <div className="movieShowcase">
           <h1 className="movieShowcase__heading">New Releases</h1>
           <div className="movieShowcase__container">
-            <div className="movieShowcase__container--movie">movie 1</div>
+          {/* {this.state.trendingMovieRows} */}
+          {/* {this.state.movies[0].title} */}
+            {/* <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 className="movieShowcase__container--movie">movie 6</div> */}
+          {/* </div> */}
 
-          <h1 className="movieShowcase__heading">Trending Now</h1>
+          {/* <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>
@@ -22,6 +67,7 @@ class MovieShowcase extends Component {
             <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>
         )

src/containers/MovieShowcase/MovieShowcaseRow/MovieShowcaseRow.js

@@ -0,0 +1,14 @@
+import React, { Component } from 'react';
+
+// `url(https://image.tmdb.org/t/p/original/${this.props.movie.backdrop_path})`;
+
+const movieShowcaseRow = (props) => (
+
+   <div>
+      <div className="shit">
+         <img src={movieImageUrl} />
+      </div>
+   </div>
+);
+
+export default movieShowcaseRow;