back to monitor functionality

CHANGELOG.md

@@ -28,6 +28,7 @@ Unreleased
 - 404 - error management [OEMC-81](https://vizzuality.atlassian.net/browse/OEMC-81?atlOrigin=eyJpIjoiNWZkNTYwMjVkZGVjNDAwZGE2YWI3ZDgwMzgzOTRjMjEiLCJwIjoiaiJ9)
 - Sorting items in landing page [OEMC-24](https://vizzuality.atlassian.net/browse/OEMC-24?atlOrigin=eyJpIjoiZTlmNGE1Njk3MTRlNDNjMmExY2I3YmE1ZjUzMTBkYjIiLCJwIjoiaiJ9)
 - Alpha version tag added to site [OEMC-127](https://vizzuality.atlassian.net/browse/OEMC-127?atlOrigin=eyJpIjoiYzBiNGI0NDcwOGUzNGYzMzgzM2I1NWVhMWE0NjFkZjciLCJwIjoiaiJ9)
+- Functionality for returning from a geostory to its associated monitor [OEMC-121](https://vizzuality.atlassian.net/browse/OEMC-121?atlOrigin=eyJpIjoiNWY1OTkwZDNlMWNiNDA4M2JiOWM0NDNiODlkMDBlNmUiLCJwIjoiaiJ9)
 
 ### Changed
 

e2e/geostories.spec.ts

@@ -119,3 +119,47 @@ test.describe('geostories tab', () => {
     expect(datasetsListCount).toBe(layersData.length);
   });
 });
+
+test('From a selected geostory, user should be able to go back to the monitor it belongs', async ({
+  page,
+}) => {
+  const monitorsResponse = await page.waitForResponse('https://api.earthmonitor.org/monitors');
+  const monitorsData = (await monitorsResponse.json()) as Monitor[];
+  await page.getByTestId(`monitor-item-${monitorsData[0].id}`).click();
+  const monitorsIds = monitorsData.map((data) => data.id);
+
+  // click on the first monitor
+  await page.getByTestId(`monitor-item-${monitorsIds[0]}`).click();
+
+  // move to geostories tab
+  const geostoriesTabLink = page.getByTestId('tab-geostories');
+  await geostoriesTabLink.click();
+
+  // check geostory tab is active and url updated
+  await page.waitForURL(`**/map/${monitorsIds[0]}/geostories`, { waitUntil: 'load' });
+
+  // check geostories list is visible
+  const geostoriesResponse = await page.waitForResponse(
+    `https://api.earthmonitor.org/monitors/${monitorsData[0].id}/geostories`
+  );
+  const geostoriesData = (await geostoriesResponse.json()) as Geostory[];
+  await expect(page.getByTestId('geostories-list')).toBeVisible();
+
+  // check first geostory is visible has title, and a link to the geostory page (geostory datasets)
+  const firstGeostoryId = geostoriesData[0].id;
+
+  const firstDataset = page.getByTestId(`geostory-item-${firstGeostoryId}`);
+  await expect(firstDataset).toBeVisible();
+
+  const firstGeostoryLink = page.getByTestId(`geostory-link-${firstGeostoryId}`);
+  await expect(firstGeostoryLink).toBeVisible();
+  await firstGeostoryLink.click();
+
+  await page.waitForURL(`**/map/geostories/${firstGeostoryId}`, { waitUntil: 'load' });
+  await expect(page.getByTestId('monitor-title-back-btn')).toBeVisible();
+  await expect(page.getByTestId('back-to-monitor')).toBeVisible();
+  const text = `Back to ${monitorsData[0].title}.`;
+  await expect(page.getByTestId('back-to-monitor')).toHaveText(text);
+  await page.getByTestId('monitor-title-back-btn').click();
+  await page.waitForURL(`**/map/${monitorsIds[0]}/geostories`, { waitUntil: 'load' });
+});

src/app/map/geostories/[geostory_id]/page.tsx

@@ -1,8 +1,16 @@
 'use client';
 
+import { useMemo } from 'react';
+
+import Link from 'next/link';
+
 import type { NextPage } from 'next';
+import { HiArrowLeft } from 'react-icons/hi';
+
+import type { MonitorParsed } from '@/types/monitors';
 
 import { useGeostoryLayers } from '@/hooks/geostories';
+import { useMonitors } from '@/hooks/monitors';
 
 import DatasetCard from '@/components/datasets/card';
 import GeostoryHead from '@/components/geostories/header';
@@ -12,11 +20,30 @@ const GeostoryPage: NextPage<{ params: { geostory_id: string } }> = ({
   params: { geostory_id },
 }) => {
   const { data, isLoading, isFetched, isError } = useGeostoryLayers({ geostory_id });
+  const { data: monitors } = useMonitors();
+  const monitor = useMemo<MonitorParsed>(
+    () => monitors?.find(({ geostories }) => geostories.map(({ id }) => id === geostory_id)),
+    [monitors, geostory_id]
+  );
+
+  const { title: monitorTitle, id: monitorId, color } = monitor || {};
 
   return (
     <div className="space-y-6">
-      <GeostoryHead geostoryId={geostory_id} />
-
+      <div className="divide-y divide-secondary-900">
+        {monitorTitle && (
+          <Link
+            href={`/map/${monitorId}/geostories`}
+            className="block space-x-3 pb-8 font-bold"
+            data-testid="back-to-monitor"
+            style={{ color }}
+          >
+            <HiArrowLeft className="inline-block h-6 w-6" />
+            <span data-testid="monitor-title-back-btn">Back to {monitorTitle}.</span>
+          </Link>
+        )}
+        <GeostoryHead geostoryId={geostory_id} color={color} />
+      </div>
       <div>
         {isLoading && <Loading />}
 

src/components/geostories/header/index.tsx

@@ -6,14 +6,16 @@ import { useGeostory } from '@/hooks/geostories';
 
 import Loading from '@/components/loading';
 
-const GeostoryHead: FC<{ geostoryId: Geostory['id'] }> = ({ geostoryId }) => {
+const GeostoryHead: FC<{ geostoryId: Geostory['id']; color: string }> = ({ geostoryId, color }) => {
   const { data, isLoading, isFetched, isError } = useGeostory({ geostory_id: geostoryId });
 
   return (
     <div className="space-y-6 px-6 py-5">
       {isLoading && !isFetched && <Loading />}
       {/* TODO - get color from API when we get categories */}
-      <div className="text-xs">GEOSTORY</div>
+      <div className="text-xs" style={{ color }}>
+        GEOSTORY
+      </div>
       {isFetched && !isError && (
         <>
           <h1 className="font-satoshi text-4xl font-bold">{data.title}</h1>

src/components/ui/skeleton.tsx

@@ -1,7 +1,7 @@
 import { cn } from 'lib/classnames';
 
 function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return <div className={cn('animate-pulse rounded-md bg-primary/10', className)} {...props} />;
+  return <div className={cn('animate-pulse rounded-md bg-secondary-900', className)} {...props} />;
 }
 
 export { Skeleton };