From aff5606eb4e188ad04d246ae1f056b758258e8f0 Mon Sep 17 00:00:00 2001 From: Lucas Teixeira Date: Fri, 13 Nov 2020 22:34:17 -0300 Subject: [PATCH] WJ-21 - Update: TV details; WJ-21 - Update: Details API images and backdrops; --- src/components/Modal/index.tsx | 9 +++++++-- src/domains/Movie/api/Details/index.ts | 5 ++++- src/domains/Movie/api/Details/types/Params.ts | 1 + src/domains/Tv/api/Details/index.ts | 10 ++++++---- src/domains/Tv/api/Details/types/Params.ts | 1 + src/domains/Tv/api/Details/types/RawResponse.ts | 3 +++ src/domains/Tv/api/Details/types/Response.ts | 2 ++ src/pages/Tv/index.tsx | 14 ++++++++------ src/pages/Tv/styles.ts | 4 ++-- 9 files changed, 34 insertions(+), 15 deletions(-) diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx index 93415c1..39df8ba 100644 --- a/src/components/Modal/index.tsx +++ b/src/components/Modal/index.tsx @@ -1,7 +1,7 @@ -import React, { useCallback } from 'react'; +import React, { useCallback, useEffect } from 'react'; +import { useLocation } from 'react-router-dom'; import { useModal } from 'components/Modal/hooks'; -import ModalProps from 'components/Modal/types/ModalProps'; import StyleProps from 'components/Modal/types/StyleProps'; import { GrClose as CloseIcon } from 'react-icons/gr'; import Button from 'components/Button'; @@ -28,6 +28,7 @@ const Modal: React.FC = ({ shadow, }) => { const { modalContent, dismissModal } = useModal(); + const location = useLocation(); const handleDismiss = useCallback(() => { if (onClose) { @@ -38,6 +39,10 @@ const Modal: React.FC = ({ dismissModal(); }, [dismissModal, onClose]); + useEffect(() => { + handleDismiss(); + }, [location]); // eslint-disable-line + if (!modalContent && !children && !show) { return null; } diff --git a/src/domains/Movie/api/Details/index.ts b/src/domains/Movie/api/Details/index.ts index e185c1b..95912be 100644 --- a/src/domains/Movie/api/Details/index.ts +++ b/src/domains/Movie/api/Details/index.ts @@ -31,7 +31,10 @@ export const rawPopular = async ( params?: Params, ): Promise => { const response = await tmdb.get(`/movie/${movieId}`, { - params: { append_to_response: params?.appendToResponse }, + params: { + append_to_response: params?.appendToResponse, + include_image_language: params?.includeImageLanguage || 'pt,en,null', + }, }); return response.data; diff --git a/src/domains/Movie/api/Details/types/Params.ts b/src/domains/Movie/api/Details/types/Params.ts index e1d07a0..105454f 100644 --- a/src/domains/Movie/api/Details/types/Params.ts +++ b/src/domains/Movie/api/Details/types/Params.ts @@ -1,3 +1,4 @@ export default interface Params { appendToResponse?: string; + includeImageLanguage?: string; } diff --git a/src/domains/Tv/api/Details/index.ts b/src/domains/Tv/api/Details/index.ts index b6dd10c..86a1f78 100644 --- a/src/domains/Tv/api/Details/index.ts +++ b/src/domains/Tv/api/Details/index.ts @@ -31,7 +31,10 @@ export const rawPopular = async ( params?: Params, ): Promise => { const response = await tmdb.get(`/tv/${tvId}`, { - params: { append_to_response: params?.appendToResponse }, + params: { + append_to_response: params?.appendToResponse, + include_image_language: params?.includeImageLanguage || 'pt,en,null', + }, }); return response.data; @@ -47,11 +50,10 @@ const parseResponse = (tv: RawResponse): Response => { popularity: tv.popularity, voteCount: tv.vote_count, voteAverage: tv.vote_average, + tagline: tv.tagline, runtime: `${tv.episode_run_time} min`, - directorName: tv.credits?.crew.find( - person => person.job.toUpperCase() === 'DIRECTOR', - )?.name, + creatorName: tv.created_by[0]?.name, releaseDate: getReleaseDate(tv), backdrop: getBackdrop(tv), diff --git a/src/domains/Tv/api/Details/types/Params.ts b/src/domains/Tv/api/Details/types/Params.ts index e1d07a0..105454f 100644 --- a/src/domains/Tv/api/Details/types/Params.ts +++ b/src/domains/Tv/api/Details/types/Params.ts @@ -1,3 +1,4 @@ export default interface Params { appendToResponse?: string; + includeImageLanguage?: string; } diff --git a/src/domains/Tv/api/Details/types/RawResponse.ts b/src/domains/Tv/api/Details/types/RawResponse.ts index 98ec1a9..69892cd 100644 --- a/src/domains/Tv/api/Details/types/RawResponse.ts +++ b/src/domains/Tv/api/Details/types/RawResponse.ts @@ -18,9 +18,12 @@ export default interface RawResponse { name: string; backdrop_path?: string; popularity: number; + tagline: string; episode_run_time: number; vote_count: number; vote_average: number; + created_by: any[]; + recommendations?: { results: Recommendations[]; }; diff --git a/src/domains/Tv/api/Details/types/Response.ts b/src/domains/Tv/api/Details/types/Response.ts index c4d61ed..446f53e 100644 --- a/src/domains/Tv/api/Details/types/Response.ts +++ b/src/domains/Tv/api/Details/types/Response.ts @@ -17,9 +17,11 @@ export default interface Response { id: number; originalTitle: string; popularity: number; + tagline: string; runtime: string; voteCount: number; voteAverage: number; + creatorName: string; recommendations?: Recommendations[]; credits?: Credits; diff --git a/src/pages/Tv/index.tsx b/src/pages/Tv/index.tsx index e77cfca..59a3e9b 100644 --- a/src/pages/Tv/index.tsx +++ b/src/pages/Tv/index.tsx @@ -24,13 +24,14 @@ import { TitleContainer, Title, Subtitle, + Tagline, OverviewContainer, OverviewTitle, Overview, VoteAverage, VoteAverageTitle, - Director, - DirectorTitle, + Creator, + CreatorTitle, HeaderBackground, } from './styles'; @@ -104,6 +105,7 @@ const Tv: React.FC = () => { {tv.releaseDate} | {tv.genresNames} | {tv.runtime} + {tv.tagline && {`"${tv.tagline}"`}} Sinopse {tv.overview} @@ -112,10 +114,10 @@ const Tv: React.FC = () => { Votação do público:{' '} {tv.voteAverage} - - Diretor: - {tv.directorName} - + + Criador: + {tv.creatorName} + )} diff --git a/src/pages/Tv/styles.ts b/src/pages/Tv/styles.ts index 6bb29f9..9bc09e1 100644 --- a/src/pages/Tv/styles.ts +++ b/src/pages/Tv/styles.ts @@ -109,10 +109,10 @@ export const VoteAverageTitle = styled.span` font-weight: 500; `; -export const Director = styled.div` +export const Creator = styled.div` margin-bottom: ${Size.Smallest}; `; -export const DirectorTitle = styled.span` +export const CreatorTitle = styled.span` font-weight: 500; `;