From 814de74692c544165e5ff8905704feef78b2c9de Mon Sep 17 00:00:00 2001
From: Lucas Teixeira <lucas.teixeira@webjump.com.br>
Date: Fri, 13 Nov 2020 21:40:13 -0300
Subject: [PATCH] WJ-21 - New: showModal entityImage action;

---
 src/containers/EntityImage/index.tsx          | 23 ++++++++++++++++++-
 .../EntityImage/types/ContainerProps.ts       |  1 +
 src/containers/EntityImageList/index.tsx      |  2 ++
 src/domains/Person/api/Details/index.ts       | 11 ++++++++-
 .../Person/api/Details/types/RawResponse.ts   | 11 +++++++++
 .../Person/api/Details/types/Response.ts      |  9 ++++++++
 src/pages/Movie/styles.ts                     |  1 +
 src/pages/Person/index.tsx                    | 10 ++++++++
 src/pages/Tv/styles.ts                        |  1 +
 src/shared/helpers/Entity/getFeaturedImage.ts |  2 +-
 10 files changed, 68 insertions(+), 3 deletions(-)

diff --git a/src/containers/EntityImage/index.tsx b/src/containers/EntityImage/index.tsx
index bc14a64..585f470 100644
--- a/src/containers/EntityImage/index.tsx
+++ b/src/containers/EntityImage/index.tsx
@@ -32,6 +32,7 @@ const EntityImage: React.FC<Props> = ({
   hideSubtitle,
   showEmpty,
   isLoading,
+  showModal,
   ...entity
 }) => {
   const history = useHistory();
@@ -62,6 +63,26 @@ const EntityImage: React.FC<Props> = ({
     }
   }, [disabled, history, entity.id, entity.mediaType, successCloseModal]);
 
+  const handleShowModal = useCallback(() => {
+    setModalContent({
+      value: (
+        <MediaContainer>
+          <Media src={entity.featuredImage || ''} height={25.3} width={16.5} />
+        </MediaContainer>
+      ),
+      props: { hideCloseButton: true, center: true },
+    });
+  }, [entity.featuredImage, setModalContent]);
+
+  const handleClick = useCallback(() => {
+    if (showModal) {
+      handleShowModal();
+      return;
+    }
+
+    handleRedirect();
+  }, [showModal, handleShowModal, handleRedirect]);
+
   // Check if entity is in favorite list and change status
   useEffect(() => {
     if (user) {
@@ -101,7 +122,7 @@ const EntityImage: React.FC<Props> = ({
         size={size}
         showInfo={showInfo}
         disabled={disabled}
-        onClick={handleRedirect}
+        onClick={handleClick}
       >
         <FeaturedImage
           src={entity.featuredImage || entity.backdrop}
diff --git a/src/containers/EntityImage/types/ContainerProps.ts b/src/containers/EntityImage/types/ContainerProps.ts
index b9ad5b1..bdb44f4 100644
--- a/src/containers/EntityImage/types/ContainerProps.ts
+++ b/src/containers/EntityImage/types/ContainerProps.ts
@@ -8,4 +8,5 @@ export default interface ContainerProps extends DefaultProps {
   hideSubtitle?: boolean;
   disabled?: boolean;
   showEmpty?: boolean;
+  showModal?: boolean;
 }
diff --git a/src/containers/EntityImageList/index.tsx b/src/containers/EntityImageList/index.tsx
index 39cbb6c..5981aae 100644
--- a/src/containers/EntityImageList/index.tsx
+++ b/src/containers/EntityImageList/index.tsx
@@ -29,6 +29,7 @@ const EntityImageList: React.FC<Props> = ({
   disabled,
   showInfo,
   hideSubtitle,
+  showModal,
 }) => {
   const itemsContainer = createRef<HTMLDivElement>();
   const [showPreviousButton, setShowPreviousButton] = useState(false);
@@ -112,6 +113,7 @@ const EntityImageList: React.FC<Props> = ({
                     disabled={disabled}
                     showInfo={showInfo}
                     hideSubtitle={hideSubtitle}
+                    showModal={showModal}
                     {...entity}
                   />
                 ))}
diff --git a/src/domains/Person/api/Details/index.ts b/src/domains/Person/api/Details/index.ts
index 3127c77..8b0c597 100644
--- a/src/domains/Person/api/Details/index.ts
+++ b/src/domains/Person/api/Details/index.ts
@@ -97,7 +97,16 @@ const parseResponse = (person: RawResponse): Response => {
       Date.parse(a.originalDate) < Date.parse(b.originalDate) ? 1 : -1,
     );
 
-  parsedPerson = { ...parsedPerson, knownFor, filmography };
+  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,
+  }));
+
+  parsedPerson = { ...parsedPerson, knownFor, filmography, images };
 
   return parsedPerson;
 };
diff --git a/src/domains/Person/api/Details/types/RawResponse.ts b/src/domains/Person/api/Details/types/RawResponse.ts
index 493a171..c9896cc 100644
--- a/src/domains/Person/api/Details/types/RawResponse.ts
+++ b/src/domains/Person/api/Details/types/RawResponse.ts
@@ -20,5 +20,16 @@ export default interface RawResponse {
   imdb_id: string;
   homepage?: string;
 
+  images?: {
+    profiles: Array<{
+      aspect_ratio: number;
+      file_path: string;
+      height: number;
+      vote_average: number;
+      vote_count: number;
+      width: number;
+    }>;
+  };
+
   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 03b48fa..591d3bc 100644
--- a/src/domains/Person/api/Details/types/Response.ts
+++ b/src/domains/Person/api/Details/types/Response.ts
@@ -21,6 +21,15 @@ export default interface Response {
   knownFor?: Movie[];
   filmography?: Movie[];
 
+  images?: Array<{
+    aspectRatio: number;
+    featuredImage?: string;
+    height: number;
+    voteAverage: number;
+    voteCount: number;
+    width: number;
+  }>;
+
   favorite: boolean;
   mediaType: number;
   featuredImage?: string;
diff --git a/src/pages/Movie/styles.ts b/src/pages/Movie/styles.ts
index f50a423..5feffad 100644
--- a/src/pages/Movie/styles.ts
+++ b/src/pages/Movie/styles.ts
@@ -52,6 +52,7 @@ export const MovieDetailsContainer = styled.div`
   color: ${Color.Text};
   margin-top: ${Size.Large};
   width: 100%;
+  justify-content: space-between;
 
   @media (min-width: 715px) {
     height: 50rem;
diff --git a/src/pages/Person/index.tsx b/src/pages/Person/index.tsx
index 6eb257c..3a980f7 100644
--- a/src/pages/Person/index.tsx
+++ b/src/pages/Person/index.tsx
@@ -119,6 +119,16 @@ const Person: React.FC<any> = () => {
           message="Recomendações indisponíveis."
         />
 
+        {person?.images && (
+          <EntityImageList
+            title="Fotos"
+            data={person.images || []}
+            isLoading={isLoading}
+            hideFavoriteButton
+            showModal
+          />
+        )}
+
         <Filmography
           title="Filmografia"
           data={person.filmography || []}
diff --git a/src/pages/Tv/styles.ts b/src/pages/Tv/styles.ts
index 25830b5..6bb29f9 100644
--- a/src/pages/Tv/styles.ts
+++ b/src/pages/Tv/styles.ts
@@ -52,6 +52,7 @@ export const TvDetailsContainer = styled.div`
   color: ${Color.Text};
   margin-top: ${Size.Large};
   width: 100%;
+  justify-content: space-between;
 
   @media (min-width: 715px) {
     height: 50rem;
diff --git a/src/shared/helpers/Entity/getFeaturedImage.ts b/src/shared/helpers/Entity/getFeaturedImage.ts
index 6079360..e9b5321 100644
--- a/src/shared/helpers/Entity/getFeaturedImage.ts
+++ b/src/shared/helpers/Entity/getFeaturedImage.ts
@@ -2,7 +2,7 @@ import { formatTmdbImage } from 'shared/helpers';
 
 const getFeaturedImage = (value: any): string | null => {
   return formatTmdbImage({
-    value: value.poster_path || value.profile_path,
+    value: value.poster_path || value.profile_path || value.file_path,
   });
 };