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