removed unused import statements

README.md

@@ -10,6 +10,7 @@ This project is a simplified front end clone of Netflix. It was created with Rea
 - Redux & React
 - Sass (grid & flexbox)
 - Media queries
+- Swiper JS
 
 ### Runing Project Locally
 - Install dependencies: run `npm install` in root project

src/containers/DisplayMovieRow.js

@@ -1,90 +1,107 @@
 import React, { Component } from 'react';
 import { Swiper, SwiperSlide } from 'swiper/react';
-// Import Swiper styles
-import 'swiper/swiper.scss';
-import 'swiper/components/navigation/navigation.scss';
-import 'swiper/components/pagination/pagination.scss';
-import 'swiper/components/scrollbar/scrollbar.scss';
 import SwiperCore, { Navigation, Pagination, Scrollbar, A11y } from 'swiper';
 // install Swiper components
 SwiperCore.use([Navigation, Pagination, Scrollbar, A11y]);
 
-const DisplayMovieRow = (props) => {
-  let netflixUrl = false;
-  if (
-    props.url ===
-    `/discover/tv?api_key=${process.env.API_KEY}&with_networks=213`
-  ) {
-    netflixUrl = true;
+export default class DisplayMovieRow extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      width: window.innerWidth,
+    };
   }
 
-  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;
-          }
-          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>
-    </>
-  );
-};
+  componentDidMount() {
+    window.addEventListener("resize", this.handleResize);
+  }
 
-export default DisplayMovieRow;
+  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.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>
+              );
+            }
+          })}
+        </Swiper>
+      </>
+    );
+  }
+}

src/containers/Home.js

@@ -1,9 +1,6 @@
 import React, { Component } from 'react';
-import axios from "../axios-movies";
 
-import Navbar from './Navbar';
 import MainContent from './MainContent';
-import Movie from '../components/Movie/Movie';
 import Modal from '../components/UI/Modal';
 import MovieDetails from '../components/Movie/MovieDetails';
 

src/containers/Navbar.js

@@ -2,9 +2,8 @@ import React, { Component } from 'react';
 import { NavLink } from 'react-router-dom';
 import _ from 'lodash';
 import { withRouter } from 'react-router-dom';
-import axios from '../axios-movies';
-import Movie from '../components/Movie/Movie';
 
+import axios from '../axios-movies';
 import SearchLogo from '../static/images/search-icon.svg';
 import NetflixLogo from '../static/images/Netflix_Logo_RGB.png';
 import BellLogo from '../static/images/bell-logo.svg';
@@ -31,7 +30,7 @@ class Navbar extends Component {
   }
 
   /** changes the scrolling state depending on the Y-position */
-  handleScroll = (event) => {
+  handleScroll = () => {
     if (window.scrollY === 0) {
       this.setState({ scrolling: false });
     }

src/index.html

@@ -5,10 +5,6 @@
    <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>

src/index.js

@@ -7,13 +7,15 @@ import promise from 'redux-promise';
 import '@babel/polyfill';
 
 import App from './containers/App';
+import 'swiper/swiper-bundle.min.css';
+// import 'swiper/components/navigation/navigation.scss';
+// import 'swiper/components/pagination/pagination.scss';
+// import 'swiper/components/scrollbar/scrollbar.scss';
 // Import main sass file to apply global styles
 import './static/sass/style.scss';
 
 const createStoreWithMiddleware = applyMiddleware(promise)(createStore);
 
-// TODO
-// - implement carousel
 const app = (
   <Provider store={createStoreWithMiddleware(reducers)}>
     <App />

src/static/sass/components/_movieShowcase.scss

@@ -1,41 +1,42 @@
 // Override swiper styles
 .swiper-pagination {
-   top: 0;
-   height: 2rem;
-   text-align: right;
-   padding-right: 4rem;
+   top: 0 !important;
+   height: 2rem !important;
+   text-align: right !important;
+   padding-right: 4rem !important;
 }
 
 .swiper-pagination-bullet {
-   background-color: rgb(255, 255, 255);
+   background-color: rgb(255, 255, 255) !important;
 }
 
 .swiper-container-horizontal>.swiper-pagination-bullets {
-   bottom: 0;
-   left: 0;
-   width: 100%;
+   bottom: 0 !important;
+   left: 0 !important;
+   width: 100% !important;
 }
 
 div.swiper-button-prev,
 div.swiper-button-next {
-   transition: all .3s;
+   transition: all .3s !important;
    color: rgb(255, 255, 255);
 
    &:hover {
-      transform: scale(1.2);
-      transition: all .3s;
+      transform: scale(1.2) !important;
+      transition: all .3s !important;
    }
 }
 
 .swiper-wrapper:hover .swiper-slide {
-   opacity: .3;
+   opacity: .3 !important;
+   transition: all 450ms !important;
 
    &:hover {
-      transform: scale(1.3);
-      opacity: 1;
+      transform: scale(1.3) !important;
+      opacity: 1 !important;
 
       @include responsive(tab_port) {
-         transform: scale(1.2);
+         transform: scale(1.2) !important;
       }
    }
 }
@@ -78,14 +79,14 @@ div.swiper-button-next {
 
       &:hover &--movie__netflix {
          &:hover {
-            transform: scale(1.1);
+            transform: scale(1.1) !important;
 
             @include responsive(tab_port) {
-               transform: scale(1.05);
+               transform: scale(1.05) !important;
             }
 
             @include responsive(phone) {
-               transform: scale(1.05);
+               transform: scale(1.05) !important;
             }
          }
       }