created DisplayMovieRow component

src/components/NavigationItem.js

@@ -1,14 +0,0 @@
-// import React from 'react';
-// import { NavLink } from 'react-router-dom';
-
-// const navigationItem = (props) => (
-//   <NavLink
-//     // className="navigation__container-link"
-//     exact={props.exact}
-//     to={props.link}
-//   >
-//     {props.children}
-//   </NavLink>
-// );
-
-// export default navigationItem;

src/containers/DisplayMovieRow.js

@@ -0,0 +1,42 @@
+import React from 'react';
+// import MovieGenre from './components/MovieGenre';
+import MovieGenre from '../components/MovieGenre';
+
+const getMovieRows = (movies, url) => {
+  console.log('getMovieRow() ', movies, url);
+  const movieRow = movies.map((movie) => {
+    let movieImageUrl =
+      'https://image.tmdb.org/t/p/w500/' + movie.backdrop_path;
+    if (
+      url === `/discover/tv?api_key=${process.env.API_KEY}&with_networks=213`
+    ) {
+      movieImageUrl =
+        'https://image.tmdb.org/t/p/original/' + movie.poster_path;
+    }
+
+    if (movie.poster_path && movie.backdrop_path !== null) {
+      const movieComponent = (
+        <MovieGenre
+          key={movie.id}
+          url={url}
+          posterUrl={movieImageUrl}
+          movie={movie}
+        />
+      );
+
+      return movieComponent;
+    }
+  });
+  return movieRow;
+};
+
+export default function DisplayMovieRow(props) {
+  console.log('DisplayMovieRow.render()', props.movies);
+  let movies = getMovieRows(props.movies, props.url);
+  return (
+    <>
+      <h1 className="movieShowcase__heading">{props.title}</h1>
+      <div className="movieShowcase__container">{movies}</div>
+    </>
+  );
+}

src/containers/Home.js

@@ -47,7 +47,7 @@ class Home extends Component {
   render() {
     return (
       <>
-        <div class="main-content">
+        <div className="main-content">
           <MainContent />
         </div>
         <Modal show={this.state.toggleModal}

src/containers/MainContent.js

@@ -2,27 +2,45 @@ import React, { Component } from 'react';
 import axios from 'axios';
 import Header from '../components/Header';
 import Footer from '../components/Footer';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
 
 import TrendingMovies from './TrendingMovies';
 import NetflixOriginals from './NetflixOriginals';
+import { fetchNetflixOriginals } from '../store/actions/index';
 import TopRated from './TopRated';
 import ActionMovies from './ActionMovies';
 import ComedyMovies from './ComedyMovies';
 import Documentaries from './Documentaries';
+import DisplayMovieRow from './DisplayMovieRow';
 
 
 class MainContent extends Component {
 
   state = {
     /** Will hold our chosen movie to display on the header */
-    selectedMovie: {}
+    selectedMovie: {},
+    movieInfo: [
+      {
+        title: 'Netflix Originals',
+        url: `/discover/tv?api_key=${process.env.API_KEY}&with_networks=213`,
+        movies: []
+      }
+    ],
+    netflixOriginals: []
   };
 
-  componentDidMount = () => {
-    this.getMovie();
+  componentDidMount = async () => {
+    await this.getMovie();
+    await this.props.fetchNetflixOriginals();
+    this.state.movieInfo.forEach((movie) => {
+      if (movie.title === 'Netflix Originals') {
+        movie.movies.push(...this.props.netflixOriginals.data)
+      }
+    })
+    // await this.setState({ movieInfo: this.props.netflixOriginals.data })
   };
 
-
   getMovie = () => {
     /** Movie Id for the Narcos series  */
     const movieId = 63351;
@@ -40,11 +58,27 @@ class MainContent extends Component {
   };
 
   render() {
+    // console.log('render().state', this.state)
     return (
       <div className="container">
         <Header movie={this.state.selectedMovie} />
         <div className="movieShowcase">
-          <NetflixOriginals />
+          {
+            this.state.movieInfo.map((info) => {
+              // console.log('render()----', info)
+              return (
+                <DisplayMovieRow
+                  title={info.title}
+                  url={info.url}
+                  movies={info.movies}
+                />)
+            })
+          }
+          {/* <DisplayMovieRow
+            title={'Netflix Originals'}
+            movies={this.state.netflixOriginals}
+          /> */}
+          {/* <NetflixOriginals /> */}
           <TrendingMovies />
           <TopRated />
           <ActionMovies />
@@ -57,4 +91,16 @@ class MainContent extends Component {
   }
 }
 
-export default MainContent; 
+const mapStateToProps = (state) => {
+  return { netflixOriginals: state.netflixOriginals };
+};
+
+const mapDispatchToProps = (dispatch) => {
+  return bindActionCreators({ fetchNetflixOriginals }, dispatch);
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)
+  (MainContent); 

src/containers/NetflixOriginals.js

@@ -1,10 +1,23 @@
 import React, { Component } from 'react';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
+import OwlCarousel from 'react-owl-carousel2';
 
 import { getMovieRows } from '../getMovie';
 import { fetchNetflixOriginals } from '../store/actions/index';
 
+const options = {
+  items: 1,
+  nav: true,
+  rewind: true,
+  autoplay: true,
+};
+
+const events = {
+  onDragged: [],
+  onChanged: [],
+};
+
 class NetflixOriginals extends Component {
   componentWillMount() {
     this.props.fetchNetflixOriginals();
@@ -22,6 +35,13 @@ class NetflixOriginals extends Component {
       <>
         <h1 className="movieShowcase__heading">NETFLIX ORIGINALS</h1>
         <div className="movieShowcase__container">{movies}</div>
+        {/* <OwlCarousel
+          options={options}
+          events={events}
+          className="movieShowcase__container"
+        >
+          {movies}
+        </OwlCarousel> */}
       </>
     );
   }

src/containers/RomanceMovies.js

@@ -18,6 +18,7 @@ class RomanceMovies extends Component {
       const url = `/discover/tv?api_key=${process.env.API_KEY}&with_genres=10749`;
       movies = getMovieRows(this.props.movies.data, url);
     }
+
     return (
       <>
         <h1 className="movieShowcase__heading">Romance Movies</h1>

src/static/sass/components/_movieShowcase.scss

@@ -37,19 +37,19 @@
       }
 
       &:hover>* {
-         //    transform: translate3d(-5rem, 0, 0);
+         transform: translate3d(-5rem, 0, 0);
 
          @include responsive(tab_port) {
             transform: translate3d(-5rem, 0, 0);
          }
 
-         //    @include responsive(phone) {
-         //       // transform: translate3d(-3rem, 0, 0);
-         //    }
+         @include responsive(phone) {
+            transform: translate3d(-3rem, 0, 0);
+         }
       }
 
       &--movie:hover~&--movie {
-         // transform: translate3d(6rem, 0, 0);
+         transform: translate3d(6rem, 0, 0);
 
          @include responsive(tab_port) {
             transform: translate3d(4.5rem, 0, 0);
@@ -66,7 +66,7 @@
       }
 
       &--movie__netflix:hover~&--movie__netflix {
-         transform: translate3d(1rem, 0, 0);
+         // transform: translate3d(1rem, 0, 0);
       }
 
       &:hover &--movie__netflix {
@@ -101,7 +101,6 @@
 
          &-image {
             height: 100%;
-
          }
 
          &__netflix {
@@ -122,7 +121,6 @@
                height: 34rem;
             }
          }
-
       }
    }
 }