map bounds changed

Vizzuality · May 7, 2024 · 80a292a · 80a292a
1 parent 3b747ae
commit 80a292a
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 46 deletions.
diff --git a/client/cypress/downloads/downloads.html b/client/cypress/downloads/downloads.html
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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>