WJ-21 - New: showModal entityImage action;

90lucasgabriel · Nov 14, 2020 · 814de74 · 814de74
1 parent b9c104f
commit 814de74
Show file tree

Hide file tree

Showing 10 changed files with 68 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,
   });
 };