From b3592ea6544023782bd0d338acc9192202061265 Mon Sep 17 00:00:00 2001
From: barbara-chaves <barbarabarcellos90@gmail.com>
Date: Thu, 14 Dec 2023 17:32:43 +0100
Subject: [PATCH] Update story

---
 client/src/containers/home/top-stories/item.tsx    |  4 +++-
 client/src/containers/home/top-stories/mockup.json | 14 +++++---------
 .../containers/story/steps/layouts/outro-step.tsx  | 10 +++-------
 client/src/lib/image-src/index.ts                  |  6 ++++++
 4 files changed, 17 insertions(+), 17 deletions(-)
 create mode 100644 client/src/lib/image-src/index.ts

diff --git a/client/src/containers/home/top-stories/item.tsx b/client/src/containers/home/top-stories/item.tsx
index 12f51a4..c22cb9f 100644
--- a/client/src/containers/home/top-stories/item.tsx
+++ b/client/src/containers/home/top-stories/item.tsx
@@ -22,12 +22,14 @@ const TopStoriesItem = ({ story }: TopStoriesItemProps) => {
     }
   };
 
+  const src = story?.image;
+
   return (
     <div onClick={handleClickStory} className={cn('flex gap-2', story.active && 'cursor-pointer')}>
       <div className="h-[72px] w-[72px] shrink-0 overflow-hidden rounded-full">
         <Image
           alt={story.title}
-          src={story.image}
+          src={src}
           width={72}
           height={72}
           className="h-full w-full object-cover object-center"
diff --git a/client/src/containers/home/top-stories/mockup.json b/client/src/containers/home/top-stories/mockup.json
index 8921f39..f57e8f5 100644
--- a/client/src/containers/home/top-stories/mockup.json
+++ b/client/src/containers/home/top-stories/mockup.json
@@ -3,39 +3,35 @@
     "id": "1",
     "title": "Urban Sustainability: Updating the Revised Strategic Transport Plan for Dhaka, Bangladesh",
     "region": "Dhaka, Bangladesh",
-    "image": "/images/mock/top-stories/story-1.png",
+    "image": "https://esa-gda-comms-staging-cms.fra1.digitaloceanspaces.com/story_1_90a5fc0766.png",
     "active": true
   },
-
   {
     "id": "2",
     "title": "Urban Wetlands: EO-based tools to support wetland restoration in Rwanda",
     "region": "Kigali, Ruanda",
-    "image": "/images/mock/top-stories/story-2.jpeg",
+    "image": "https://esa-gda-comms-staging-cms.fra1.digitaloceanspaces.com/story_2_e62b45087c.png",
     "active": false
   },
-
   {
     "id": "3",
     "title": "Soil monitoring helps build climate resilience for Nigeria's farmers",
     "region": "Nigeria",
-    "image": "/images/mock/top-stories/story-3.jpeg",
+    "image": "https://esa-gda-comms-staging-cms.fra1.digitaloceanspaces.com/story_3_82beedeff6.png",
     "active": false
   },
-
   {
     "id": "4",
     "title": "Satellite Data and Sustainability-Linked Bonds: Monitoring Land Use in Peruvian Amazon",
     "region": "Peru",
-    "image": "/images/mock/top-stories/story-4.jpeg",
+    "image": "https://esa-gda-comms-staging-cms.fra1.digitaloceanspaces.com/story_4_322b71cf63.png",
     "active": false
   },
-
   {
     "id": "5",
     "title": "Changing Grey to Green in Sargodha, Pakistan - Using Satellite Earth Observation",
     "region": "Sargodha, Pakistan",
-    "image": "/images/mock/top-stories/story-5.png",
+    "image": "https://esa-gda-comms-staging-cms.fra1.digitaloceanspaces.com/story_5_fb1456f0dd.png",
     "active": false
   }
 ]
diff --git a/client/src/containers/story/steps/layouts/outro-step.tsx b/client/src/containers/story/steps/layouts/outro-step.tsx
index 1c16838..44ef64e 100644
--- a/client/src/containers/story/steps/layouts/outro-step.tsx
+++ b/client/src/containers/story/steps/layouts/outro-step.tsx
@@ -8,7 +8,7 @@ import { useRouter } from 'next/navigation';
 import { useScroll, motion, useTransform } from 'framer-motion';
 import { useSetRecoilState } from 'recoil';
 
-import env from '@/env.mjs';
+import { getImageSrc } from '@/lib/image-src';
 
 import { isFlyingBackAtom } from '@/store';
 
@@ -165,12 +165,8 @@ const OutroStepLayout = ({ step, showContent }: MediaStepLayoutProps) => {
                     <div className="flex gap-2">
                       {d.logos &&
                         d.logos?.data?.map((logo, index) => {
-                          const src =
-                            env.NEXT_PUBLIC_ENVIRONMENT === 'development'
-                              ? `${env.NEXT_PUBLIC_API_URL.replace('/api', '')}${
-                                  logo?.attributes?.url
-                                }`
-                              : logo?.attributes?.url || '';
+                          const src = getImageSrc(logo?.attributes?.url);
+
                           const url = links[i][index];
                           return url ? (
                             <a
diff --git a/client/src/lib/image-src/index.ts b/client/src/lib/image-src/index.ts
new file mode 100644
index 0000000..a33fdf9
--- /dev/null
+++ b/client/src/lib/image-src/index.ts
@@ -0,0 +1,6 @@
+import env from '@/env.mjs';
+
+export const getImageSrc = (url?: string) =>
+  env.NEXT_PUBLIC_ENVIRONMENT === 'development'
+    ? `${env.NEXT_PUBLIC_API_URL.replace('/api', '')}${url}`
+    : url || '';