+
{ - 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 (
- + { + this.state.movieInfo.map((info) => { + // console.log('render()----', info) + return ( + ) + }) + } + {/* */} + {/* */} @@ -57,4 +91,16 @@ class MainContent extends Component { } } -export default MainContent; \ No newline at end of file +const mapStateToProps = (state) => { + return { netflixOriginals: state.netflixOriginals }; +}; + +const mapDispatchToProps = (dispatch) => { + return bindActionCreators({ fetchNetflixOriginals }, dispatch); +} + +export default connect( + mapStateToProps, + mapDispatchToProps +) + (MainContent); \ No newline at end of file diff --git a/src/containers/NetflixOriginals.js b/src/containers/NetflixOriginals.js index 8e280a2..cc7786e 100644 --- a/src/containers/NetflixOriginals.js +++ b/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 { <>

NETFLIX ORIGINALS

{movies}
+ {/* + {movies} + */} ); } diff --git a/src/containers/RomanceMovies.js b/src/containers/RomanceMovies.js index af13ff4..e230697 100644 --- a/src/containers/RomanceMovies.js +++ b/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 ( <>

Romance Movies

diff --git a/src/static/sass/components/_movieShowcase.scss b/src/static/sass/components/_movieShowcase.scss index c03fd24..214b3ed 100644 --- a/src/static/sass/components/_movieShowcase.scss +++ b/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; } } - } } } \ No newline at end of file