Merge branch 'develop' into cms/preview

client/src/components/map/layers/animated-tile-layer/index.tsx

@@ -26,7 +26,7 @@ const AnimatedTileLayer = <T,>({ id = '', c }: DeckLayerProps<T>) => {
 
   const { minZoom, maxZoom, data } = c;
 
-  const { frames = 0, interval = 1000, start, end, autoplay = false, delay = 3000 } = c.timeline;
+  const { interval = 1000, start, end, autoplay = false, delay = 3000 } = c.timeline;
 
   const createLayer = useCallback(
     (data: { visible: boolean; url: string; opacity: number }, id: string, beforeId: string) => {
@@ -43,7 +43,6 @@ const AnimatedTileLayer = <T,>({ id = '', c }: DeckLayerProps<T>) => {
             index: { x, y, z },
             signal,
           } = tile;
-
           const tileUrl = url.replace('{z}', z).replace('{x}', x).replace('{y}', y);
 
           const response = fetch(tileUrl, { signal });
@@ -57,7 +56,7 @@ const AnimatedTileLayer = <T,>({ id = '', c }: DeckLayerProps<T>) => {
             .then((buffer) => {
               const apng = parseAPNG(buffer);
               if (apng instanceof Error) {
-                throw apng;
+                return null;
               }
               return apng.frames.map((f: any) => {
                 return {
@@ -75,6 +74,7 @@ const AnimatedTileLayer = <T,>({ id = '', c }: DeckLayerProps<T>) => {
           if (!sl) return null;
 
           const { id: subLayerId, data, tile, visible, opacity = 1, frame: f } = sl;
+
           if (!tile || !data) return null;
 
           const {
@@ -124,19 +124,19 @@ const AnimatedTileLayer = <T,>({ id = '', c }: DeckLayerProps<T>) => {
     if (isPlaying) {
       return;
     }
-    const lastFrame = frames;
+    const lastFrame = end - start;
     let newFrame = frame === lastFrame ? 0 : frame + 1;
     setFrame(newFrame);
     intervalRef.current = setInterval(() => {
-      if (newFrame + 1 === lastFrame + 1) {
+      if (newFrame === lastFrame) {
         clearInterval(intervalRef.current);
         setIsPlaying(false);
       } else {
         setFrame(newFrame + 1);
         newFrame++;
       }
     }, interval);
-  }, [frame, frames, interval, isPlaying]);
+  }, [end, frame, interval, isPlaying, start]);
 
   const handleChangeFrame = (_frame: number) => {
     setIsPlaying(false);
@@ -184,7 +184,7 @@ const AnimatedTileLayer = <T,>({ id = '', c }: DeckLayerProps<T>) => {
           timeline={{
             start: start,
             end: end,
-            current: frame,
+            currentFrame: frame,
           }}
           onChangeCurrent={handleChangeFrame}
           onPlay={handlePlay}

client/src/components/map/layers/marker/index.tsx

@@ -14,9 +14,9 @@ type MarkerProps = RMarkerProps & {
 };
 
 const Marker = (props: MarkerProps) => {
-  const { properties, onClick } = props;
+  const { properties, onClick, ...rest } = props;
   return (
-    <RMarker {...props}>
+    <RMarker {...properties} {...rest}>
       <Tooltip open delayDuration={0}>
         <TooltipTrigger asChild>
           <div
@@ -27,12 +27,12 @@ const Marker = (props: MarkerProps) => {
           >
             <div
               className={cn({
-                'absolute left-1/2 top-1/2 flex h-3 w-3 -translate-x-1/2 -translate-y-1/2 rotate-45 items-center justify-center border border-[#FFE094] transition-all':
+                'absolute left-1/2 top-1/2 flex h-3 w-3 -translate-x-1/2 -translate-y-1/2 rotate-45 items-center justify-center border-[1.5px] border-[#FFE094] transition-all':
                   true,
-                'scale-[2] bg-[#FFE094]': true,
+                'bg-background scale-[1.25] border-gray-200': true,
               })}
             >
-              <div className="h-1.5 w-1.5 bg-[#FFE094]"></div>
+              <div className="h-[5px] w-[5px] bg-gray-200"></div>
             </div>
           </div>
         </TooltipTrigger>
@@ -55,6 +55,7 @@ const Marker = (props: MarkerProps) => {
               variant="secondary"
               className="h-8 w-full rounded-3xl bg-teal-500 py-2 text-xs text-white hover:bg-teal-500/50"
               onClick={onClick}
+              disabled={!properties?.active}
             >
               Discover story
             </Button>

client/src/components/map/legend/item-types/timeline/index.tsx

@@ -11,7 +11,7 @@ type LegendTypeTimelineProps = {
   timeline: {
     start: number;
     end: number;
-    current: number;
+    currentFrame: number;
   };
   onChangeCurrent: (year: number) => void;
   onPlay: () => void;
@@ -40,7 +40,7 @@ export const LegendTypeTimeline: React.FC<LegendTypeTimelineProps> = ({
   );
 
   const lastYear = years[years.length - 1];
-  const value = years[timeline?.current];
+  const value = years[timeline?.currentFrame];
 
   const yearScale = useCallback(
     (year: number) =>
@@ -69,10 +69,10 @@ export const LegendTypeTimeline: React.FC<LegendTypeTimelineProps> = ({
       </Button>
 
       <Root
-        max={22}
+        max={timeline.end - timeline.start}
         min={0}
         step={1}
-        value={[timeline.current]}
+        value={[timeline.currentFrame]}
         onValueChange={([v]) => onChangeCurrent(v)}
         className={cn('relative flex w-full touch-none select-none items-center', className)}
       >

client/src/containers/home/index.tsx

@@ -2,8 +2,6 @@
 
 import { useEffect } from 'react';
 
-import Link from 'next/link';
-
 import { useResetRecoilState, useSetRecoilState } from 'recoil';
 
 import { layersAtom, tmpBboxAtom } from '@/store';
@@ -15,13 +13,13 @@ import { DEFAULT_MAP_BBOX, DEFAULT_MAP_STATE } from '@/constants/map';
 import Sidebar from '@/containers/home/sidebar';
 
 import Card from '@/components/ui/card';
-// import GradientLine from '@/components/ui/gradient-line';
+import GradientLine from '@/components/ui/gradient-line';
 
 import Categories from './categories';
 import Dashboard from './dashboard';
 import { Filters } from './filters';
 import Header from './header';
-// import TopStories from './top-stories';
+import TopStories from './top-stories';
 
 export default function Home() {
   const setTmpBbox = useSetRecoilState(tmpBboxAtom);
@@ -44,19 +42,24 @@ export default function Home() {
       <Filters />
       <div className="mt-12 flex flex-1 justify-between">
         <Sidebar>
-          <div className="2xl:w-70 w-64">
+          <div className="2xl:w-70 w-[280px]">
             <Dashboard />
           </div>
         </Sidebar>
         <Sidebar>
-          <div className="2xl:w-70 w-64">
+          <div className="2xl:w-70 w-[280px]">
             <Card title="Impact indicator">
-              <Link href="#">View links</Link>
+              <a
+                target="_blank"
+                href="https://lookerstudio.google.com/reporting/b6d8f54c-558e-48dc-bc79-a7eca193da6f/page/p_2ehvdzg47c"
+              >
+                View links
+              </a>
             </Card>
-            {/* <GradientLine />
-            <Card title="Top stories (6)">
+            <GradientLine />
+            <Card title="Top stories (5)">
               <TopStories />
-            </Card> */}
+            </Card>
           </div>
         </Sidebar>
       </div>

client/src/containers/home/top-stories/index.tsx

@@ -1,53 +1,9 @@
 import TopStoriesItem from './item';
-
-const topStories = [
-  {
-    id: '1',
-    title: 'From Coastlines to Space: EO Satellites for Advanced Risk Assessment ',
-    place: 'Warri',
-    country: 'Nigeria',
-    image: '/images/story-card-image.png',
-  },
-  {
-    id: '2',
-    title: 'From Coastlines to Space: EO Satellites for Advanced Risk Assessment ',
-    place: 'Warri',
-    country: 'Nigeria',
-    image: '/images/story-card-image.png',
-  },
-  {
-    id: '3',
-    title: 'From Coastlines to Space: EO Satellites for¡ Advanced Risk Assessment ',
-    place: 'Warri',
-    country: 'Nigeria',
-    image: '/images/story-card-image.png',
-  },
-  {
-    id: '4',
-    title: 'From Coastlines to Space: EO Satellites for Advanced Risk Assessment ',
-    place: 'Warri',
-    country: 'Nigeria',
-    image: '/images/story-card-image.png',
-  },
-  {
-    id: '5',
-    title: 'From Coastlines to Space: EO Satellites for¡ Advanced Risk Assessment ',
-    place: 'Warri',
-    country: 'Nigeria',
-    image: '/images/story-card-image.png',
-  },
-  {
-    id: '6',
-    title: 'From Coastlines to Space: EO Satellites for Advanced Risk Assessment ',
-    place: 'Warri',
-    country: 'Nigeria',
-    image: '/images/story-card-image.png',
-  },
-];
+import topStories from './mockup.json';
 
 const TopStories = () => {
   return (
-    <div className="max-h-[250px] space-y-4 overflow-y-auto">
+    <div className="max-h-[35vh] space-y-4 overflow-y-auto">
       {topStories.map((story) => (
         <TopStoriesItem key={story.id} story={story} />
       ))}

client/src/containers/home/top-stories/item.tsx

@@ -1,31 +1,43 @@
 import Image from 'next/image';
+import { useRouter } from 'next/navigation';
+
+import { cn } from '@/lib/classnames';
 
 type TopStoriesItemProps = {
   story: {
     title: string;
-    place: string;
-    country: string;
+    region: string;
     id: string;
     image: string;
+    active: boolean;
   };
 };
 
 const TopStoriesItem = ({ story }: TopStoriesItemProps) => {
+  const { push } = useRouter();
+
+  const handleClickStory = () => {
+    if (story.active) {
+      push(`/stories/${story.id}`);
+    }
+  };
+
+  const src = story?.image;
+
   return (
-    <div className="flex gap-2">
-      <div className="shrink-0">
+    <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={`${process.env.NEXT_PUBLIC_BASE_PATH}/images/story-card-image.png`}
+          src={src}
           width={72}
           height={72}
+          className="h-full w-full object-cover object-center"
         />
       </div>
       <div className="space-y-1 text-gray-300">
         <h3 className="text-sm font-bold leading-4 text-gray-300">{story.title}</h3>
-        <p className="font-open-sans text-xs font-light italic">
-          {story.place}, {story.country}
-        </p>
+        <p className="font-open-sans text-xs font-light italic">{story.region}</p>
       </div>
     </div>
   );

client/src/containers/home/top-stories/mockup.json

@@ -0,0 +1,37 @@
+[
+  {
+    "id": "1",
+    "title": "Urban Sustainability: Updating the Revised Strategic Transport Plan for Dhaka, Bangladesh",
+    "region": "Dhaka, Bangladesh",
+    "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": "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": "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": "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": "https://esa-gda-comms-staging-cms.fra1.digitaloceanspaces.com/story_5_fb1456f0dd.png",
+    "active": false
+  }
+]

client/src/containers/map/markers/home-markers/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { useMemo } from 'react';
 
 import { Layer, Source } from 'react-map-gl';
@@ -43,6 +45,7 @@ const StoryMarkers = () => {
               status: 'completed',
               tags: ['nature'],
               title: attributes?.title,
+              active: attributes?.active,
             },
           };
         }) || [],

client/src/containers/map/markers/story-markers/marker.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { useState } from 'react';
 
 import { Marker } from 'react-map-gl';

client/src/containers/map/markers/story-markers/media.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import Image from 'next/image';

client/src/containers/story/steps/controller/controller-item.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { useCallback } from 'react';
 
 import { useRecoilValue } from 'recoil';

client/src/containers/story/steps/controller/scroll-item.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { PropsWithChildren, useRef } from 'react';
 
 import { useScroll } from 'framer-motion';