implemented carousel component

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 />