From ee9134e86a12535782690d2ac070ee3687851c90 Mon Sep 17 00:00:00 2001 From: Lucas Teixeira Date: Tue, 17 Nov 2020 15:40:17 -0300 Subject: [PATCH 1/4] WJ-125 - Fix: Filter empty images; --- src/containers/EntityImage/index.tsx | 54 +++++++++++------------- src/containers/EntityImageList/index.tsx | 20 +++++---- 2 files changed, 36 insertions(+), 38 deletions(-) diff --git a/src/containers/EntityImage/index.tsx b/src/containers/EntityImage/index.tsx index c7ed9a9..f0ba930 100644 --- a/src/containers/EntityImage/index.tsx +++ b/src/containers/EntityImage/index.tsx @@ -110,37 +110,31 @@ const EntityImage: React.FC = ({ return ( - {(entity.featuredImage || entity.backdrop || showEmpty) && ( - - {!hideFavoriteButton && ( - - - - )} - + {!hideFavoriteButton && ( + + + + )} + + - - - {showInfo && ( - - - {entity.title} - - {!hideSubtitle && ( - {entity?.subtitle} - )} - - )} - - - )} + /> + + {showInfo && ( + + {entity.title} + {!hideSubtitle && {entity?.subtitle}} + + )} + + ); }; diff --git a/src/containers/EntityImageList/index.tsx b/src/containers/EntityImageList/index.tsx index 2aea46f..f38f0fe 100644 --- 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 = ({ 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 = ({ // 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 ( @@ -97,7 +101,7 @@ const EntityImageList: React.FC = ({ /> )} - {!isLoading && data.length > 0 && ( + {!isLoading && parsedData.length > 0 && ( <> {showPreviousButton && ( = ({ )} - {data.map(entity => ( + {parsedData.map(entity => ( = ({ )} - {!isLoading && data.length === 0 && ( + {!isLoading && parsedData.length === 0 && ( {message} )} From fd856c5375032f6dcd82faf35ed8a220d1b55cc4 Mon Sep 17 00:00:00 2001 From: Lucas Teixeira Date: Tue, 17 Nov 2020 17:24:16 -0300 Subject: [PATCH 2/4] WJ-125 - New: Input autofill color; WJ-125 - Update: Forms error message color; --- src/components/Input/styles.ts | 5 +++++ src/pages/Login/styles.ts | 2 +- src/pages/Signup/styles.ts | 2 +- 3 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/Input/styles.ts b/src/components/Input/styles.ts index 7393f12..269ae8d 100644 --- a/src/components/Input/styles.ts +++ b/src/components/Input/styles.ts @@ -52,6 +52,11 @@ export const Container = styled.div` &::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/pages/Login/styles.ts b/src/pages/Login/styles.ts index ad04391..4207987 100644 --- a/src/pages/Login/styles.ts +++ b/src/pages/Login/styles.ts @@ -58,7 +58,7 @@ export const LoginHeader = styled.h1` export const ErrorMessage = styled.p` margin: ${Size.Default} 0; - color: ${Color.Secondary}; + color: ${Color.Error}; font-size: ${Size.Small}; `; diff --git a/src/pages/Signup/styles.ts b/src/pages/Signup/styles.ts index 855eeae..998e624 100644 --- a/src/pages/Signup/styles.ts +++ b/src/pages/Signup/styles.ts @@ -58,7 +58,7 @@ export const SignupHeader = styled.h1` export const ErrorMessage = styled.p` margin: ${Size.Default} 0; - color: ${Color.Secondary}; + color: ${Color.Error}; font-size: ${Size.Small}; `; From 809e4373ccec2430450a1c38e63cca7e3b4fc48c Mon Sep 17 00:00:00 2001 From: Lucas Teixeira Date: Tue, 17 Nov 2020 18:55:32 -0300 Subject: [PATCH 3/4] WJ-125 - New: Random backdrops; WJ-125 - Update: Refactoring images types; --- .../Favorites/api/List/types/Response.ts | 4 +- src/domains/Movie/api/Details/index.ts | 81 ++++++++++++------- .../Movie/api/Details/types/RawResponse.ts | 6 ++ .../Movie/api/Details/types/Response.ts | 2 + src/domains/Person/api/Details/index.ts | 19 +++-- .../Person/api/Details/types/RawResponse.ts | 10 +-- .../Person/api/Details/types/Response.ts | 10 +-- src/domains/Tv/api/Details/index.ts | 77 +++++++++++------- .../Tv/api/Details/types/RawResponse.ts | 7 +- src/domains/Tv/api/Details/types/Response.ts | 2 + src/pages/Person/index.tsx | 2 +- src/pages/Tv/index.tsx | 2 +- src/shared/helpers/Entity/getBackdrop.ts | 2 +- src/shared/helpers/index.ts | 1 + src/shared/helpers/randomInteger.ts | 5 ++ src/shared/types/Image/RawImage.ts | 8 ++ src/shared/types/Image/index.ts | 8 ++ src/shared/types/Images.ts | 7 ++ 18 files changed, 168 insertions(+), 85 deletions(-) create mode 100644 src/shared/helpers/randomInteger.ts create mode 100644 src/shared/types/Image/RawImage.ts create mode 100644 src/shared/types/Image/index.ts create mode 100644 src/shared/types/Images.ts diff --git a/src/domains/Favorites/api/List/types/Response.ts b/src/domains/Favorites/api/List/types/Response.ts index 4e28d91..5031644 100644 --- 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, - Omit { + Omit, + Omit { favoriteId: string; userId: string; entityId: number; diff --git a/src/domains/Movie/api/Details/index.ts b/src/domains/Movie/api/Details/index.ts index 95912be..36c26f5 100644 --- 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 => { 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 index 5e35edd..3f30fd2 100644 --- 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 index 686dc32..1dd7883 100644 --- 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 index 8b0c597..fcbcc09 100644 --- 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 index c9896cc..fb5b731 100644 --- 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 index 591d3bc..f12a9de 100644 --- 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; diff --git a/src/domains/Tv/api/Details/index.ts b/src/domains/Tv/api/Details/index.ts index 86a1f78..082d0fc 100644 --- a/src/domains/Tv/api/Details/index.ts +++ b/src/domains/Tv/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/Tv/api/Credits/types/Response'; import Crew from 'domains/Tv/api/Credits/types/Crew'; import Cast from 'domains/Tv/api/Credits/types/Cast'; +import Image from 'shared/types/Image'; const Details = async (tvId: number, params?: Params): Promise => { const response = await rawPopular(tvId, params); @@ -41,31 +42,6 @@ export const rawPopular = async ( }; const parseResponse = (tv: RawResponse): Response => { - let parsedMovie = { - overview: tv.overview, - genres: tv.genres, - genresNames: arrayToString(tv.genres, 'name'), - id: tv.id, - originalTitle: tv.original_name, - popularity: tv.popularity, - voteCount: tv.vote_count, - voteAverage: tv.vote_average, - tagline: tv.tagline, - runtime: `${tv.episode_run_time} min`, - - creatorName: tv.created_by[0]?.name, - - releaseDate: getReleaseDate(tv), - backdrop: getBackdrop(tv), - - featuredImage: getFeaturedImage(tv), - releaseYear: getReleaseYear(tv), - subtitle: getReleaseDate(tv), - title: getTitle(tv), - favorite: false, - mediaType: EntityType.TV, - } as Response; - const recommendations = tv.recommendations?.results.map(recommendation => ({ backdrop: getBackdrop(recommendation), id: recommendation.id, @@ -78,6 +54,26 @@ const parseResponse = (tv: RawResponse): Response => { mediaType: EntityType.TV, })) as Recommendations[]; + const posters = tv.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 = tv.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 cast = tv.credits?.cast.slice(0, 15).map(person => ({ order: person.order, id: person.id, @@ -113,7 +109,34 @@ const parseResponse = (tv: RawResponse): Response => { const credits = { cast, crew } as Credits; - parsedMovie = { ...parsedMovie, recommendations, credits }; + let parsedMovie = { + overview: tv.overview, + genres: tv.genres, + genresNames: arrayToString(tv.genres, 'name'), + id: tv.id, + originalTitle: tv.original_name, + popularity: tv.popularity, + voteCount: tv.vote_count, + voteAverage: tv.vote_average, + tagline: tv.tagline, + runtime: `${tv.episode_run_time} min`, + + creatorName: tv.created_by[0]?.name, + + releaseDate: getReleaseDate(tv), + backdrop: + backdrops[randomInteger(0, backdrops.length - 1)]?.featuredImage || + getBackdrop(tv), + + featuredImage: getFeaturedImage(tv), + releaseYear: getReleaseYear(tv), + subtitle: getReleaseDate(tv), + title: getTitle(tv), + favorite: false, + mediaType: EntityType.TV, + } as Response; + + parsedMovie = { ...parsedMovie, recommendations, credits, images }; return parsedMovie; }; diff --git a/src/domains/Tv/api/Details/types/RawResponse.ts b/src/domains/Tv/api/Details/types/RawResponse.ts index 69892cd..63f9275 100644 --- a/src/domains/Tv/api/Details/types/RawResponse.ts +++ b/src/domains/Tv/api/Details/types/RawResponse.ts @@ -1,5 +1,6 @@ import Recommendations from 'domains/Tv/api/Recommendations/types/RawResponse'; import Credits from 'domains/Tv/api/Credits/types/RawResponse'; +import RawImage from 'shared/types/Image/RawImage'; export default interface RawResponse { poster_path?: string; @@ -24,9 +25,13 @@ export default interface RawResponse { vote_average: number; created_by: any[]; + credits?: Credits; recommendations?: { results: Recommendations[]; }; - credits?: Credits; + images?: { + posters: RawImage[]; + backdrops: RawImage[]; + }; mediaType: string; } diff --git a/src/domains/Tv/api/Details/types/Response.ts b/src/domains/Tv/api/Details/types/Response.ts index 446f53e..e4218f0 100644 --- a/src/domains/Tv/api/Details/types/Response.ts +++ b/src/domains/Tv/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 { backdrop?: string; @@ -24,6 +25,7 @@ export default interface Response { creatorName: string; recommendations?: Recommendations[]; + images?: Images; credits?: Credits; directorName?: string; diff --git a/src/pages/Person/index.tsx b/src/pages/Person/index.tsx index 3a980f7..aea7c25 100644 --- a/src/pages/Person/index.tsx +++ b/src/pages/Person/index.tsx @@ -122,7 +122,7 @@ const Person: React.FC = () => { {person?.images && ( = () => {
- ${isLoading && backdrop} + {!isLoading && backdrop} diff --git a/src/shared/helpers/Entity/getBackdrop.ts b/src/shared/helpers/Entity/getBackdrop.ts index 835fcb1..4b8e82e 100644 --- a/src/shared/helpers/Entity/getBackdrop.ts +++ b/src/shared/helpers/Entity/getBackdrop.ts @@ -2,7 +2,7 @@ import { formatTmdbImage } from 'shared/helpers'; const getBackdrop = (value: any): string | null => { return formatTmdbImage({ - value: value.backdrop_path || value.profile_path, + value: value.backdrop_path || value.profile_path || value.file_path, }); }; diff --git a/src/shared/helpers/index.ts b/src/shared/helpers/index.ts index 68ead60..e7372ab 100644 --- a/src/shared/helpers/index.ts +++ b/src/shared/helpers/index.ts @@ -8,3 +8,4 @@ export { default as getColorByTheme } from './colors/getColorByTheme'; export { default as getEntityRoute } from './getEntityRoute'; export { default as getMediaTypeId } from './getMediaTypeId'; export { default as getValidationErrors } from './getValidationErrors'; +export { default as randomInteger } from './randomInteger'; diff --git a/src/shared/helpers/randomInteger.ts b/src/shared/helpers/randomInteger.ts new file mode 100644 index 0000000..34a9eaf --- /dev/null +++ b/src/shared/helpers/randomInteger.ts @@ -0,0 +1,5 @@ +const randomInteger = (min = 0, max = 0): number => { + return Math.floor(Math.random() * (max - min)) + min; +}; + +export default randomInteger; diff --git a/src/shared/types/Image/RawImage.ts b/src/shared/types/Image/RawImage.ts new file mode 100644 index 0000000..6dd3e0f --- /dev/null +++ b/src/shared/types/Image/RawImage.ts @@ -0,0 +1,8 @@ +export default interface RawImage { + aspect_ratio: number; + file_path: string; + height: number; + vote_average: number; + vote_count: number; + width: number; +} diff --git a/src/shared/types/Image/index.ts b/src/shared/types/Image/index.ts new file mode 100644 index 0000000..7bd10c5 --- /dev/null +++ b/src/shared/types/Image/index.ts @@ -0,0 +1,8 @@ +export default interface Image { + aspectRatio: number; + height: number; + voteAverage: number; + voteCount: number; + width: number; + featuredImage: string; +} diff --git a/src/shared/types/Images.ts b/src/shared/types/Images.ts new file mode 100644 index 0000000..c60fc3b --- /dev/null +++ b/src/shared/types/Images.ts @@ -0,0 +1,7 @@ +import Image from 'shared/types/Image'; + +export default interface Images { + profiles?: Image[]; + posters?: Image[]; + backdrops?: Image[]; +} From 13d70f60cec2d28532e27b5c82de3c8541bbfcc8 Mon Sep 17 00:00:00 2001 From: Lucas Teixeira Date: Tue, 17 Nov 2020 20:29:21 -0300 Subject: [PATCH 4/4] WJ-125 - Update: Tv info; --- src/domains/Tv/api/Details/index.ts | 12 ++++++++++++ src/domains/Tv/api/Details/types/RawResponse.ts | 2 ++ src/domains/Tv/api/Details/types/Response.ts | 5 +++++ src/pages/Tv/index.tsx | 3 ++- 4 files changed, 21 insertions(+), 1 deletion(-) diff --git a/src/domains/Tv/api/Details/index.ts b/src/domains/Tv/api/Details/index.ts index 082d0fc..431b5c5 100644 --- a/src/domains/Tv/api/Details/index.ts +++ b/src/domains/Tv/api/Details/index.ts @@ -121,6 +121,18 @@ const parseResponse = (tv: RawResponse): Response => { tagline: tv.tagline, runtime: `${tv.episode_run_time} min`, + seasonsCount: tv.number_of_seasons, + seasonsDescription: + tv.number_of_seasons > 1 + ? `${tv.number_of_seasons} temporadas` + : `${tv.number_of_seasons} temporada`, + + episodesCount: tv.number_of_episodes, + episodesDescription: + tv.number_of_episodes > 1 + ? `${tv.number_of_episodes} episódios` + : `${tv.number_of_episodes} episódio`, + creatorName: tv.created_by[0]?.name, releaseDate: getReleaseDate(tv), diff --git a/src/domains/Tv/api/Details/types/RawResponse.ts b/src/domains/Tv/api/Details/types/RawResponse.ts index 63f9275..0592344 100644 --- a/src/domains/Tv/api/Details/types/RawResponse.ts +++ b/src/domains/Tv/api/Details/types/RawResponse.ts @@ -24,6 +24,8 @@ export default interface RawResponse { vote_count: number; vote_average: number; created_by: any[]; + number_of_seasons: number; + number_of_episodes: number; credits?: Credits; recommendations?: { diff --git a/src/domains/Tv/api/Details/types/Response.ts b/src/domains/Tv/api/Details/types/Response.ts index e4218f0..5096cad 100644 --- a/src/domains/Tv/api/Details/types/Response.ts +++ b/src/domains/Tv/api/Details/types/Response.ts @@ -24,6 +24,11 @@ export default interface Response { voteAverage: number; creatorName: string; + seasonsCount: number; + seasonsDescription: string; + episodesCount: number; + episodesDescription: string; + recommendations?: Recommendations[]; images?: Images; credits?: Credits; diff --git a/src/pages/Tv/index.tsx b/src/pages/Tv/index.tsx index 60e984c..81400e5 100644 --- a/src/pages/Tv/index.tsx +++ b/src/pages/Tv/index.tsx @@ -102,7 +102,8 @@ const Tv: React.FC = () => { {tv.title} - {tv.releaseDate} | {tv.genresNames} | {tv.runtime} + {tv.releaseDate} | {tv.genresNames} |{' '} + {tv.seasonsDescription} | {tv.runtime} {tv.tagline && {`"${tv.tagline}"`}}