temp bbon to on click

Vizzuality · May 8, 2024 · 4c424e3 · 4c424e3
1 parent a8361a7
commit 4c424e3
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 11 deletions.
diff --git a/client/src/containers/countries/item.tsx b/client/src/containers/countries/item.tsx
@@ -1,14 +1,23 @@
 'use client';
 
+import { MouseEvent, useCallback } from 'react';
+
 import Flag from 'react-world-flags';
 
 import Link from 'next/link';
 
+import { useSetAtom } from 'jotai';
+
+import { tmpBboxAtom } from '@/store';
+
 import { useGetCountryIndicatorFields } from '@/types/generated/country-indicator-field';
 import { CountryListResponseDataItem } from '@/types/generated/strapi.schemas';
+import { Bbox } from '@/types/map';
 
 import { useSyncQueryParams } from '@/hooks/datasets';
+
 export default function CountryItem({ data }: { data: CountryListResponseDataItem }) {
+  const setTempBbox = useSetAtom(tmpBboxAtom);
   const queryParams = useSyncQueryParams({ bbox: true });
 
   const { data: projectsCountIndicator } = useGetCountryIndicatorFields(
@@ -26,10 +35,24 @@ export default function CountryItem({ data }: { data: CountryListResponseDataIte
     }
   );
 
+  const handleClick = useCallback(
+    (e: MouseEvent<HTMLElement>) => {
+      const value = e.currentTarget?.getAttribute('data-bbox');
+
+      if (value) {
+        const currentValue = value.split(',').map((num) => parseFloat(num)) as Bbox;
+        setTempBbox(currentValue);
+      }
+    },
+    [setTempBbox]
+  );
+
   return (
     <Link
-      href={`/countries/${data.id}${queryParams}&bbox=[${data.attributes?.bbox}]`}
+      href={`/countries/${data.id}${queryParams}`}
+      data-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">

diff --git a/client/src/containers/map/index.tsx b/client/src/containers/map/index.tsx
@@ -109,7 +109,6 @@ export default function MapContainer() {
   );
 
   const handleMapViewStateChange = useCallback(() => {
-    console.log('handle view state');
     if (map) {
       const b = map
         .getBounds()
@@ -272,10 +271,7 @@ export default function MapContainer() {
             bounds: bboxFromURL as LngLatBoundsLike,
           }),
         }}
-        bounds={{
-          ...tmpBounds,
-          bbox: bboxFromURL as Bbox,
-        }}
+        bounds={tmpBounds}
         cursor={cursor}
         minZoom={minZoom}
         maxZoom={maxZoom}

diff --git a/client/src/containers/projects/list.tsx b/client/src/containers/projects/list.tsx
@@ -31,7 +31,6 @@ export default function ProjectsList() {
   const setTempBbox = useSetAtom(tmpBboxAtom);
   const [filtersSettings] = useSyncFilters();
   const setHoveredProjectList = useSetAtom(hoveredProjectMapAtom);
-  const router = useRouter();
   const queryParams = useSyncQueryParams({ bbox: true });
 
   const { data, isFetching, isFetched, isError } = useGetProjects(
@@ -155,9 +154,8 @@ export default function ProjectsList() {
         const currentValue = value.split(',').map((num) => parseFloat(num)) as Bbox;
         setTempBbox(currentValue);
       }
-      router.push(`/projects/${e.currentTarget.getAttribute('data-value')}${queryParams}`);
     },
-    [setTempBbox, router, queryParams]
+    [setTempBbox]
   );
 
   return (
@@ -209,14 +207,13 @@ export default function ProjectsList() {
                 {data &&
                   data.map((project) => (
                     <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}]`}
+                      href={`/projects/${project?.attributes?.project_code}${queryParams}`}
                     >
                       <ProjectItem data={project} />
                     </Link>