implemented genres

src/containers/Layout/Layout.js

@@ -41,7 +41,7 @@ class Layout extends Component {
           <div className="container">
             <Header movie={this.state.selectedMovie}/>
             <MovieShowcase />
-            <MovieOriginals />
+            {/* <MovieOriginals /> */}
            <Footer /> 
           </div>
         </BrowserRouter>)

src/containers/MovieShowcase/MovieShowcase.js

@@ -7,15 +7,29 @@ import MovieSummary from '../../components/MovieRow/MovieSummary/MovieSummary';
 class MovieShowcase extends Component {
 
   state = {
-    trendingMovieRows: [],
+    trendingMovieRow: [],
-    netflixOriginalsRows: [],
+    netflixOriginalsRow: [],
+    topRatedRow: [],
+    comedyMovieRow: [],
+    horrorMovieRow: [],
+    actionMovieRow: [],
+    animatedMovieRow: [],
+    documentaryRow: [],
+    romanceMovieRow: [],
     toggle: false,
     movieDetails: {},
   }
 
   componentWillMount() {
     this.getTrending(); 
+    this.getTopRated(); 
+    this.getComedyMovies(); 
+    this.getActionMovies(); 
+    this.getHorrorMovies(); 
     this.getNetflixMovies(); 
+    this.getRomanceMovies(); 
+    this.getDocumentaries(); 
+    this.getAnimatedMovies(); 
   }
   
   /** 
@@ -43,14 +57,17 @@ class MovieShowcase extends Component {
         movieImageUrl = "https://image.tmdb.org/t/p/original/" + movie.poster_path;
       }
       
-      console.log(movieImageUrl);
+      if (movie.poster_path && movie.backdrop_path !== null) {
-      const movieComponent = <MovieShowCaseRow
+        console.log(movieImageUrl);
-        movieDetails={() => this.getMovieDetails(movie)}
+        const movieComponent = <MovieShowCaseRow
-        key={movie.id}
+          movieDetails={() => this.getMovieDetails(movie)}
-        url={url}
+          key={movie.id}
-        posterUrl={movieImageUrl}
+          url={url}
-        movie={movie} />
+          posterUrl={movieImageUrl}
-      movieRows.push(movieComponent);
+          movie={movie} />
+        movieRows.push(movieComponent);
+      }
+
     })
     // update state 
    return movieRows; 
@@ -58,15 +75,32 @@ class MovieShowcase extends Component {
   }
 
   /**
-   * Send request for movies that are popular 
+   * Send request for movies that are popular right now
    */
   getTrending = () => {
-    const url = 'https://api.themoviedb.org/3/movie/popular?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&language=en-US&page=1'; 
+    const url = "https://api.themoviedb.org/3/trending/all/week?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&language=en-US"; 
+   
+    axios.get(url)
+      .then(res => {
+       
+        const movieRows = this.getMovieRows(res, url);
+        this.setState({ trendingMovieRow: movieRows });
+      })
+      .catch(error => {
+        console.log(error);
+      });
+  }
+
+  /**
+   * Send request for movies that are top rated 
+   */
+  getTopRated = () => {
+    const url = "https://api.themoviedb.org/3/movie/top_rated?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&language=en-US"; 
 
     axios.get(url)
       .then(res => {
         const movieRows = this.getMovieRows(res, url);
-        this.setState({ trendingMovieRows: movieRows }); 
+        this.setState({ topRatedRow: movieRows }); 
       }).catch(error => {
         console.log(error); 
       })
@@ -76,14 +110,97 @@ class MovieShowcase extends Component {
    * Get Netflix originals 
    */
   getNetflixMovies = () => {
-    
     const url = "https://api.themoviedb.org/3/discover/tv?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_networks=213";
 
+    axios.get(url)
+      .then(res => {
+        
+        const movieRows = this.getMovieRows(res, url); 
+        this.setState({ netflixOriginalsRow: movieRows }); 
+      })
+      .catch(error => {
+        console.log(error); 
+      })
+  }
+
+  getActionMovies = () => {
+    const url = "https://api.themoviedb.org/3/discover/movie?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_genres=28";
+
     axios.get(url)
       .then(res => {
         console.log(res);
         const movieRows = this.getMovieRows(res, url);
-        this.setState({ netflixOriginalsRows: movieRows }); 
+        this.setState({ actionMovieRow: movieRows });
+      })
+      .catch(error => {
+        console.log(error);
+      })
+  }
+
+  getComedyMovies = () => {
+    const url = "https://api.themoviedb.org/3/discover/movie?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_genres=35";
+
+    axios.get(url)
+      .then(res => {
+        console.log(res);
+        const movieRows = this.getMovieRows(res, url);
+        this.setState({ comedyMovieRow: movieRows });
+      })
+      .catch(error => {
+        console.log(error);
+      })
+  }
+
+  getHorrorMovies = () => {
+    const url = "https://api.themoviedb.org/3/discover/movie?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_genres=27";
+
+    axios.get(url)
+      .then(res => {
+        console.log(res);
+        const movieRows = this.getMovieRows(res, url);
+        this.setState({ horrorMovieRow: movieRows });
+      })
+      .catch(error => {
+        console.log(error);
+      })
+  }
+
+  getRomanceMovies = () => {
+    const url = "https://api.themoviedb.org/3/discover/movie?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_genres=10749";
+
+    axios.get(url)
+      .then(res => {
+        console.log(res);
+        const movieRows = this.getMovieRows(res, url);
+        this.setState({ romanceMovieRow: movieRows });
+      })
+      .catch(error => {
+        console.log(error);
+      })
+  }
+
+  getAnimatedMovies = () => {
+    const url = "https://api.themoviedb.org/3/discover/movie?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_genres=16";
+
+    axios.get(url)
+      .then(res => {
+        console.log(res);
+        const movieRows = this.getMovieRows(res, url);
+        this.setState({ animatedMovieRow: movieRows });
+      })
+      .catch(error => {
+        console.log(error);
+      })
+  }
+
+  getDocumentaries = () => {
+    const url = "https://api.themoviedb.org/3/discover/movie?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_genres=99";
+
+    axios.get(url)
+      .then(res => {
+        console.log(res);
+        const movieRows = this.getMovieRows(res, url);
+        this.setState({ documentaryRow: movieRows });
       })
       .catch(error => {
         console.log(error);
@@ -98,12 +215,47 @@ class MovieShowcase extends Component {
 
           <h1 className="movieShowcase__heading">Netflix Originals</h1>
           <div className="movieShowcase__container">
-            {this.state.netflixOriginalsRows}
+            {this.state.netflixOriginalsRow}
           </div>
           
           <h1 className="movieShowcase__heading">Trending Now</h1>
           <div className="movieShowcase__container">
-              {this.state.trendingMovieRows}
+              {this.state.trendingMovieRow}
+          </div>
+
+          <h1 className="movieShowcase__heading">Top Rated</h1>
+          <div className="movieShowcase__container">
+              {this.state.topRatedRow}
+          </div>
+
+          <h1 className="movieShowcase__heading">Action Movies</h1>
+          <div className="movieShowcase__container">
+              {this.state.actionMovieRow}
+          </div>
+
+          <h1 className="movieShowcase__heading">Comedy Movies</h1>
+          <div className="movieShowcase__container">
+              {this.state.comedyMovieRow}
+          </div>
+
+          <h1 className="movieShowcase__heading">Horror Movies</h1>
+          <div className="movieShowcase__container">
+              {this.state.horrorMovieRow}
+          </div>
+
+          <h1 className="movieShowcase__heading">Romance Movies</h1>
+          <div className="movieShowcase__container">
+              {this.state.romanceMovieRow}
+          </div>
+
+          <h1 className="movieShowcase__heading">Animated Films</h1>
+          <div className="movieShowcase__container">
+              {this.state.animatedMovieRow}
+          </div>
+
+          <h1 className="movieShowcase__heading">Documentaries</h1>
+          <div className="movieShowcase__container">
+              {this.state.documentaryRow}
           </div>
         
           <Modal show={this.state.toggle} modalClosed={this.closeModal} movie={this.state.movieDetails}>
@@ -115,3 +267,11 @@ class MovieShowcase extends Component {
 }
 
 export default MovieShowcase; 
+
+/**
+ * id: 
+ * 18 = drama 
+ *  878 - science fiction 
+ *  80 - crime 
+ * 36 - history 
+ */

src/containers/MovieShowcase/MovieShowcaseRow/MovieShowcaseRow.js

@@ -8,7 +8,7 @@ class movieShowcaseRow extends Component {
       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") {

src/static/sass/components/_movieShowcase.scss

@@ -8,9 +8,10 @@
    }
 
    &__container { 
-     overflow-y:hidden;
+     overflow-y: hidden;
       transition: transform 450ms;
       overflow-x: scroll;
+      
       flex: 1 1 auto;
       display: grid;
       grid-template-columns: repeat(20, 1fr);

src/static/sass/layout/_navigation.scss

@@ -1,6 +1,6 @@
 .navigation {
    background-color: transparent; 
-
+   z-index: 100;
    grid-column: 1 / 13; 
    position: fixed;
    width: 100%;