netflix originals movieshowcase

src/containers/MovieOriginals/MovieOriginalsRows/MovieOriginalsRows.js

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

src/containers/MovieShowcase/MovieShowcase.js

@@ -8,12 +8,14 @@ class MovieShowcase extends Component {
 
   state = {
     trendingMovieRows: [],
+    netflixOriginalsRows: [],
     toggle: false,
-    movieDetails: {}
+    movieDetails: {},
   }
 
   componentWillMount() {
     this.getTrending(); 
+    this.getNetflixMovies(); 
   }
   
   /** 
@@ -21,7 +23,7 @@ class MovieShowcase extends Component {
    @param {object} movieObject - A single movie object
    */
   getMovieDetails = (movieObject) => {
-    this.setState({ toggle: true }); 
+    this.setState({toggle: true})
     this.setState({ movieDetails: movieObject }); 
   }
 
@@ -29,46 +31,77 @@ class MovieShowcase extends Component {
     this.setState({toggle: false})
   }
 
+
+  /** Extract our movie data */
+  getMovieRows = (res, url) => {
+    const results = res.data.results; 
+    let movieRows = []; 
+     
+    results.forEach((movie) => {
+      let movieImageUrl = "https://image.tmdb.org/t/p/original/" + movie.backdrop_path;
+      if (url === "https://api.themoviedb.org/3/discover/tv?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_networks=213") {
+        movieImageUrl = "https://image.tmdb.org/t/p/original/" + movie.poster_path;
+      }
+     
+      console.log(movieImageUrl);
+      const movieComponent = <MovieShowCaseRow
+        movieDetails={() => this.getMovieDetails(movie)}
+        key={movie.id}
+        url={url}
+        posterUrl={movieImageUrl}
+        movie={movie} />
+      movieRows.push(movieComponent);
+    })
+    // update state 
+   return movieRows; 
+       
+  }
+
+  /**
+   * Send request for movies that are popular 
+   */
   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 = "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}/>
-          movieRows.push(movieComponent);                                   
-         })
-        // update state 
-        this.setState({trendingMovieRows: movieRows})
-
+        const movieRows = this.getMovieRows(res, url);
+        this.setState({ trendingMovieRows: movieRows }); 
       }).catch(error => {
         console.log(error); 
       })
   }
 
+  /**
+   * Get Netflix originals 
+   */
+  getNetflixMovies = () => {
+    
+    const url = "https://api.themoviedb.org/3/discover/tv?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_networks=213";
 
-
+    axios.get(url)
+      .then(res => {
+        console.log(res); 
+        const movieRows = this.getMovieRows(res, url); 
+        this.setState({ netflixOriginalsRows: movieRows }); 
+      })
+      .catch(error => {
+        console.log(error); 
+      })
+  }
 
    render() {
 
 
       return (  
         <div className="movieShowcase">
-          <h1 className="movieShowcase__heading">Trending Now</h1>
+
+          <h1 className="movieShowcase__heading">Netflix Originals</h1>
           <div className="movieShowcase__container">
-              {this.state.trendingMovieRows}
+            {this.state.netflixOriginalsRows}
           </div>
-          <h1 className="movieShowcase__heading">Popular on Netflix</h1>
+          
+          <h1 className="movieShowcase__heading">Trending Now</h1>
           <div className="movieShowcase__container">
               {this.state.trendingMovieRows}
           </div>

src/containers/MovieShowcase/MovieShowcaseRow/MovieShowcaseRow.js

@@ -1,14 +1,29 @@
 import React, { Component } from 'react';
+ 
 
-// `url(https://image.tmdb.org/t/p/original/${this.props.movie.backdrop_path})`;
+class movieShowcaseRow extends Component {
 
-const movieShowcaseRow = (props) => (
 
-   
-   <div onClick={props.movieDetails} className="movieShowcase__container--movie">
-      <img src={props.posterUrl} className="movieShowcase__container--movie-image"/>
-   </div>
+   render() {
+      let netflixUrl = false; 
+      const netflixStyle = {
+         height: "52rem",
+         width: "50%"
+      }
 
-);
+      if (this.props.url === "https://api.themoviedb.org/3/discover/tv?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_networks=213") {
+        netflixUrl = true; 
+      }
+
+      return (
+
+         <div onClick={this.props.movieDetails} style={netflixUrl ? netflixStyle : null} className={"movieShowcase__container--movie"}>
+            <img src={this.props.posterUrl} className="movieShowcase__container--movie-image"/>
+         </div>
+
+    
+      ); 
+   }
+}
 
 export default movieShowcaseRow; 

src/static/sass/components/_movieShowcase.scss

@@ -8,9 +8,9 @@
    }
 
    &__container { 
-     
+     overflow-y:hidden;
       transition: transform 450ms;
-      overflow: scroll;
+      overflow-x: scroll;
       flex: 1 1 auto;
       display: grid;
       grid-template-columns: repeat(20, 1fr);
@@ -32,13 +32,15 @@
           transform: translate3d(5rem, 0, 0); 
       }
 
+
       &--movie { 
+
          cursor: pointer;
          transition: all 450ms; 
          transform: center left; 
-         padding-top: 4rem;
+         padding-top: 3.5rem;
          padding-bottom: 4rem;
-         height: 20rem;
+         height: 18rem;
         
          &:not(:last-child) {
             padding-right: .5rem;
@@ -47,6 +49,7 @@
          &-image {
             height: 100%;
          }
+
       }
    }
 }