refactored DisplayMovieRow component

src/components/DisplayMovieRow.js

@@ -1,86 +1,58 @@
-import React, { Component } from 'react';
+import React, { Component } from 'react'
-import { Swiper, SwiperSlide } from 'swiper/react';
+import { Swiper, SwiperSlide } from 'swiper/react'
-import SwiperCore, { Navigation, Pagination, Scrollbar, A11y } from 'swiper';
+import SwiperCore, { Navigation, Pagination, Scrollbar, A11y } from 'swiper'
+
+import { useViewport } from '../hooks/useViewport'
 
 // install Swiper components
-SwiperCore.use([Navigation, Pagination, Scrollbar, A11y]);
+SwiperCore.use([Navigation, Pagination, Scrollbar, A11y])
 
-export default class DisplayMovieRow extends Component {
+const DisplayMovieRow = ({ title, isNetflixMovies, movies }) => {
-  constructor(props) {
+  const [windowDimensions] = useViewport()
-    super(props);
+  const { width } = windowDimensions
-    this.state = {
-      width: window.innerWidth,
-    };
-  }
 
-  componentDidMount() {
+  return (
-    window.addEventListener('resize', this.handleResize);
+    <>
-  }
+      <h1 className='movieShowcase__heading'>{title}</h1>
+      <Swiper
+        className='movieShowcase__container'
+        navigation={true}
+        grabCursor={false}
+        draggable={false}
+        loop={true}
+        loopAdditionalSlides={
+          width >= 1378 ? 4 : width >= 998 ? 3 : width >= 625 ? 2 : 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 }}
+      >
+        {movies &&
+          movies.map((movie, idx) => {
+            let movieImageUrl = isNetflixMovies
+              ? `https://image.tmdb.org/t/p/original/${movie.poster_path}`
+              : `https://image.tmdb.org/t/p/w500/${movie.backdrop_path}`
 
-  componentWillUnMount() {
-    window.addEventListener('resize', this.handleResize);
-  }
-
-  handleResize = (e) => {
-    this.setState({ width: window.innerWidth });
-  };
-
-  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={true}
-          grabCursor={false}
-          draggable={false}
-          loop={true}
-          loopAdditionalSlides={
-            width >= 1378 ? 4 : width >= 998 ? 3 : width >= 625 ? 2 : 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 && 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
@@ -88,19 +60,20 @@ export default class DisplayMovieRow extends Component {
                   key={idx}
                   className={
                     'movieShowcase__container--movie' +
-                    (netflixUrl ? '__netflix' : '')
+                    (isNetflixMovies ? '__netflix' : '')
                   }
                 >
                   <img
                     src={movieImageUrl}
-                    className="movieShowcase__container--movie-image"
+                    className='movieShowcase__container--movie-image'
                   />
                 </SwiperSlide>
-              );
+              )
             }
           })}
-        </Swiper>
+      </Swiper>
-      </>
+    </>
-    );
+  )
-  }
 }
+
+export default DisplayMovieRow

src/components/MainContent.js

@@ -130,6 +130,7 @@ const MainContent = () => {
       <Header movie={headerMovie} />
       <div className='movieShowcase'>
         <DisplayMovieRow
+          isNetflixMovies={true}
           title='Netflix Originals'
           movies={netflixOriginals.data}
         />

src/hooks/useViewport.js

@@ -0,0 +1,39 @@
+import { useState, useEffect } from 'react'
+
+const height =
+  window.innerHeight ||
+  document.documentElement.clientHeight ||
+  document.body.clientHeight
+const width =
+  window.innerWidth ||
+  document.documentElement.clientWidth ||
+  document.body.clientWidth
+
+export const useViewport = () => {
+  const [windowDimensions, setWindowDimensions] = useState({ height, width })
+
+  const deriveWindowDimensions = () => {
+    const height =
+      window.innerHeight ||
+      document.documentElement.clientHeight ||
+      document.body.clientHeight
+
+    const width =
+      window.innerWidth ||
+      document.documentElement.clientWidth ||
+      document.body.clientWidth
+
+    setWindowDimensions({ height, width })
+  }
+
+  useEffect(() => {
+    deriveWindowDimensions()
+    window.addEventListener('resize', deriveWindowDimensions)
+
+    return () => {
+      window.removeEventListener('resize', deriveWindowDimensions)
+    }
+  }, [])
+
+  return [windowDimensions]
+}