From b66c18df288f1e62744b60456338551b10da55d1 Mon Sep 17 00:00:00 2001
From: Can Ural <can.ural@outlook.com>
Date: Fri, 10 Dec 2021 16:09:45 +0200
Subject: [PATCH] Fix news images, add placeholder, update snapshot

---
 src/components/top-stories/TopStories.jsx     | 56 ++++++++++---------
 .../__snapshots__/TopStories.test.js.snap     |  5 ++
 2 files changed, 35 insertions(+), 26 deletions(-)

diff --git a/src/components/top-stories/TopStories.jsx b/src/components/top-stories/TopStories.jsx
index 425dbcb..1b95e11 100644
--- a/src/components/top-stories/TopStories.jsx
+++ b/src/components/top-stories/TopStories.jsx
@@ -3,6 +3,7 @@ import moment from "moment";
 import { useSelector } from "utils/react-redux-hooks";
 
 import StoryTopic from "components/story-topic/StoryTopic";
+import placeholder from "assets/newsPlaceholder.png";
 
 import { Date } from "components/story-topic-headers/StoryTopicHeaders.styles";
 import { SeeAll } from "components/most-popular/MostPopular.styles";
@@ -16,38 +17,41 @@ import {
 } from "./TopStories.styles";
 
 const TopStories = () => {
-  const { story, width } = useSelector((state) => state.news);
+  const { story } = useSelector((state) => state.news);
 
   return (
     <div>
       <StoryTopic />
       <TopStoriesContainer>
-        {story.slice(0, 3).map((data) => (
-          <StoryContainer key={data.title}>
-            <img
-              src={
-                width < 1200 ? data.multimedia[0].url : data.multimedia[3].url
-              }
-              alt="story"
-            />
-            <TagContainer>
-              <h1>
-                <Tag>{data.section}</Tag>
-              </h1>
-              <Date margin="10px" width="30%">
-                {moment(data.created_date).format("MMM DD, YYYY")}
-              </Date>
-            </TagContainer>
+        {story.slice(0, 3).map((data) => {
+          const url = data?.multimedia?.[0]?.url;
 
-            <Title header={data.title.split(" ")}>{data.title}</Title>
-            <SubTitle>
-              {data.abstract.split(" ").slice(0, 20).join(" ")}...
-            </SubTitle>
-            <SeeAll href={data.url} target="_blank" rel="noopener">
-              Continue Reading
-            </SeeAll>
-          </StoryContainer>
-        ))}
+          return (
+            <StoryContainer key={data.title}>
+              <img
+                src={url ?? placeholder}
+                alt="story"
+                style={{ width: !url ? "400px" : "100%" }}
+              />
+              <TagContainer>
+                <h1>
+                  <Tag>{data.section}</Tag>
+                </h1>
+                <Date margin="10px" width="30%">
+                  {moment(data.created_date).format("MMM DD, YYYY")}
+                </Date>
+              </TagContainer>
+
+              <Title header={data.title.split(" ")}>{data.title}</Title>
+              <SubTitle>
+                {data.abstract.split(" ").slice(0, 20).join(" ")}...
+              </SubTitle>
+              <SeeAll href={data.url} target="_blank" rel="noopener">
+                Continue Reading
+              </SeeAll>
+            </StoryContainer>
+          );
+        })}
       </TopStoriesContainer>
     </div>
   );
diff --git a/src/tests/components/__snapshots__/TopStories.test.js.snap b/src/tests/components/__snapshots__/TopStories.test.js.snap
index fcd5cce..4261c84 100644
--- a/src/tests/components/__snapshots__/TopStories.test.js.snap
+++ b/src/tests/components/__snapshots__/TopStories.test.js.snap
@@ -264,6 +264,11 @@ exports[`Testing TopStories component Should match snapshot 1`] = `
             <img
               alt="story"
               src="https://static01.nyt.com/images/2020/12/19/us/covid-thanksgiving-effect-promo-1608423451574/covid-thanksgiving-effect-promo-1608423451574-thumbLarge.jpg"
+              style={
+                Object {
+                  "width": "100%",
+                }
+              }
             />
             <styled.div>
               <div