handle bbox from country and project

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

Hide file tree

Showing 5 changed files with 29 additions and 39 deletions.
diff --git a/client/src/containers/countries/detail/panel.tsx b/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,

diff --git a/client/src/containers/countries/item.tsx b/client/src/containers/countries/item.tsx
@@ -1,23 +1,15 @@
 '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(
@@ -35,24 +27,10 @@ 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}`}
-      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/projects/detail/panel.tsx b/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,

diff --git a/client/src/containers/projects/list.tsx b/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';
@@ -146,18 +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);
-      }
-    },
-    [setTempBbox]
-  );
-
   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,8 +196,6 @@ export default function ProjectsList() {
                     <Link
                       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}`}

diff --git a/client/src/hooks/datasets/query-parsers.ts b/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 = {