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,18 +1,34 @@
 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) => {
+export default class DisplayMovieRow extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      width: window.innerWidth,
+    };
+  }
+
+  componentDidMount() {
+    window.addEventListener("resize", this.handleResize);
+  }
+
+  componentWillUnMount() {
+    window.addEventListener("resize", this.handleResize);
+  }
+
+  handleResize = (e) => {
+    this.setState({ width: window.innerWidth });
+  };
+
+  render() {
+    const { width } = this.state;
     let netflixUrl = false;
     if (
-    props.url ===
+      this.props.url ===
       `/discover/tv?api_key=${process.env.API_KEY}&with_networks=213`
     ) {
       netflixUrl = true;
@@ -20,16 +36,18 @@ const DisplayMovieRow = (props) => {
 
     return (
       <>
-      <h1 className="movieShowcase__heading">{props.title}</h1>
+        <h1 className="movieShowcase__heading">{this.props.title}</h1>
         <Swiper
           className="movieShowcase__container"
           navigation={true}
           grabCursor={false}
           draggable={false}
           loop={true}
-        observer={true}
-        observerParents={true}
-        loopAdditionalSlides={2}
+          loopAdditionalSlides={
+            width >= 1378 ? 4 :
+              width >= 998 ? 3 :
+                width >= 625 ? 2 : 2
+          }
           breakpoints={{
             1378: {
               slidesPerView: 5,
@@ -54,11 +72,11 @@ const DisplayMovieRow = (props) => {
           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 (
-            props.url ===
+              this.props.url ===
               `/discover/tv?api_key=${process.env.API_KEY}&with_networks=213`
             ) {
               movieImageUrl =
@@ -67,7 +85,7 @@ const DisplayMovieRow = (props) => {
             if (movie.poster_path && movie.backdrop_path !== null) {
               return (
                 <SwiperSlide
-                onClick={() => props.selectMovieHandler(movie)}
+                  onClick={() => this.props.selectMovieHandler(movie)}
                   key={idx}
                   className={
                     'movieShowcase__container--movie' +
@@ -85,6 +103,5 @@ const DisplayMovieRow = (props) => {
         </Swiper>
       </>
     );
-};
-
-export default DisplayMovieRow;
+  }
+}

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;
             }
          }
       }