Merge pull request #117 from Vizzuality/SKY30-173-the-map-title-label…

…s-for-the [SKY30-173]: fixes getting location name
Vizzuality · Dec 13, 2023 · c7f6548 · c7f6548
2 parents 21ca41d + 2605478
commit c7f6548
Show file tree

Hide file tree

Showing 6 changed files with 88 additions and 62 deletions.
diff --git a/frontend/src/containers/map/content/details/index.tsx b/frontend/src/containers/map/content/details/index.tsx
@@ -2,25 +2,30 @@ import { useMemo } from 'react';
 
 import { useRouter } from 'next/router';
 
-import { useQueryClient } from '@tanstack/react-query';
-
 import { Button } from '@/components/ui/button';
 import tablesSettings from '@/containers/map/content/details/tables-settings';
 import { useSyncMapContentSettings } from '@/containers/map/sync-settings';
-import { LocationGroupsDataItemAttributes } from '@/types/generated/strapi.schemas';
+import { useGetLocations } from '@/types/generated/location';
 
 const MapDetails: React.FC = () => {
   const [, setSettings] = useSyncMapContentSettings();
   const {
     query: { locationCode },
   } = useRouter();
 
-  const queryClient = useQueryClient();
-
-  const location = queryClient.getQueryData<LocationGroupsDataItemAttributes>([
-    'locations',
-    locationCode,
-  ]);
+  const locationsQuery = useGetLocations(
+    {
+      filters: {
+        code: locationCode,
+      },
+    },
+    {
+      query: {
+        queryKey: ['locations', locationCode],
+        select: ({ data }) => data?.[0]?.attributes,
+      },
+    }
+  );
 
   const handleOnCloseClick = () => {
     setSettings((prevSettings) => ({ ...prevSettings, showDetails: false }));
@@ -29,20 +34,24 @@ const MapDetails: React.FC = () => {
   const table = useMemo(() => {
     if (location) {
       // TODO: Improve to support more entries (although not needed right now)
-      const tableSettings = tablesSettings.worldwideRegion.locationTypes.includes(location.type)
+      const tableSettings = tablesSettings.worldwideRegion.locationTypes.includes(
+        locationsQuery.data?.type
+      )
         ? tablesSettings.worldwideRegion
         : tablesSettings.countryHighseas;
 
       const parsedTitle =
-        tableSettings.title[location.type]?.replace('{location}', location.name) ||
-        tableSettings.title.fallback;
+        tableSettings.title[locationsQuery.data?.type]?.replace(
+          '{location}',
+          locationsQuery.data?.name
+        ) || tableSettings.title.fallback;
 
       return {
         title: parsedTitle,
         component: tableSettings.component,
       };
     }
-  }, [location]);
+  }, [locationsQuery.data]);
 
   return (
     <div className="absolute h-full w-full overflow-x-hidden overflow-y-scroll bg-white px-4 py-4 md:px-6">

diff --git a/frontend/src/containers/map/content/details/tables/global-regional/index.tsx b/frontend/src/containers/map/content/details/tables/global-regional/index.tsx
@@ -2,28 +2,30 @@ import { useMemo, useState } from 'react';
 
 import { useRouter } from 'next/router';
 
-import { useQueryClient } from '@tanstack/react-query';
-
 import { applyFilters } from '@/containers/map/content/details/helpers';
 import Table from '@/containers/map/content/details/table';
 import useColumns from '@/containers/map/content/details/tables/global-regional/useColumns';
 import { useGetLocations } from '@/types/generated/location';
-import type {
-  LocationGroupsDataItemAttributes,
-  LocationListResponseDataItem,
-} from '@/types/generated/strapi.schemas';
+import type { LocationListResponseDataItem } from '@/types/generated/strapi.schemas';
 
 const GlobalRegionalTable: React.FC = () => {
   const {
     query: { locationCode },
   } = useRouter();
 
-  const queryClient = useQueryClient();
-
-  const mapLocation = queryClient.getQueryData<LocationGroupsDataItemAttributes>([
-    'locations',
-    locationCode,
-  ]);
+  const locationsQuery = useGetLocations(
+    {
+      filters: {
+        code: locationCode,
+      },
+    },
+    {
+      query: {
+        queryKey: ['locations', locationCode],
+        select: ({ data }) => data?.[0]?.attributes,
+      },
+    }
+  );
 
   const [filters, setFilters] = useState({
     // ! This shouldn't be hardcoded. The setup needs to be able to work the same without any default filters here.
@@ -40,11 +42,11 @@ const GlobalRegionalTable: React.FC = () => {
   const { data: locationsData }: { data: LocationListResponseDataItem[] } = useGetLocations(
     {
       filters:
-        mapLocation?.type === 'region'
+        locationsQuery.data?.type === 'region'
           ? {
               groups: {
                 code: {
-                  $eq: mapLocation?.code,
+                  $eq: locationsQuery.data?.code,
                 },
               },
             }
@@ -154,7 +156,8 @@ const GlobalRegionalTable: React.FC = () => {
       const lfpHighProtectedPercentage = (lfpHighProtectedArea * 100) / location.totalMarineArea;
 
       // Global contributions calculations
-      const globalContributionPercentage = (protectedArea * 100) / mapLocation.totalMarineArea;
+      const globalContributionPercentage =
+        (protectedArea * 100) / locationsQuery.data?.totalMarineArea;
 
       return {
         location: location.name,
@@ -169,7 +172,7 @@ const GlobalRegionalTable: React.FC = () => {
         globalContribution: globalContributionPercentage,
       };
     });
-  }, [mapLocation, locationsData]);
+  }, [locationsQuery.data, locationsData]);
 
   const tableData = useMemo(() => {
     return applyFilters(parsedData, filters);

diff --git a/frontend/src/containers/map/content/details/tables/national-highseas/index.tsx b/frontend/src/containers/map/content/details/tables/national-highseas/index.tsx
@@ -2,28 +2,31 @@ import { useMemo, useState } from 'react';
 
 import { useRouter } from 'next/router';
 
-import { useQueryClient } from '@tanstack/react-query';
-
 import { applyFilters } from '@/containers/map/content/details/helpers';
 import Table from '@/containers/map/content/details/table';
 import useColumns from '@/containers/map/content/details/tables/national-highseas/useColumns';
+import { useGetLocations } from '@/types/generated/location';
 import { useGetMpaProtectionCoverageStats } from '@/types/generated/mpa-protection-coverage-stat';
-import {
-  LocationGroupsDataItemAttributes,
-  MpaProtectionCoverageStatListResponseDataItem,
-} from '@/types/generated/strapi.schemas';
+import { MpaProtectionCoverageStatListResponseDataItem } from '@/types/generated/strapi.schemas';
 
 const NationalHighseasTable: React.FC = () => {
   const {
     query: { locationCode },
   } = useRouter();
 
-  const queryClient = useQueryClient();
-
-  const mapLocation = queryClient.getQueryData<LocationGroupsDataItemAttributes>([
-    'locations',
-    locationCode,
-  ]);
+  const locationsQuery = useGetLocations(
+    {
+      filters: {
+        code: locationCode,
+      },
+    },
+    {
+      query: {
+        queryKey: ['locations', locationCode],
+        select: ({ data }) => data?.[0]?.attributes,
+      },
+    }
+  );
 
   const [filters, setFilters] = useState({
     // ! This shouldn't be hardcoded. The setup needs to be able to work the same without any default filters here.
@@ -50,7 +53,7 @@ const NationalHighseasTable: React.FC = () => {
         filters: {
           location: {
             code: {
-              $eq: mapLocation?.code,
+              $eq: locationsQuery.data?.code,
             },
           },
         },
@@ -100,7 +103,7 @@ const NationalHighseasTable: React.FC = () => {
       const fishingProtectionLevel = coverageStats?.fishing_protection_level?.data?.attributes;
 
       // Calculate coverage percentage
-      const coveragePercentage = (coverageStats.area / mapLocation.totalMarineArea) * 100;
+      const coveragePercentage = (coverageStats.area / locationsQuery.data?.totalMarineArea) * 100;
 
       return {
         protectedArea: mpa?.name,
@@ -112,7 +115,7 @@ const NationalHighseasTable: React.FC = () => {
         area: mpa?.area,
       };
     });
-  }, [coverageData, mapLocation]);
+  }, [coverageData, locationsQuery.data]);
 
   const tableData = useMemo(() => {
     return applyFilters(parsedData, filters);

diff --git a/frontend/src/containers/map/sidebar/analysis/widget/index.tsx b/frontend/src/containers/map/sidebar/analysis/widget/index.tsx
@@ -55,7 +55,6 @@ const AnalysisWidget: React.FC = () => {
       query: {
         placeholderData: { data: [] },
         select: ({ data }) => data,
-        staleTime: Infinity,
       },
     }
   );

diff --git a/frontend/src/containers/map/sidebar/details/index.tsx b/frontend/src/containers/map/sidebar/details/index.tsx
@@ -1,10 +1,8 @@
 import { useRouter } from 'next/router';
 
-import { useQueryClient } from '@tanstack/react-query';
-
 import { useSyncMapContentSettings } from '@/containers/map/sync-settings';
 import { cn } from '@/lib/classnames';
-import { LocationGroupsDataItemAttributes } from '@/types/generated/strapi.schemas';
+import { useGetLocations } from '@/types/generated/location';
 
 import DetailsButton from './details-button';
 import LocationSelector from './location-selector';
@@ -14,19 +12,27 @@ const SidebarDetails: React.FC = () => {
   const {
     query: { locationCode },
   } = useRouter();
-  const queryClient = useQueryClient();
   const [{ showDetails }] = useSyncMapContentSettings();
 
-  const location = queryClient.getQueryData<LocationGroupsDataItemAttributes>([
-    'locations',
-    locationCode,
-  ]);
+  const locationsQuery = useGetLocations(
+    {
+      filters: {
+        code: locationCode,
+      },
+    },
+    {
+      query: {
+        queryKey: ['locations', locationCode],
+        select: ({ data }) => data?.[0]?.attributes,
+      },
+    }
+  );
 
   return (
     <>
       <div className="h-full w-full overflow-y-scroll border-x border-black pb-12">
         <div className="border-b border-black px-4 pt-4 pb-2 md:px-8">
-          <h1 className="text-5xl font-black">{location?.name}</h1>
+          <h1 className="text-5xl font-black">{locationsQuery.data?.name}</h1>
           <LocationSelector className="my-2" />
         </div>
         <DetailsWidgets />

diff --git a/frontend/src/containers/map/sidebar/details/location-selector/index.tsx b/frontend/src/containers/map/sidebar/details/location-selector/index.tsx
@@ -2,7 +2,6 @@ import { useCallback, useState } from 'react';
 
 import { useRouter } from 'next/router';
 
-import { useQueryClient } from '@tanstack/react-query';
 import { useSetAtom } from 'jotai';
 import { Check } from 'lucide-react';
 
@@ -34,12 +33,20 @@ const LocationSelector: React.FC<LocationSelectorProps> = ({ className }) => {
   // @ts-expect-error to work properly, strict mode should be enabled
   const setLocationBBox = useSetAtom(bboxLocation);
 
-  const queryClient = useQueryClient();
+  const locationsQuery = useGetLocations(
+    {
+      filters: {
+        code: locationCode,
+      },
+    },
+    {
+      query: {
+        queryKey: ['locations', locationCode],
+        select: ({ data }) => data?.[0]?.attributes,
+      },
+    }
+  );
 
-  const location = queryClient.getQueryData<LocationGroupsDataItemAttributes>([
-    'locations',
-    locationCode,
-  ]);
   const searchParams = useMapSearchParams();
 
   const [locationPopoverOpen, setLocationPopoverOpen] = useState(false);
@@ -52,7 +59,6 @@ const LocationSelector: React.FC<LocationSelectorProps> = ({ className }) => {
       query: {
         placeholderData: { data: [] },
         select: ({ data }) => data,
-        staleTime: Infinity,
       },
     }
   );
@@ -98,7 +104,7 @@ const LocationSelector: React.FC<LocationSelectorProps> = ({ className }) => {
                         <Check
                           className={cn(
                             'relative top-1 mr-2 inline-block h-4 w-4 flex-shrink-0',
-                            location?.code === code ? 'opacity-100' : 'opacity-0'
+                            locationsQuery.data?.code === code ? 'opacity-100' : 'opacity-0'
                           )}
                         />
                         {name}