Merge pull request #36 from Vizzuality/client/feature/ESA-9-fe-client…

…-feedback-changes

Update story

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"

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
   }
 ]

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

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 || '';