fixed default layer was not accesible navigating monitors

Open-Earth-Monitor · Apr 4, 2024 · 29cd7c5 · 29cd7c5
1 parent 012fe80
commit 29cd7c5
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Using monitors attribute instead of layers to show monitor details [OEMC-225](https://vizzuality.atlassian.net/browse/OEMC-225)
 
 ### Fixed
+- Fixed default layer was not showed in the map navigating monitors [OEMC-216](https://vizzuality.atlassian.net/browse/OEMC-216)
 - In homepage the geostories card are displaying the wrong monitor name [OEMC-221](https://vizzuality.atlassian.net/browse/OEMC-221)
 - Compare layer should show the correct title in the legend [OEMC-222](https://vizzuality.atlassian.net/browse/OEMC-222)
 - Do not show timeline or comparison when is not available in monitors [OEMC-223](https://vizzuality.atlassian.net/browse/OEMC-223)

diff --git a/e2e/datasets.spec.ts b/e2e/datasets.spec.ts
@@ -42,7 +42,7 @@ test('datasets item', async ({ page }) => {
   const firstMonitorWithLayers = monitorsData.find((monitor) => monitor.id === 'm2');
 
   await page.getByTestId(`monitor-item-${firstMonitorWithLayers.id}`).click();
-  await page.waitForURL('**/map/**/datasets', { waitUntil: 'load' });
+  await page.waitForURL('**/map/**/datasets*', { waitUntil: 'load' });
 
   const layersResponse = await page.waitForResponse(
     `https://api.earthmonitor.org/monitors/${firstMonitorWithLayers.id}/layers`

diff --git a/e2e/geostories.spec.ts b/e2e/geostories.spec.ts
@@ -19,6 +19,8 @@ test.describe('geostories tab', () => {
     // click on the first monitor
     await page.getByTestId(`monitor-item-${firstMonitorWithGeostories.id}`).click();
 
+    await page.waitForURL('**/map/**/datasets*', { waitUntil: 'load' });
+
     // move to geostories tab
     const geostoriesTabLink = page.getByTestId('tab-geostories');
 
@@ -68,7 +70,17 @@ test.describe('geostories tab', () => {
     // go to geostories tab
     await page.getByTestId(`monitor-item-${firstMonitorWithGeostories.id}`).click();
 
+    await page.waitForURL('**/map/**/datasets*', { waitUntil: 'load' });
+
+    const datasetLists = page.getByTestId('datasets-list');
+    await expect(datasetLists).toBeVisible();
+
     const geostoriesTabLink = page.getByTestId('tab-geostories');
+
+    await expect(geostoriesTabLink).toHaveAttribute(
+      'href',
+      `/map/${firstMonitorWithGeostories.id}/geostories`
+    );
     await geostoriesTabLink.click();
 
     await page.waitForURL(`**/map/${firstMonitorWithGeostories.id}/geostories`, {
@@ -145,6 +157,11 @@ test('From a selected geostory, user should be able to go back to the monitor it
   // click on the first monitor
   await page.getByTestId(`monitor-item-${firstMonitorWithGeostories.id}`).click();
 
+  await page.waitForURL('**/map/**/datasets*', { waitUntil: 'load' });
+
+  const datasetLists = page.getByTestId('datasets-list');
+  await expect(datasetLists).toBeVisible();
+
   // move to geostories tab
   const geostoriesTabLink = page.getByTestId('tab-geostories');
   await geostoriesTabLink.click();

diff --git a/src/hooks/sync-query.ts b/src/hooks/sync-query.ts
@@ -8,7 +8,11 @@ type LayerSettings = {
   date?: string;
 };
 
-export const useSyncLayersSettings = () => useQueryState('layers', parseAsJson<LayerSettings[]>());
+export const useSyncLayersSettings = () =>
+  useQueryState('layers', {
+    ...parseAsJson<LayerSettings[]>(),
+    shallow: false,
+  });
 export const useSyncCompareLayersSettings = () =>
   useQueryState('compareLayers', parseAsJson<LayerSettings[]>());
 export const useSyncCenterSettings = () => useQueryState('center', parseAsJson<Coordinate>());