sucessfuly integrated carousel component

src/components/MovieGenre.js

@@ -1,21 +0,0 @@
-import React, { Component } from 'react'
-
-export default class MovieGenre extends Component {
-   state = {}
-
-   render() {
-      let netflixUrl = false;
-      if (this.props.url === `/discover/tv?api_key=${process.env.API_KEY}&with_networks=213`) {
-         netflixUrl = true;
-      }
-
-      return (
-         <>
-            <div onClick={() => this.props.selectMovieHandler(this.props.movie)}
-               className={"movieShowcase__container--movie" + (netflixUrl ? "__netflix" : "")}>
-               <img src={this.props.posterUrl} className="movieShowcase__container--movie-image" />
-            </div>
-         </>
-      )
-   }
-}

src/components/MovieGenreImage.js

@@ -1,26 +0,0 @@
-import React from 'react';
-
-export default function MovieGenreImage(props) {
-  let netflixUrl = false;
-
-  if (
-    props.url ===
-    `https://api.themoviedb.org/3/discover/tv?api_key=${process.env.API_KEY}&with_networks=213`
-  ) {
-    netflixUrl = true;
-  }
-
-  return (
-    <div
-      onClick={props.movieDetailsModal}
-      className={
-        'movieShowcase__container--movie' + (netflixUrl ? '__netflix' : '')
-      }
-    >
-      <img
-        src={props.posterUrl}
-        className="movieShowcase__container--movie-image"
-      />
-    </div>
-  );
-}

src/containers/DisplayMovieRow.js

@@ -6,9 +6,6 @@ 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';
-
-import MovieGenre from '../components/MovieGenre';
-
 // install Swiper components
 SwiperCore.use([Navigation, Pagination, Scrollbar, A11y]);
 
@@ -95,7 +92,10 @@ export default class DisplayMovieRow extends Component {
               }
               if (movie.poster_path && movie.backdrop_path !== null) {
                 return (
-                  <SwiperSlide key={idx} className={"movieShowcase__container--movie" + (netflixUrl ? "__netflix" : "")}>
+                  <SwiperSlide
+                    onClick={() => this.props.selectMovieHandler(movie)}
+                    key={idx} className={"movieShowcase__container--movie" + (netflixUrl ? "__netflix" : "")}
+                  >
                     <img src={movieImageUrl} className="movieShowcase__container--movie-image" />
                   </SwiperSlide>
                 )

src/static/sass/components/_backdrop.scss

@@ -6,5 +6,5 @@
    left: 0;
    top: 0;
    background-color: rgba($color-background, .7);
-   transition: all .5s;
+   transition: all .3s;
 }

src/static/sass/components/_modal.scss

@@ -8,6 +8,7 @@
    height: 52rem;
    opacity: 0;
    box-shadow: 0 1.5rem 4rem rgba($color-dark, .15);
+   transition: all .3s;
 
    @include responsive(tab_port) {
       height: 38rem;