implemented new carousel component

package-lock.json

@@ -932,11 +932,6 @@
         "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",
@@ -2864,6 +2859,11 @@
         }
       }
     },
+    "classnames": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
+      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
+    },
     "clean-css": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.1.tgz",
@@ -5274,6 +5274,11 @@
         }
       }
     },
+    "enquire.js": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/enquire.js/-/enquire.js-2.1.6.tgz",
+      "integrity": "sha1-PoeAybi4NQhMP2DhZtvDwqPImBQ="
+    },
     "entities": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz",
@@ -9605,6 +9610,14 @@
       "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=",
       "dev": true
     },
+    "json2mq": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz",
+      "integrity": "sha1-tje9O6nqvhIsg+lyBIOusQ0skEo=",
+      "requires": {
+        "string-convert": "^0.2.0"
+      }
+    },
     "json3": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/json3/-/json3-3.3.3.tgz",
@@ -9808,6 +9821,11 @@
       "integrity": "sha1-+6HEUkwZ7ppfgTa0YJ8BfPTe1pI=",
       "dev": true
     },
+    "lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
+    },
     "lodash.escape": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/lodash.escape/-/lodash.escape-3.2.0.tgz",
@@ -12370,6 +12388,18 @@
         "warning": "^4.0.1"
       }
     },
+    "react-slick": {
+      "version": "0.27.1",
+      "resolved": "https://registry.npmjs.org/react-slick/-/react-slick-0.27.1.tgz",
+      "integrity": "sha512-dlT8QW37XahezqcnJ/qquktzNvd9R16bBXoN7CsTab1EzUL1QqieYqYkn+A/eBetxeRUy2Z9kW+XnljZboju0w==",
+      "requires": {
+        "classnames": "^2.2.5",
+        "enquire.js": "^2.1.6",
+        "json2mq": "^0.2.0",
+        "lodash.debounce": "^4.0.8",
+        "resize-observer-polyfill": "^1.5.0"
+      }
+    },
     "read-all-stream": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/read-all-stream/-/read-all-stream-3.1.0.tgz",
@@ -12768,6 +12798,11 @@
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
       "dev": true
     },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "resolve": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.8.1.tgz",
@@ -14107,6 +14142,11 @@
       "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
       "dev": true
     },
+    "string-convert": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz",
+      "integrity": "sha1-aYLMMEn7tM2F+LJFaLnZvznu/5c="
+    },
     "string-width": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",

package.json

@@ -16,7 +16,6 @@
   "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",
@@ -24,6 +23,7 @@
     "react-dom": "^16.6.1",
     "react-redux": "^6.0.1",
     "react-router-dom": "^4.3.1",
+    "react-slick": "^0.27.1",
     "redux": "^4.0.1",
     "redux-promise": "^0.6.0",
     "redux-thunk": "^2.3.0"

src/containers/DisplayMovieRow.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
-import Carousel, { Dots, slidesToShowPlugin } from '@brainhubeu/react-carousel';
+import Slider from "react-slick";
-import '@brainhubeu/react-carousel/lib/style.css';
+
 
 import MovieGenre from '../components/MovieGenre';
 
@@ -32,32 +32,6 @@ 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> */}
-//       <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);
@@ -72,6 +46,62 @@ export default class DisplayMovieRow extends Component {
 
   render() {
     console.log('DisplayMovie.render()', this.props.movies);
+    const settings = {
+      dots: true,
+      infinite: true,
+      speed: 1000,
+      draggable: false,
+      slidesToShow: 6,
+      slidesToScroll: 6,
+      initialSlide: 0,
+      responsive: [
+        {
+          breakpoint: 1824,
+          settings: {
+            slidesToShow: 6,
+            slidesToScroll: 6,
+            infinite: true,
+            dots: true
+          }
+        },
+        {
+          breakpoint: 1300,
+          settings: {
+            slidesToShow: 5,
+            slidesToScroll: 5,
+            infinite: true,
+            dots: true
+          }
+        },
+        {
+          breakpoint: 1100,
+          settings: {
+            slidesToShow: 4,
+            slidesToScroll: 4,
+            infinite: true,
+            dots: true
+          }
+        },
+        {
+          breakpoint: 798,
+          settings: {
+            slidesToShow: 3,
+            slidesToScroll: 3,
+            infinite: true,
+            dots: true
+          }
+        },
+        {
+          breakpoint: 500,
+          settings: {
+            slidesToShow: 2,
+            slidesToScroll: 2,
+            infinite: true,
+            dots: true
+          }
+        }
+      ]
+    };
     let netflixUrl = false;
     if (
       this.props.url ===
@@ -79,21 +109,15 @@ export default class DisplayMovieRow extends Component {
     ) {
       netflixUrl = true;
     }
+
     return (
       <>
         <h1 className="movieShowcase__heading">{this.props.title}</h1>
-        {/* <div className="movieShowcase__container">{movies}</div> */}
+        <Slider
-        <Dots value={this.state.value} onChange={this.onSlideChange} number={this.props.movies.length} />
-        <Carousel
           // className="movieShowcase__container"
-          infinite
+          {...settings}
-          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;
@@ -104,7 +128,6 @@ export default class DisplayMovieRow extends Component {
               movieImageUrl =
                 'https://image.tmdb.org/t/p/original/' + movie.poster_path;
             }
-            // return <img key={idx} src={movieImageUrl} />;
             return (
               <div
                 className={"movieShowcase__container--movie" + (netflixUrl ? "__netflix" : "")}
@@ -116,7 +139,7 @@ export default class DisplayMovieRow extends Component {
               </div>
             );
           })}
-        </Carousel>
+        </Slider>
       </>
     );
   }

src/index.html

@@ -5,6 +5,10 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=Hind:400,500,700|Ramabhadra" rel="stylesheet">
+   <link rel="stylesheet" type="text/css" charset="UTF-8"
+      href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
+   <link rel="stylesheet" type="text/css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Netflix Clone</title>
 </head>