WJ-21 - Update: TV details;

WJ-21 - Update: Details API images and backdrops;
90lucasgabriel · Nov 14, 2020 · aff5606 · aff5606
1 parent 814de74
commit aff5606
Show file tree

Hide file tree

Showing 9 changed files with 34 additions and 15 deletions.
diff --git 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<StyleProps> = ({
   shadow,
 }) => {
   const { modalContent, dismissModal } = useModal();
+  const location = useLocation();
 
   const handleDismiss = useCallback(() => {
     if (onClose) {
@@ -38,6 +39,10 @@ const Modal: React.FC<StyleProps> = ({
     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
@@ -31,7 +31,10 @@ export const rawPopular = async (
   params?: Params,
 ): Promise<RawResponse> => {
   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
@@ -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
@@ -31,7 +31,10 @@ export const rawPopular = async (
   params?: Params,
 ): Promise<RawResponse> => {
   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
@@ -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
@@ -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
@@ -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
@@ -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<any> = () => {
                     {tv.releaseDate} | {tv.genresNames} | {tv.runtime}
                   </Subtitle>
                 </TitleContainer>
+                {tv.tagline && <Tagline>{`"${tv.tagline}"`}</Tagline>}
                 <OverviewContainer>
                   <OverviewTitle>Sinopse</OverviewTitle>
                   <Overview>{tv.overview}</Overview>
@@ -112,10 +114,10 @@ const Tv: React.FC<any> = () => {
                   <VoteAverageTitle>Votação do público:</VoteAverageTitle>{' '}
                   {tv.voteAverage}
                 </VoteAverage>
-                <Director>
-                  <DirectorTitle>Diretor: </DirectorTitle>
-                  {tv.directorName}
-                </Director>
+                <Creator>
+                  <CreatorTitle>Criador: </CreatorTitle>
+                  {tv.creatorName}
+                </Creator>
               </TvDetailsContainer>
             )}
           </TvContainer>

diff --git 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;
 `;