From df9c919614777b2589c001baa064a4ccd86803db Mon Sep 17 00:00:00 2001 From: mluena Date: Mon, 13 Nov 2023 10:48:23 +0100 Subject: [PATCH] back to monitor functionality --- CHANGELOG.md | 1 + e2e/geostories.spec.ts | 44 +++++++++++++++++++ src/app/map/geostories/[geostory_id]/page.tsx | 31 ++++++++++++- src/components/geostories/header/index.tsx | 6 ++- src/components/ui/skeleton.tsx | 2 +- 5 files changed, 79 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8a943fc1..30d555ae 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/e2e/geostories.spec.ts b/e2e/geostories.spec.ts index 7cc12a9f..55602850 100644 --- a/e2e/geostories.spec.ts +++ b/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' }); +}); diff --git a/src/app/map/geostories/[geostory_id]/page.tsx b/src/app/map/geostories/[geostory_id]/page.tsx index 799c7bb8..d4be4f2c 100644 --- a/src/app/map/geostories/[geostory_id]/page.tsx +++ b/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( + () => monitors?.find(({ geostories }) => geostories.map(({ id }) => id === geostory_id)), + [monitors, geostory_id] + ); + + const { title: monitorTitle, id: monitorId, color } = monitor || {}; return (
- - +
+ {monitorTitle && ( + + + Back to {monitorTitle}. + + )} + +
{isLoading && } diff --git a/src/components/geostories/header/index.tsx b/src/components/geostories/header/index.tsx index fae6d0a1..9f9b1169 100644 --- a/src/components/geostories/header/index.tsx +++ b/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 (
{isLoading && !isFetched && } {/* TODO - get color from API when we get categories */} -
GEOSTORY
+
+ GEOSTORY +
{isFetched && !isError && ( <>

{data.title}

diff --git a/src/components/ui/skeleton.tsx b/src/components/ui/skeleton.tsx index dc8318b6..135fcb2b 100644 --- a/src/components/ui/skeleton.tsx +++ b/src/components/ui/skeleton.tsx @@ -1,7 +1,7 @@ import { cn } from 'lib/classnames'; function Skeleton({ className, ...props }: React.HTMLAttributes) { - return
; + return
; } export { Skeleton };