implemented carousel component

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",

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",

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" : "")}>
                <img src={this.props.posterUrl} className="movieShowcase__container--movie-image" />
             </div>
-            {/* <Modal show={this.state.toggleModal} movie={this.props.movie} modalClosed={this.closeModal}>
-               <MovieDetails movie={this.props.movie} />
-            </Modal> */}
          </>
       )
    }

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 (
-    <>
-      <h1 className="movieShowcase__heading">{props.title}</h1>
-      <div className="movieShowcase__container">{movies}</div>
-    </>
-  );
+// export default function DisplayMovieRow(props) {
+//   // let movies = getMovieRows(props.movies, props.url, props.selectMovieHandler);
+//   return (
+//     <>
+//       <h1 className="movieShowcase__heading">{props.title}</h1>
+//       {/* <div className="movieShowcase__container">{movies}</div> */}
+//       <OwlCarousel
+//         ref="car"
+//         options={options}
+//         event={events}
+//         className="movieShowcase__container"
+//       >
+//         {props.movies.map((movieItem) => {
+//           return (
+//             <div>
+//               <img src={movieItem.posterUrl} />
+//             </div>
+//           );
+//         })}
+//       </OwlCarousel>
+//     </>
+//   );
+// }
+
+// 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 (
+      <>
+        <h1 className="movieShowcase__heading">{this.props.title}</h1>
+        {/* <div className="movieShowcase__container">{movies}</div> */}
+        <Carousel
+          className="movieShowcase__container"
+          infinite
+          draggable={false}
+          arrows
+          value={this.state.value}
+          slidesPerScroll={4}
+          slidesPerPage={4}
+          onChange={this.onSlideChange}
+        >
+          {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 <img key={idx} src={movieImageUrl} />;
+            return (
+              <img
+                src={movieImageUrl}
+                className="movieShowcase__container--movie-image"
+              />
+            );
+          })}
+        </Carousel>
+        <Dots value={this.state.value} onChange={this.onSlideChange} number={this.props.movies.length} />
+      </>
+    );
+  }
 }

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 = (
   <Provider store={createStoreWithMiddleware(reducers)}>
     <App />

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: [