Deploy final typescript version

Author: jgudo

src/components/main/Movies/MovieOverview.tsx

@@ -1,5 +1,3 @@
-import imgBackground from '@app/assets/images/background.jpg';
-import imgPlaceholder from '@app/assets/images/img-placeholder.jpg';
 import ImageLoader from '@app/components/common/Loader/ImageLoader';
 import { getCSSVar, getYear } from '@app/helpers/helperFunctions';
 import useFavorites from '@app/hooks/useFavorites';
@@ -89,7 +87,7 @@ const MovieOverview = () => {
               <img
                 alt=""
                 className="backdrop__image"
-                src={movie?.backdrop_path ? `${tmdbBackdropPath + movie?.backdrop_path}` : imgBackground}
+                src={movie?.backdrop_path ? `${tmdbBackdropPath + movie?.backdrop_path}` : '/background.jpg'}
               />
             </div>
           )}
@@ -113,7 +111,7 @@ const MovieOverview = () => {
                     <ImageLoader
                       alt={movie.original_title || movie.original_name || movie.title}
                       imgId={movie.id}
-                      src={movie.poster_path ? `${tmdbPosterPath + movie.poster_path}` : imgPlaceholder}
+                      src={movie.poster_path ? `${tmdbPosterPath + movie.poster_path}` : '/img-placeholder.jpg'}
                     />
                   </LazyLoad>
                 ) : <Skeleton width={'100%'} height={'100%'} />}

src/components/main/People/PeopleList.tsx

@@ -12,7 +12,7 @@ interface IProps {
 const PeopleList: React.FC<IProps> = ({ people, gridClass, templateCount }) => {
   return (
     <div className={gridClass}>
-      {!people && templateCount != 0 ? new Array(templateCount).fill({}).map((item, index) => (
+      {people.length === 0 && templateCount != 0 ? new Array(templateCount).fill({}).map((item, index) => (
         <PeopleCard
           key={`skeleton_people_${index}`}
           data={null}

src/components/main/People/PersonBiography.tsx

@@ -1,4 +1,3 @@
-import imgBackground from '@app/assets/images/background.jpg';
 import ImageLoader from '@app/components/common/Loader/ImageLoader';
 import { getCSSVar } from '@app/helpers/helperFunctions';
 import { IRootState } from '@app/types/types';
@@ -8,6 +7,7 @@ import LazyLoad from 'react-lazy-load';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
 import { useSelector } from 'react-redux';
 import Modal from 'react-responsive-modal';
+import 'react-responsive-modal/styles.css';
 import { useHistory } from 'react-router-dom';
 
 const tmdbPosterPath = 'https://image.tmdb.org/t/p/w300_and_h450_face/';
@@ -40,7 +40,7 @@ const PersonBiography = () => {
           modal: 'Modal',
           modalContainer: 'ModalContainer',
           closeButton: 'ModalCloseButton',
-          closeIcon: 'ModalCloseIcon'
+          closeIcon: 'ModalCloseIcon',
         }}
       >
         <h2>{actor?.name}'s Biography</h2>
@@ -54,7 +54,7 @@ const PersonBiography = () => {
                 <img
                   alt=""
                   className="backdrop__image"
-                  src={imgBackground}
+                  src="/background.jpg"
                 />
               )}
             </div>

src/components/main/Slider/MovieSliderItem.tsx

@@ -1,4 +1,3 @@
-import imgPlaceholder from '@app/assets/images/img-placeholder.jpg';
 import ImageLoader from '@app/components/common/Loader/ImageLoader';
 import { getCSSVar } from '@app/helpers/helperFunctions';
 import { IMovieData } from '@app/types/types';
@@ -70,7 +69,7 @@ const MovieSliderItem: React.FC<{ movie: IMovieData | null }> = ({ movie }) => {
                 <ImageLoader
                   alt={movie.original_title || movie.original_name || movie.title}
                   imgId={movie.id}
-                  src={movie.poster_path ? `${tmdbPosterPath + movie.poster_path}` : imgPlaceholder}
+                  src={movie.poster_path ? `${tmdbPosterPath + movie.poster_path}` : '/img-placeholder.jpg'}
                 />
               </LazyLoad>
             ) : <Skeleton width={'100%'} height={'100%'} />}

src/styles/5 - COMPONENTS/_modal.scss

@@ -12,35 +12,37 @@
 }
 
 .Modal {
-  background: var(--background-color);
-  padding: 50px;
+  background: var(--background-color) !important;
+  padding: 50px !important;
   border-radius: 6px;
   position: relative;
-  z-index: 9999;
-  position: fixed;
+  // z-index: 9999;
+  // position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   margin: auto;
+  // width: 80rem;
 
   @include mobile {
-    padding: $l-size !important;
+    padding: $l-size;
   }
 }
 
 .ModalContainer {
-  width: 90rem;
+  // width: 199;
 }
 
 .ModalCloseButton {
   position: absolute;
   top: 10px;
   right: 10px;
-  color: #fff;
-  background: #ff2e4f;
+  background: #ff2e4f !important;
 }
 
 .ModalCloseIcon {
-  color: #fff;
+  path {
+    fill: #fff;
+  }
 }

src/styles/5 - COMPONENTS/_slider.scss

@@ -27,10 +27,10 @@
     top: 0;
     bottom: 0;
     margin: auto;
-    width: 100%;  
+    width: 100%;
     height: 100%;
     border-radius: $border-radius;
-    background: transparentize($dark-blue-0, .3);
+    background: transparentize($dark-blue-0, 0.3);
     z-index: 1;
   }
 
@@ -66,20 +66,20 @@
     width: 100%;
     padding: 0;
     padding-bottom: 5rem;
-    // padding-left: $l-size; 
-    // padding-right: $l-size; 
+    // padding-left: $l-size;
+    // padding-right: $l-size;
   }
 
   .view__overview {
     color: $text-color;
-    
+
     @include mobile {
       width: 100%;
       max-height: 80px;
       // white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
-      display:block;
+      display: block;
       display: -webkit-box;
       -webkit-line-clamp: 3;
       -webkit-box-orient: vertical;
@@ -164,8 +164,6 @@
   height: 100%;
 }
 
-
-
 .slick-arrow {
   z-index: 10;
   padding: 20px;
@@ -176,14 +174,20 @@
   }
 
   &:before {
-    font-size: 28px; 
+    font-size: 38px;
     position: absolute;
     left: 0;
     right: 0;
     top: 5px;
   }
 }
 
+.slick-next,
+.slick-prev {
+  width: 30px;
+  height: 30px;
+}
+
 .slick-next {
   right: 5% !important;
 }
@@ -198,7 +202,7 @@
   li {
     margin: 0;
   }
-  
+
   button {
     &:before {
       width: 15px !important;
@@ -207,4 +211,4 @@
       color: #fff !important;
     }
   }
-}
+}

src/views/error/NetworkError.tsx

@@ -12,6 +12,7 @@ const NetworkError: React.FC<RouteComponentProps> = ({ history }) => {
     <div className="error">
       <h1>Network Error</h1>
       <p>It looks like you don't have an intenet connection</p>
+      <br />
       <button
         className="button--primary"
         onClick={returnHome}

src/views/error/PageNotFound.tsx

@@ -10,7 +10,8 @@ const PageNotFound: React.FC<RouteComponentProps> = ({ history }) => {
 
   return (
     <div className="error">
-      <h1>The Page Your Requested Could Not Be Found</h1>
+      <h1>The Page You Requested Could Not Be Found</h1>
+      <br />
       <button
         className="button--primary"
         onClick={returnHome}

src/views/genre/SelectedGenre.tsx

@@ -25,6 +25,10 @@ const SelectedGenre: React.FC<RouteProps> = ({ match }) => {
     dispatch(fetchGenreCategory(match.params.id, currentPage));
   }, []);
 
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [currentGenre?.page]);
+
   const handlePageChange = (page: number) => {
     if (currentGenre?.page !== page && !isLoading) {
       dispatch(fetchGenreCategory(match.params.id, page));

src/views/movie/DiscoverMovies.tsx

@@ -21,7 +21,9 @@ const DiscoverMovies = () => {
     if (!discoverMovies || didMount) {
       dispatch(fetchDiscoverMovies(currentPage));
     }
-  }, [filter]);
+
+    window.scrollTo(0, 0);
+  }, [filter, discoverMovies?.page]);
 
   const handlePageChange = (page: number) => {
     if (discoverMovies?.page !== page) {