changed carousel component to a functional component

.firebase/hosting.ZGlzdA.cache

@@ -0,0 +1,13 @@
+index.html,1596741018384,3d6b40018584f7c06d40114b891d30af59937f16c0dceb4a140db1f823418e20
+main.css,1596741018384,c2e259b7b0f0d56ed711b2d6f4b6b592e4301a1afe87b06d14d5ca3bfd239897
+static/images/add.svg,1596741018385,ef7cf8e9df96200815d767e6b3b767ef092dd338b4851d2f35966911dab09e4c
+static/images/bell-logo.svg,1596741018385,5ef07d3b72a99ccebfff2fb9bc1a80513d59376038055b606deff8133c3e3b56
+static/images/bell.svg,1596741018385,6766dfa1ef7da3acfab70cdb2bbee5e6861fc0cdf8afbaf1cf7c387e4df415a4
+static/images/cancel-music.svg,1596741018386,1bbd7eef0b56c5d4cec9993f3762a384447ca99392778a87292333b82f8a2f39
+static/images/drop-down-arrow.svg,1596741018385,7ebe79b34f9fa2590b4beb29e6e6e8d0b0fff722ff0e3071ad36d3467c045743
+static/images/search-icon.svg,1596741018385,fcad2b6afe31083f5b452f601b1ca8669f6f768deecadf07e9d647269296012a
+static/images/play-button.svg,1596741018385,d43cf31799ae2e480227ae79d858b997dfb0b54f67b1d3a3a1c18ca1dd927251
+8562b6565f5ae1db5e4af40d85b4ed2d.png,1596741018383,ddacf16aa0704b6ff5ed27a0ff5416eff337a05915beb9c10504639f2f105ec1
+static/images/Netflix_Logo_RGB.png,1596741018385,ddacf16aa0704b6ff5ed27a0ff5416eff337a05915beb9c10504639f2f105ec1
+bundle.js,1596741018384,733d73858d2dfa40c45bd27b9a220e6173b0fdddd779fa670f9724fc7b49957d
+static/images/header-bg.jpg,1596741018385,f4cfcb4caa304a777e03d623c68bf00d22f9c21a55d0a6fb088889e3c2867d40

.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "netflix-clone-9a0b9"
+  }
+}

firebase.json

@@ -0,0 +1,16 @@
+{
+  "hosting": {
+    "public": "dist",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ]
+  }
+}

src/containers/DisplayMovieRow.js

@@ -9,101 +9,82 @@ import SwiperCore, { Navigation, Pagination, Scrollbar, A11y } from 'swiper';
 // install Swiper components
 SwiperCore.use([Navigation, Pagination, Scrollbar, A11y]);
 
-export default class DisplayMovieRow extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: 0,
-      width: window.innerWidth
-    };
+const DisplayMovieRow = (props) => {
+  let netflixUrl = false;
+  if (
+    props.url ===
+    `/discover/tv?api_key=${process.env.API_KEY}&with_networks=213`
+  ) {
+    netflixUrl = true;
   }
 
-
-  componentDidMount() {
-    window.addEventListener("resize", this.handleResize);
-  }
-
-  componentWillUnMount() {
-    window.addEventListener("resize", this.handleResize);
-  }
-
-  handleResize = (e) => {
-    this.setState({ width: window.innerWidth });
-  };
-
-  onSlideChange = (value) => {
-    this.setState({ value })
-  }
-
-  render() {
-    const { width } = this.state;
-    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>
-        <Swiper
-          className="movieShowcase__container"
-          navigation
-          grabCursor={false}
-          draggable={false}
-          loop={true}
-          loopAdditionalSlides={2}
-          breakpoints={{
-            1378: {
-              slidesPerView: 5,
-              slidesPerGroup: 5
-            },
-            998: {
-              slidesPerView: 4,
-              slidesPerGroup: 4
-            },
-            625: {
-              slidesPerView: 3,
-              slidesPerGroup: 3,
-            },
-            0: {
-              slidesPerView: 2,
-              slidesPerGroup: 2
-            },
-          }}
-          preventClicksPropagation={true}
-          preventClicks={true}
-          scrollbar={{ draggable: false, hide: true }}
-          slideToClickedSlide={false}
-          pagination={{ clickable: true }}
-        >
-          {
-            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;
-              }
-              if (movie.poster_path && movie.backdrop_path !== null) {
-                return (
-                  <SwiperSlide
-                    onClick={() => this.props.selectMovieHandler(movie)}
-                    key={idx} className={"movieShowcase__container--movie" + (netflixUrl ? "__netflix" : "")}
-                  >
-                    <img src={movieImageUrl} className="movieShowcase__container--movie-image" />
-                  </SwiperSlide>
-                )
-              }
-            })
+  return (
+    <>
+      <h1 className="movieShowcase__heading">{props.title}</h1>
+      <Swiper
+        className="movieShowcase__container"
+        navigation={true}
+        grabCursor={false}
+        draggable={false}
+        loop={true}
+        observer={true}
+        observerParents={true}
+        loopAdditionalSlides={2}
+        breakpoints={{
+          1378: {
+            slidesPerView: 5,
+            slidesPerGroup: 5,
+          },
+          998: {
+            slidesPerView: 4,
+            slidesPerGroup: 4,
+          },
+          625: {
+            slidesPerView: 3,
+            slidesPerGroup: 3,
+          },
+          0: {
+            slidesPerView: 2,
+            slidesPerGroup: 2,
+          },
+        }}
+        preventClicksPropagation={true}
+        preventClicks={true}
+        scrollbar={{ draggable: false, hide: true }}
+        slideToClickedSlide={false}
+        pagination={{ clickable: true }}
+      >
+        {props.movies.map((movie, idx) => {
+          let movieImageUrl =
+            'https://image.tmdb.org/t/p/w500/' + movie.backdrop_path;
+          if (
+            props.url ===
+            `/discover/tv?api_key=${process.env.API_KEY}&with_networks=213`
+          ) {
+            movieImageUrl =
+              'https://image.tmdb.org/t/p/original/' + movie.poster_path;
           }
-        </Swiper>
-      </>
-    );
-  }
-}
+          if (movie.poster_path && movie.backdrop_path !== null) {
+            return (
+              <SwiperSlide
+                onClick={() => props.selectMovieHandler(movie)}
+                key={idx}
+                className={
+                  'movieShowcase__container--movie' +
+                  (netflixUrl ? '__netflix' : '')
+                }
+              >
+                <img
+                  src={movieImageUrl}
+                  className="movieShowcase__container--movie-image"
+                />
+              </SwiperSlide>
+            );
+          }
+        })}
+      </Swiper>
+    </>
+  );
+};
+
+export default DisplayMovieRow;

src/static/sass/components/_movieShowcase.scss

@@ -40,7 +40,6 @@ div.swiper-button-next {
    }
 }
 
-
 .movieShowcase {
    background-color: $color-background;
    grid-column: 2 / 13;