From 181daad1054c3028cca897fdc37a15231f158ed0 Mon Sep 17 00:00:00 2001 From: andres alcocer Date: Sun, 2 Aug 2020 14:51:39 -0400 Subject: [PATCH] implemented carousel component --- package-lock.json | 19 +++--- package.json | 1 + src/components/MovieGenre.js | 18 +----- src/containers/DisplayMovieRow.js | 97 +++++++++++++++++++++++++++---- src/index.js | 2 - webpack.config.js | 5 ++ 6 files changed, 105 insertions(+), 37 deletions(-) diff --git a/package-lock.json b/package-lock.json index 41a167c..a1c7648 100644 --- a/package-lock.json +++ b/package-lock.json @@ -932,6 +932,11 @@ "to-fast-properties": "^2.0.0" } }, + "@brainhubeu/react-carousel": { + "version": "1.19.26", + "resolved": "https://registry.npmjs.org/@brainhubeu/react-carousel/-/react-carousel-1.19.26.tgz", + "integrity": "sha512-+YO8cJrJEk+QDZTQM+i7ct5Ouy0LyoVHQD4fomdsV+3AQmWUkMVZNBYmxFMvhRQVFKreTTzyKuGPkhDKilL/CQ==" + }, "@sindresorhus/is": { "version": "0.7.0", "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.7.0.tgz", @@ -9745,9 +9750,9 @@ } }, "lodash": { - "version": "4.17.15", - "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz", - "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==" + "version": "4.17.19", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.19.tgz", + "integrity": "sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==" }, "lodash._basecopy": { "version": "3.0.1", @@ -12966,7 +12971,8 @@ "ansi-regex": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz", - "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==" + "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==", + "dev": true }, "camelcase": { "version": "5.3.1", @@ -13093,10 +13099,7 @@ "strip-ansi": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", - "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", - "requires": { - "ansi-regex": "^2.0.0" - } + "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=" }, "wrap-ansi": { "version": "5.1.0", diff --git a/package.json b/package.json index 959ef5f..d434ba3 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "author": "Andres Alcocer", "license": "ISC", "dependencies": { + "@brainhubeu/react-carousel": "^1.19.26", "axios": "^0.18.1", "lodash": "^4.17.19", "prop-types": "^15.6.2", diff --git a/src/components/MovieGenre.js b/src/components/MovieGenre.js index dbe502d..125d342 100644 --- a/src/components/MovieGenre.js +++ b/src/components/MovieGenre.js @@ -1,20 +1,7 @@ import React, { Component } from 'react' -import Modal from '../components/UI/Modal'; -import MovieDetails from '../components/Movie/MovieDetails'; - export default class MovieGenre extends Component { - state = { - toggleModal: false - } - - handleToggleModal = () => { - this.setState({ toggleModal: true }); - } - - closeModal = () => { - this.setState({ toggleModal: false }) - } + state = {} render() { let netflixUrl = false; @@ -28,9 +15,6 @@ export default class MovieGenre extends Component { className={"movieShowcase__container--movie" + (netflixUrl ? "__netflix" : "")}> - {/* - - */} ) } diff --git a/src/containers/DisplayMovieRow.js b/src/containers/DisplayMovieRow.js index 3bad03f..67e0a6f 100644 --- a/src/containers/DisplayMovieRow.js +++ b/src/containers/DisplayMovieRow.js @@ -1,5 +1,6 @@ -import React from 'react'; -import OwlCarousel from 'react-owl-carousel2'; +import React, { Component } from 'react'; +import Carousel, { Dots, slidesToShowPlugin } from '@brainhubeu/react-carousel'; +import '@brainhubeu/react-carousel/lib/style.css'; import MovieGenre from '../components/MovieGenre'; @@ -31,12 +32,88 @@ const getMovieRows = (movies, url, selectMovieHandler) => { return movieRow; }; -export default function DisplayMovieRow(props) { - let movies = getMovieRows(props.movies, props.url, props.selectMovieHandler); - return ( - <> -

{props.title}

-
{movies}
- - ); +// export default function DisplayMovieRow(props) { +// // let movies = getMovieRows(props.movies, props.url, props.selectMovieHandler); +// return ( +// <> +//

{props.title}

+// {/*
{movies}
*/} +// +// {props.movies.map((movieItem) => { +// return ( +//
+// +//
+// ); +// })} +// +// +// ); +// } + +// import React, { Component } from 'react' + +export default class DisplayMovieRow extends Component { + constructor(props) { + super(props); + this.state = { + value: 0, + }; + } + + onSlideChange = (value) => { + this.setState({ value }) + } + + render() { + console.log('DisplayMovie.render()', this.props.movies); + let netflixUrl = false; + if ( + this.props.url === + `/discover/tv?api_key=${process.env.API_KEY}&with_networks=213` + ) { + netflixUrl = true; + } + return ( + <> +

{this.props.title}

+ {/*
{movies}
*/} + + {this.props.movies.map((movie, idx) => { + let movieImageUrl = + 'https://image.tmdb.org/t/p/w500/' + movie.backdrop_path; + if ( + this.props.url === + `/discover/tv?api_key=${process.env.API_KEY}&with_networks=213` + ) { + movieImageUrl = + 'https://image.tmdb.org/t/p/original/' + movie.poster_path; + } + // return ; + return ( + + ); + })} + + + + ); + } } diff --git a/src/index.js b/src/index.js index 1ecfabf..b639dfe 100644 --- a/src/index.js +++ b/src/index.js @@ -13,9 +13,7 @@ import './static/sass/style.scss'; const createStoreWithMiddleware = applyMiddleware(promise)(createStore); // TODO -// - fix styling issue // - implement carousel -// - fix modal backdrop bug const app = ( diff --git a/webpack.config.js b/webpack.config.js index 4b1c291..5645b90 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -41,6 +41,11 @@ module.exports = () => { loader: 'svg-react-loader', }, }, + { + test: /\.css$/, + include: /node_modules/, + loaders: ['style-loader', 'css-loader'], + }, { test: /\.scss$/, use: [