From 6d53e2d2f315c6d59fef7c954b82e54a561f2fb8 Mon Sep 17 00:00:00 2001 From: andres alcocer Date: Fri, 7 Aug 2020 13:47:09 -0400 Subject: [PATCH] removed unused import statements --- README.md | 1 + src/containers/DisplayMovieRow.js | 179 ++++++++++-------- src/containers/Home.js | 3 - src/containers/Navbar.js | 5 +- src/index.html | 4 - src/index.js | 6 +- .../sass/components/_movieShowcase.scss | 37 ++-- 7 files changed, 124 insertions(+), 111 deletions(-) diff --git a/README.md b/README.md index d15acc4..5278bc9 100644 --- a/README.md +++ b/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 diff --git a/src/containers/DisplayMovieRow.js b/src/containers/DisplayMovieRow.js index 609efd9..d0835fb 100644 --- a/src/containers/DisplayMovieRow.js +++ b/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 ( - <> -

{props.title}

- - {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 ( - props.selectMovieHandler(movie)} - key={idx} - className={ - 'movieShowcase__container--movie' + - (netflixUrl ? '__netflix' : '') - } - > - - - ); - } - })} - - - ); -}; + 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 ( + <> +

{this.props.title}

+ = 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 ( + this.props.selectMovieHandler(movie)} + key={idx} + className={ + 'movieShowcase__container--movie' + + (netflixUrl ? '__netflix' : '') + } + > + + + ); + } + })} + + + ); + } +} diff --git a/src/containers/Home.js b/src/containers/Home.js index 0ad2a0a..152b20a 100644 --- a/src/containers/Home.js +++ b/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'; diff --git a/src/containers/Navbar.js b/src/containers/Navbar.js index 3997ccc..3efef59 100644 --- a/src/containers/Navbar.js +++ b/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 }); } diff --git a/src/index.html b/src/index.html index b0fe964..0d117d9 100644 --- a/src/index.html +++ b/src/index.html @@ -5,10 +5,6 @@ - - Netflix Clone diff --git a/src/index.js b/src/index.js index b639dfe..15193c5 100644 --- a/src/index.js +++ b/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 = ( diff --git a/src/static/sass/components/_movieShowcase.scss b/src/static/sass/components/_movieShowcase.scss index b48412e..f5cbd1d 100644 --- a/src/static/sass/components/_movieShowcase.scss +++ b/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; } } }