temp bbox to on click

client/src/containers/countries/detail/panel.tsx

@@ -1,24 +1,30 @@
 'use client';
 
+import { useEffect } from 'react';
+
 import Markdown from 'react-markdown';
 import Flag from 'react-world-flags';
 
 import Image from 'next/image';
 import Link from 'next/link';
 import { notFound, useParams } from 'next/navigation';
 
+import { useSetAtom } from 'jotai';
 import { X } from 'lucide-react';
 import { ArrowLeft, Download, ExternalLink, Info } from 'lucide-react';
 import remarkGfm from 'remark-gfm';
 
 import { formatCompactNumber } from '@/lib/utils/formats';
 import { DescriptionWithoutMarkdown } from '@/lib/utils/markdown';
 
+import { tmpBboxAtom } from '@/store';
+
 import { useGetCountriesId } from '@/types/generated/country';
 import { useGetCountryIndicatorFields } from '@/types/generated/country-indicator-field';
 import { Country, CountryCountryIndicatorFieldsDataItem } from '@/types/generated/strapi.schemas';
 
 import { useSyncQueryParams } from '@/hooks/datasets';
+import { useSyncBbox } from '@/hooks/datasets/sync-query';
 
 import BarsChart from '@/containers/charts/bar';
 import SingleBar from '@/containers/charts/single-bar';
@@ -40,6 +46,14 @@ import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip
 export default function CountryDetailPanel() {
   const params = useParams<{ id: string }>();
   const { data, isFetching, isFetched, isError } = useGetCountriesId(Number(params.id));
+  const setTempBbox = useSetAtom(tmpBboxAtom);
+  const [URLBbox] = useSyncBbox();
+
+  useEffect(() => {
+    if (data?.data?.attributes?.bbox && !URLBbox) {
+      setTempBbox(data?.data?.attributes?.bbox);
+    }
+  }, [data, setTempBbox, URLBbox]);
 
   const {
     data: indicators,

client/src/containers/countries/item.tsx

@@ -8,6 +8,7 @@ import { useGetCountryIndicatorFields } from '@/types/generated/country-indicato
 import { CountryListResponseDataItem } from '@/types/generated/strapi.schemas';
 
 import { useSyncQueryParams } from '@/hooks/datasets';
+
 export default function CountryItem({ data }: { data: CountryListResponseDataItem }) {
   const queryParams = useSyncQueryParams({ bbox: true });
 
@@ -28,7 +29,7 @@ export default function CountryItem({ data }: { data: CountryListResponseDataIte
 
   return (
     <Link
-      href={`/countries/${data.id}${queryParams}&bbox=[${data.attributes?.bbox}]`}
+      href={`/countries/${data.id}${queryParams}`}
       data-cy="country-item"
       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"
     >

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}

client/src/containers/projects/detail/panel.tsx

@@ -1,17 +1,20 @@
 'use client';
 
+import { useEffect } from 'react';
+
 import Image from 'next/image';
 import { notFound, useParams } from 'next/navigation';
 import { useRouter } from 'next/navigation';
 
-import { useAtom } from 'jotai';
+import { useAtom, useSetAtom } from 'jotai';
 import { ArrowLeft, ChevronRight, Share as Download, X } from 'lucide-react';
 
 import { cn } from '@/lib/classnames';
 import { formatCompactNumber } from '@/lib/utils/formats';
 import { DescriptionWithoutMarkdown } from '@/lib/utils/markdown';
 
 import { dashboardAtom } from '@/store';
+import { tmpBboxAtom } from '@/store';
 
 import { useGetIndicatorFields } from '@/types/generated/indicator-field';
 import { useGetProjects } from '@/types/generated/project';
@@ -21,6 +24,8 @@ import {
   ProjectProjectIndicatorFields,
 } from '@/types/generated/strapi.schemas';
 
+import { useSyncBbox } from '@/hooks/datasets/sync-query';
+
 import { COLUMNS, CSV_COLUMNS_ORDER } from '@/containers/projects/detail/constants';
 import Share from '@/containers/share';
 
@@ -36,6 +41,8 @@ export default function ProjectDetailPanel() {
   const params = useParams<{ id: string }>();
   const router = useRouter();
   const [dashboard, setDashboard] = useAtom(dashboardAtom);
+  const setTempBbox = useSetAtom(tmpBboxAtom);
+  const [URLBbox] = useSyncBbox();
 
   const { data, isFetching, isFetched, isError } = useGetProjects(
     {
@@ -51,6 +58,12 @@ export default function ProjectDetailPanel() {
     }
   );
 
+  useEffect(() => {
+    if (data?.bbox && !URLBbox) {
+      setTempBbox(data?.bbox);
+    }
+  }, [data, setTempBbox, URLBbox]);
+
   const {
     data: indicators,
     isFetching: indicatorsIsFetching,

client/src/containers/projects/list.tsx

@@ -3,7 +3,6 @@
 import { MouseEvent, useCallback, useState } from 'react';
 
 import Link from 'next/link';
-import { useRouter } from 'next/navigation';
 
 import { useSetAtom } from 'jotai';
 import { Search, X } from 'lucide-react';
@@ -31,7 +30,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(
@@ -147,19 +145,6 @@ export default function ProjectsList() {
     [setHoveredProjectList]
   );
 
-  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);
-      }
-      router.push(`/projects/${e.currentTarget.getAttribute('data-value')}${queryParams}`);
-    },
-    [setTempBbox, router, queryParams]
-  );
-
   return (
     <div className="flex h-full flex-col space-y-2">
       <div className="ml-1 mt-1 flex justify-between space-x-2 px-5">
@@ -209,14 +194,11 @@ 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>

client/src/hooks/datasets/query-parsers.ts

@@ -24,7 +24,7 @@ export const basemapSettingsParser = parseAsJson<MapSettings>().withDefault({
 
 export const projectsTabParser = parseAsJson<ProjectsTab>().withDefault('statistics');
 
-export const bboxParser = parseAsJson<[number, number, number, number]>().withDefault(DEFAULT_BBOX);
+export const bboxParser = parseAsJson<[number, number, number, number]>();
 
 // query params parsers
 const searchQueryParams = {