From 80a292a4712dab668ebe1ea99fb6db264ef7ec65 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mar=C3=ADa?= <maluenarod@gmail.com>
Date: Tue, 7 May 2024 15:03:15 +0200
Subject: [PATCH] map bounds changed

---
 client/cypress/downloads/downloads.html  | Bin 4680 -> 0 bytes
 client/cypress/e2e/navigation.cy.ts      |  30 +++++++++++------------
 client/src/components/map/constants.ts   |   2 +-
 client/src/containers/countries/item.tsx |  24 ++++--------------
 client/src/containers/map/index.tsx      |  19 ++++++++------
 client/src/containers/projects/list.tsx  |  10 +++++---
 6 files changed, 39 insertions(+), 46 deletions(-)
 delete mode 100644 client/cypress/downloads/downloads.html

diff --git a/client/cypress/downloads/downloads.html b/client/cypress/downloads/downloads.html
deleted file mode 100644
index 4e6e883a5f39548b6afb7fccbc6b9fda25d65ef0..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 4680
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
By#oLM

diff --git a/client/cypress/e2e/navigation.cy.ts b/client/cypress/e2e/navigation.cy.ts
index 358cb4c6..a8380700 100644
--- a/client/cypress/e2e/navigation.cy.ts
+++ b/client/cypress/e2e/navigation.cy.ts
@@ -1,24 +1,24 @@
 describe('navigation', () => {
-  // it('redirects to project page', () => {
-  //   cy.visit('/').url().should('be.equal', 'http://localhost:3000/projects');
-  // });
+  it('redirects to project page', () => {
+    cy.visit('/').url().should('be.equal', 'http://localhost:3000/projects');
+  });
 
-  // it('access to project detail page and switch dashboard', () => {
-  //   cy.visit('/').wait(10000);
-  //   cy.get('[data-cy="projects-list-tab"]').should('exist');
-  //   cy.get('[data-cy="projects-list-tab"]').click();
-  //   cy.get('[data-cy="project-item-link"]').first().click();
-  //   // cy.get('button[data-cy="project-dashboard-button"]').click().wait(3000);
-  //   // cy.get('[data-cy="project-dashboard"]').should('exist');
-  //   // cy.get('button[data-cy="project-dashboard-button"]').click();
-  //   // cy.get('[data-cy="project-dashboard"]').should('not.exist');
-  // });
+  it('access to project detail page and switch dashboard', () => {
+    cy.visit('/').wait(10000);
+    cy.get('[data-cy="projects-list-tab"]').should('exist');
+    cy.get('[data-cy="projects-list-tab"]').click();
+    cy.get('[data-cy="project-item-link"]').first().click();
+    cy.get('button[data-cy="project-dashboard-button"]').click().wait(3000);
+    cy.get('[data-cy="project-dashboard"]').should('exist');
+    cy.get('button[data-cy="project-dashboard-button"]').click();
+    cy.get('[data-cy="project-dashboard"]').should('not.exist');
+  });
 
   it('access to country detail page', () => {
     cy.visit('/').wait(10000);
     cy.get('a[data-cy="sidebar-tab-countries"]').click({ force: true }).wait(1000);
-    // cy.get('[data-cy="country-item"]').first().click().wait(10000);
-    // cy.get('[data-cy="country-detail-name"]').should('exist');
+    cy.get('[data-cy="country-item"]').first().click().wait(10000);
+    cy.get('[data-cy="country-detail-name"]').should('exist');
   });
 
   it('access to datasets and displays an info dialog', () => {
diff --git a/client/src/components/map/constants.ts b/client/src/components/map/constants.ts
index 503b0ffb..fed3f38e 100644
--- a/client/src/components/map/constants.ts
+++ b/client/src/components/map/constants.ts
@@ -8,4 +8,4 @@ export const DEFAULT_VIEW_STATE: Partial<ViewState> = {
   longitude: 0,
 };
 
-export const DEFAULT_BBOX: Bbox = [-84.05,-46.96,227.66,64.23];
+export const DEFAULT_BBOX: Bbox = [-84.05, -46.96, 227.66, 64.23];
diff --git a/client/src/containers/countries/item.tsx b/client/src/containers/countries/item.tsx
index aa893421..d46141c1 100644
--- a/client/src/containers/countries/item.tsx
+++ b/client/src/containers/countries/item.tsx
@@ -1,25 +1,17 @@
 'use client';
 
-import { useCallback } from 'react';
-
 import Flag from 'react-world-flags';
 
-import { useRouter } from 'next/navigation';
-
-import { useSetAtom } from 'jotai';
+import Link from 'next/link';
 
-import { tmpBboxAtom } from '@/store';
 
 import { useGetCountryIndicatorFields } from '@/types/generated/country-indicator-field';
 import { CountryListResponseDataItem } from '@/types/generated/strapi.schemas';
-import type { Bbox } from '@/types/map';
 
 import { useSyncQueryParams } from '@/hooks/datasets';
 export default function CountryItem({ data }: { data: CountryListResponseDataItem }) {
-  const setTempBbox = useSetAtom(tmpBboxAtom);
 
-  const queryParams = useSyncQueryParams();
-  const { push } = useRouter();
+  const queryParams = useSyncQueryParams({ bbox: true });
 
   const { data: projectsCountIndicator } = useGetCountryIndicatorFields(
     {
@@ -36,16 +28,10 @@ export default function CountryItem({ data }: { data: CountryListResponseDataIte
     }
   );
 
-  const handleClick = useCallback(() => {
-    setTempBbox(data.attributes?.bbox as Bbox);
-    push(`/countries/${data.id}${queryParams}&bbox=${data.attributes?.bbox}`);
-  }, [data, push, queryParams, setTempBbox]);
-
   return (
-    <button
-      type="button"
+    <Link
+      href={`/countries/${data.id}${queryParams}&bbox=[${data.attributes?.bbox}]`}
       data-cy="country-item"
-      onClick={handleClick}
       className="flex items-center justify-between space-x-4 rounded-lg border border-gray-100 bg-white py-2 pl-2 pr-4 text-sm text-yellow-900 no-underline shadow-sm transition-all duration-300 hover:border-yellow-500"
     >
       <div className="flex items-center space-x-4">
@@ -64,6 +50,6 @@ export default function CountryItem({ data }: { data: CountryListResponseDataIte
           {projectsCountIndicator?.attributes?.value === 1 ? 'project' : 'projects'}
         </p>
       )}
-    </button>
+    </Link>
   );
 }
diff --git a/client/src/containers/map/index.tsx b/client/src/containers/map/index.tsx
index ca6f32f3..3c1ae145 100644
--- a/client/src/containers/map/index.tsx
+++ b/client/src/containers/map/index.tsx
@@ -23,6 +23,7 @@ import PopupContainer from '@/containers/map/popup';
 import MapSettingsManager from '@/containers/map/settings/manager';
 
 import Map from '@/components/map';
+import { DEFAULT_BBOX } from '@/components/map/constants';
 import Controls from '@/components/map/controls';
 import SettingsControl from '@/components/map/controls/settings';
 import ZoomControl from '@/components/map/controls/zoom';
@@ -45,7 +46,7 @@ const DEFAULT_PROPS: CustomMapProps = {
     zoom: 2,
     pitch: 0,
     bearing: 0,
-    bounds: [68.711178, -11.476973, 131.333249, 21.087406],
+    bounds: DEFAULT_BBOX as Bbox,
   },
   minZoom: 2,
   maxZoom: 20,
@@ -72,7 +73,7 @@ export default function MapContainer() {
   const layersInteractiveIds = useAtomValue(layersInteractiveIdsAtom);
   const setHoveredProjectMap = useSetAtom(hoveredProjectMapAtom);
   const [cursor, setCursor] = useState<'grab' | 'pointer'>('grab');
-  const [bboxURL, setBboxURL] = useSyncBbox();
+  const [bboxFromURL, setBboxFromURL] = useSyncBbox();
 
   const [tmpBbox, setTmpBbox] = useAtom(tmpBboxAtom);
   const sidebarOpen = useAtomValue(openAtom);
@@ -108,6 +109,7 @@ export default function MapContainer() {
   );
 
   const handleMapViewStateChange = useCallback(() => {
+    console.log('handle view state');
     if (map) {
       const b = map
         .getBounds()
@@ -116,10 +118,10 @@ export default function MapContainer() {
         .map((v: number) => {
           return parseFloat(v.toFixed(2));
         }) as Bbox;
-      setBboxURL(b);
+      setBboxFromURL(b);
       setTmpBbox(null);
     }
-  }, [map, setBboxURL, setTmpBbox]);
+  }, [map, setBboxFromURL, setTmpBbox]);
 
   const handleMapClick = useCallback(
     (e: MapLayerMouseEvent) => {
@@ -266,11 +268,14 @@ export default function MapContainer() {
         data-cy="map"
         initialViewState={{
           ...initialViewState,
-          ...(bboxURL && {
-            bounds: bboxURL as LngLatBoundsLike,
+          ...(bboxFromURL && {
+            bounds: bboxFromURL as LngLatBoundsLike,
           }),
         }}
-        bounds={tmpBounds}
+        bounds={{
+          ...tmpBounds,
+          bbox: bboxFromURL as Bbox,
+        }}
         cursor={cursor}
         minZoom={minZoom}
         maxZoom={maxZoom}
diff --git a/client/src/containers/projects/list.tsx b/client/src/containers/projects/list.tsx
index 1617446b..be8f8b03 100644
--- a/client/src/containers/projects/list.tsx
+++ b/client/src/containers/projects/list.tsx
@@ -2,6 +2,7 @@
 
 import { MouseEvent, useCallback, useState } from 'react';
 
+import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 
 import { useSetAtom } from 'jotai';
@@ -31,7 +32,7 @@ export default function ProjectsList() {
   const [filtersSettings] = useSyncFilters();
   const setHoveredProjectList = useSetAtom(hoveredProjectMapAtom);
   const router = useRouter();
-  const queryParams = useSyncQueryParams();
+  const queryParams = useSyncQueryParams({ bbox: true });
 
   const { data, isFetching, isFetched, isError } = useGetProjects(
     {
@@ -207,17 +208,18 @@ export default function ProjectsList() {
               <div className="flex flex-col space-y-2">
                 {data &&
                   data.map((project) => (
-                    <button
-                      type="button"
+                    <Link
+                      legacyBehavior={false}
                       key={project?.id}
                       data-value={project?.attributes?.project_code}
                       data-bbox={project?.attributes?.bbox}
                       onClick={handleClick}
                       onMouseEnter={handleHover}
                       onMouseLeave={() => setHoveredProjectList(null)}
+                      href={`/projects/${project?.attributes?.project_code}${queryParams}&bbox=[${project?.attributes?.bbox}]`}
                     >
                       <ProjectItem data={project} />
-                    </button>
+                    </Link>
                   ))}
               </div>
             </ScrollArea>