Merge pull request #126 from 90lucasgabriel/feature/WJ-125

WJ-125 - Fix empty div #125
90lucasgabriel · Nov 17, 2020 · 291a3ca · 291a3ca
2 parents 7d35bcc + 13d70f6
commit 291a3ca
Show file tree

Hide file tree

Showing 23 changed files with 232 additions and 126 deletions.
diff --git a/src/components/Input/styles.ts b/src/components/Input/styles.ts
@@ -52,6 +52,11 @@ export const Container = styled.div<ContainerProps>`
     &::placeholder {
       color: ${Color.Text};
     }
+
+    &:-webkit-autofill {
+      box-shadow: 0 0 0 30px ${Color.FillSecondary} inset;
+      -webkit-text-fill-color: ${Color.Text};
+    }
   }
 
   svg {

diff --git a/src/containers/EntityImage/index.tsx b/src/containers/EntityImage/index.tsx
@@ -110,37 +110,31 @@ const EntityImage: React.FC<Props> = ({
 
   return (
     <AnimatePresence>
-      {(entity.featuredImage || entity.backdrop || showEmpty) && (
-        <Container showShadow={showShadow} size={size}>
-          {!hideFavoriteButton && (
-            <IconButton onClick={handleFavorite}>
-              <BsHeartFill fill={isFavorite ? Color.Primary : Color.Empty} />
-            </IconButton>
-          )}
-          <EntityContainer
-            size={size}
+      <Container showShadow={showShadow} size={size}>
+        {!hideFavoriteButton && (
+          <IconButton onClick={handleFavorite}>
+            <BsHeartFill fill={isFavorite ? Color.Primary : Color.Empty} />
+          </IconButton>
+        )}
+        <EntityContainer
+          size={size}
+          showInfo={showInfo}
+          disabled={disabled}
+          onClick={handleClick}
+        >
+          <FeaturedImage
+            src={entity.featuredImage || entity.backdrop}
             showInfo={showInfo}
-            disabled={disabled}
-            onClick={handleClick}
-          >
-            <FeaturedImage
-              src={entity.featuredImage || entity.backdrop}
-              showInfo={showInfo}
-            />
-
-            {showInfo && (
-              <InfoContainer hideSubtitle={hideSubtitle}>
-                <InfoTitle hideSubtitle={hideSubtitle}>
-                  {entity.title}
-                </InfoTitle>
-                {!hideSubtitle && (
-                  <InfoSubtitle>{entity?.subtitle}</InfoSubtitle>
-                )}
-              </InfoContainer>
-            )}
-          </EntityContainer>
-        </Container>
-      )}
+          />
+
+          {showInfo && (
+            <InfoContainer hideSubtitle={hideSubtitle}>
+              <InfoTitle hideSubtitle={hideSubtitle}>{entity.title}</InfoTitle>
+              {!hideSubtitle && <InfoSubtitle>{entity?.subtitle}</InfoSubtitle>}
+            </InfoContainer>
+          )}
+        </EntityContainer>
+      </Container>
     </AnimatePresence>
   );
 };

diff --git a/src/containers/EntityImageList/index.tsx b/src/containers/EntityImageList/index.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, createRef, useState } from 'react';
+import React, { useCallback, createRef, useState, useMemo } from 'react';
 import { AnimatePresence } from 'framer-motion';
 
 import { FiChevronLeft, FiChevronRight } from 'react-icons/fi';
@@ -37,6 +37,10 @@ const EntityImageList: React.FC<Props> = ({
   const [showPreviousButton, setShowPreviousButton] = useState(false);
   const [showNextButton, setShowNextButton] = useState(true);
 
+  const parsedData = useMemo(() => {
+    return data.filter(item => item.featuredImage || item.backdrop);
+  }, [data]);
+
   const checkButtons = useCallback(
     (isNext: boolean) => {
       const itemsContainerDOM = itemsContainer.current as HTMLDivElement;
@@ -61,20 +65,20 @@ const EntityImageList: React.FC<Props> = ({
   // Prev navigate button
   const handlePrevious = useCallback(() => {
     const itemsContainerDOM = itemsContainer.current as HTMLDivElement;
-    const itemWidth = itemsContainerDOM?.scrollWidth / data.length;
+    const itemWidth = itemsContainerDOM?.scrollWidth / parsedData.length;
     itemsContainerDOM.scrollBy(-itemWidth, 0);
 
     checkButtons(false);
-  }, [itemsContainer, data.length, checkButtons]);
+  }, [itemsContainer, parsedData.length, checkButtons]);
 
   // Next navigate button
   const handleNext = useCallback(() => {
     const itemsContainerDOM = itemsContainer.current as HTMLDivElement;
-    const itemWidth = itemsContainerDOM?.scrollWidth / data.length;
+    const itemWidth = itemsContainerDOM?.scrollWidth / parsedData.length;
     itemsContainerDOM.scrollBy(itemWidth, 0);
 
     checkButtons(true);
-  }, [itemsContainer, data.length, checkButtons]);
+  }, [itemsContainer, parsedData.length, checkButtons]);
 
   return (
     <AnimatePresence>
@@ -97,7 +101,7 @@ const EntityImageList: React.FC<Props> = ({
             />
           )}
 
-          {!isLoading && data.length > 0 && (
+          {!isLoading && parsedData.length > 0 && (
             <>
               {showPreviousButton && (
                 <PreviousButton
@@ -110,7 +114,7 @@ const EntityImageList: React.FC<Props> = ({
               )}
               <ListContainer ref={itemsContainer}>
                 <ListContent>
-                  {data.map(entity => (
+                  {parsedData.map(entity => (
                     <EntityImageContainer key={entity.id}>
                       <EntityImage
                         showShadow={showShadow}
@@ -133,7 +137,7 @@ const EntityImageList: React.FC<Props> = ({
             </>
           )}
 
-          {!isLoading && data.length === 0 && (
+          {!isLoading && parsedData.length === 0 && (
             <MessageContainer>{message}</MessageContainer>
           )}
         </Container>

diff --git a/src/domains/Favorites/api/List/types/Response.ts b/src/domains/Favorites/api/List/types/Response.ts
@@ -1,9 +1,11 @@
 import MovieResponse from 'domains/Movie/api/Details/types/Response';
 import PersonResponse from 'domains/Person/api/Details/types/Response';
+import TvResponse from 'domains/Tv/api/Details/types/Response';
 
 export default interface Response
   extends Omit<MovieResponse, 'id'>,
-    Omit<PersonResponse, 'id'> {
+    Omit<PersonResponse, 'id'>,
+    Omit<TvResponse, 'id'> {
   favoriteId: string;
   userId: string;
   entityId: number;

diff --git a/src/domains/Movie/api/Details/index.ts b/src/domains/Movie/api/Details/index.ts
@@ -1,6 +1,6 @@
 import tmdb from 'services/api/tmdb';
 
-import { arrayToString } from 'shared/helpers';
+import { arrayToString, randomInteger } from 'shared/helpers';
 import {
   getBackdrop,
   getFeaturedImage,
@@ -19,6 +19,7 @@ import Credits from 'domains/Movie/api/Credits/types/Response';
 
 import Crew from 'domains/Movie/api/Credits/types/Crew';
 import Cast from 'domains/Movie/api/Credits/types/Cast';
+import Image from 'shared/types/Image';
 
 const Details = async (movieId: number, params?: Params): Promise<Response> => {
   const response = await rawPopular(movieId, params);
@@ -41,33 +42,25 @@ export const rawPopular = async (
 };
 
 const parseResponse = (movie: RawResponse): Response => {
-  let parsedMovie = {
-    overview: movie.overview,
-    budget: movie.budget,
-    genres: movie.genres,
-    genresNames: arrayToString(movie.genres, 'name'),
-    id: movie.id,
-    originalTitle: movie.original_title,
-    popularity: movie.popularity,
-    voteCount: movie.vote_count,
-    voteAverage: movie.vote_average,
-    runtime: `${movie.runtime} min`,
-    tagline: movie.tagline,
-
-    directorName: movie.credits?.crew.find(
-      person => person.job.toUpperCase() === 'DIRECTOR',
-    )?.name,
-
-    releaseDate: getReleaseDate(movie),
-    backdrop: getBackdrop(movie),
-
-    featuredImage: getFeaturedImage(movie),
-    releaseYear: getReleaseYear(movie),
-    subtitle: getReleaseDate(movie),
-    title: getTitle(movie),
-    favorite: false,
-    mediaType: EntityType.MOVIE,
-  } as Response;
+  const posters = movie.images?.posters.map(poster => ({
+    aspectRatio: poster.aspect_ratio,
+    height: poster.height,
+    width: poster.width,
+    voteAverage: poster.vote_average,
+    voteCount: poster.vote_count,
+    featuredImage: getFeaturedImage(poster),
+  })) as Image[];
+
+  const backdrops = movie.images?.backdrops.map(backdrop => ({
+    aspectRatio: backdrop.aspect_ratio,
+    height: backdrop.height,
+    width: backdrop.width,
+    voteAverage: backdrop.vote_average,
+    voteCount: backdrop.vote_count,
+    featuredImage: getFeaturedImage(backdrop),
+  })) as Image[];
+
+  const images = { posters, backdrops };
 
   const recommendations = movie.recommendations?.results.map(
     recommendation => ({
@@ -118,7 +111,37 @@ const parseResponse = (movie: RawResponse): Response => {
 
   const credits = { cast, crew } as Credits;
 
-  parsedMovie = { ...parsedMovie, recommendations, credits };
+  let parsedMovie = {
+    overview: movie.overview,
+    budget: movie.budget,
+    genres: movie.genres,
+    genresNames: arrayToString(movie.genres, 'name'),
+    id: movie.id,
+    originalTitle: movie.original_title,
+    popularity: movie.popularity,
+    voteCount: movie.vote_count,
+    voteAverage: movie.vote_average,
+    runtime: `${movie.runtime} min`,
+    tagline: movie.tagline,
+
+    directorName: movie.credits?.crew.find(
+      person => person.job.toUpperCase() === 'DIRECTOR',
+    )?.name,
+
+    releaseDate: getReleaseDate(movie),
+    backdrop:
+      backdrops[randomInteger(0, backdrops.length - 1)]?.featuredImage ||
+      getBackdrop(movie),
+
+    featuredImage: getFeaturedImage(movie),
+    releaseYear: getReleaseYear(movie),
+    subtitle: getReleaseDate(movie),
+    title: getTitle(movie),
+    favorite: false,
+    mediaType: EntityType.MOVIE,
+  } as Response;
+
+  parsedMovie = { ...parsedMovie, recommendations, credits, images };
 
   return parsedMovie;
 };

diff --git a/src/domains/Movie/api/Details/types/RawResponse.ts b/src/domains/Movie/api/Details/types/RawResponse.ts
@@ -1,5 +1,6 @@
 import Recommendations from 'domains/Movie/api/Recommendations/types/RawResponse';
 import Credits from 'domains/Movie/api/Credits/types/RawResponse';
+import RawImage from 'shared/types/Image/RawImage';
 
 export default interface RawResponse {
   poster_path?: string;
@@ -24,9 +25,14 @@ export default interface RawResponse {
   video: boolean;
   vote_average: number;
   tagline: string;
+
   recommendations?: {
     results: Recommendations[];
   };
+  images?: {
+    posters: RawImage[];
+    backdrops: RawImage[];
+  };
   credits?: Credits;
   mediaType: string;
 }
diff --git a/src/domains/Movie/api/Details/types/Response.ts b/src/domains/Movie/api/Details/types/Response.ts
@@ -1,5 +1,6 @@
 import Recommendations from 'domains/Movie/api/Recommendations/types/Response';
 import Credits from 'domains/Movie/api/Credits/types/Response';
+import Images from 'shared/types/Images';
 
 export default interface Response {
   poster?: string;
@@ -24,6 +25,7 @@ export default interface Response {
   tagline: string;
 
   recommendations?: Recommendations[];
+  images?: Images;
   credits?: Credits;
   directorName?: string;
 

diff --git a/src/domains/Person/api/Details/index.ts b/src/domains/Person/api/Details/index.ts
@@ -17,6 +17,7 @@ import Params from 'domains/Person/api/Details/types/Params';
 import RawResponse from 'domains/Person/api/Details/types/RawResponse';
 import Response from 'domains/Person/api/Details/types/Response';
 import Movie from 'domains/Person/api/Details/types/Movie';
+import Image from 'shared/types/Image';
 
 const Details = async (
   personId: number,
@@ -97,14 +98,16 @@ const parseResponse = (person: RawResponse): Response => {
       Date.parse(a.originalDate) < Date.parse(b.originalDate) ? 1 : -1,
     );
 
-  const images = person.images?.profiles.map(image => ({
-    aspectRatio: image.aspect_ratio,
-    featuredImage: getFeaturedImage(image) || undefined,
-    height: image.height,
-    voteAverage: image.vote_average,
-    voteCount: image.vote_count,
-    width: image.width,
-  }));
+  const images = {
+    profiles: person.images?.profiles.map(profile => ({
+      aspectRatio: profile.aspect_ratio,
+      height: profile.height,
+      width: profile.width,
+      voteAverage: profile.vote_average,
+      voteCount: profile.vote_count,
+      featuredImage: getFeaturedImage(profile),
+    })) as Image[],
+  };
 
   parsedPerson = { ...parsedPerson, knownFor, filmography, images };
 

diff --git a/src/domains/Person/api/Details/types/RawResponse.ts b/src/domains/Person/api/Details/types/RawResponse.ts
@@ -1,5 +1,6 @@
 // import Recommendations from 'domains/Movie/api/Recommendations/RawResponse';
 import RawMovie from 'domains/Person/api/Details/types/RawMovie';
+import RawImage from 'shared/types/Image/RawImage';
 
 export default interface RawResponse {
   id: number;
@@ -21,14 +22,7 @@ export default interface RawResponse {
   homepage?: string;
 
   images?: {
-    profiles: Array<{
-      aspect_ratio: number;
-      file_path: string;
-      height: number;
-      vote_average: number;
-      vote_count: number;
-      width: number;
-    }>;
+    profiles: RawImage[];
   };
 
   combined_credits?: { cast: RawMovie[] };

diff --git a/src/domains/Person/api/Details/types/Response.ts b/src/domains/Person/api/Details/types/Response.ts
@@ -1,5 +1,6 @@
 // import Recommendations from 'domains/Movie/api/Recommendations/Response';
 import Movie from 'domains/Person/api/Details/types/Movie';
+import Images from 'shared/types/Images';
 
 export default interface Response {
   id: number;
@@ -21,14 +22,7 @@ export default interface Response {
   knownFor?: Movie[];
   filmography?: Movie[];
 
-  images?: Array<{
-    aspectRatio: number;
-    featuredImage?: string;
-    height: number;
-    voteAverage: number;
-    voteCount: number;
-    width: number;
-  }>;
+  images?: Images;
 
   favorite: boolean;
   mediaType: number;