Protection Levels widget to query the MpaaProtectionLevelStats endpoi…

…nt directly In order to quick fix a potential data relationships issue
Vizzuality · Jul 19, 2024 · b48a3e9 · b48a3e9
1 parent cee2db7
commit b48a3e9
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 48 deletions.
diff --git a/...rc/containers/map/sidebar/main-panel/panels/details/widgets/protection-types/constants.ts b/...rc/containers/map/sidebar/main-panel/panels/details/widgets/protection-types/constants.ts
diff --git a/...d/src/containers/map/sidebar/main-panel/panels/details/widgets/protection-types/index.tsx b/...d/src/containers/map/sidebar/main-panel/panels/details/widgets/protection-types/index.tsx
@@ -7,11 +7,9 @@ import Widget from '@/components/widget';
 import { PROTECTION_TYPES_CHART_COLORS } from '@/constants/protection-types-chart-colors';
 import { FCWithMessages } from '@/types';
 import { useGetDataInfos } from '@/types/generated/data-info';
-import { useGetLocations } from '@/types/generated/location';
+import { useGetMpaaProtectionLevelStats } from '@/types/generated/mpaa-protection-level-stat';
 import type { LocationGroupsDataItemAttributes } from '@/types/generated/strapi.schemas';
 
-import { PROTECTION_LEVEL_NAME_SUBSTITUTIONS } from './constants';
-
 type ProtectionTypesWidgetProps = {
   location: LocationGroupsDataItemAttributes;
 };
@@ -22,28 +20,20 @@ const ProtectionTypesWidget: FCWithMessages<ProtectionTypesWidgetProps> = ({ loc
 
   // Get protection levels data for the location
   const {
-    data: { data: protectionLevelsData },
-    isFetching: isFetchingProtectionLevelsData,
-  } = useGetLocations(
+    data: { data: protectionLevelsStatsData },
+    isFetching: isFetchingProtectionLevelsStatsData,
+  } = useGetMpaaProtectionLevelStats(
     {
       locale,
       filters: {
-        code: location?.code,
-      },
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      populate: {
-        mpaa_protection_level_stats: {
-          filters: {
-            mpaa_protection_level: {
-              slug: 'fully-highly-protected',
-            },
-          },
-          populate: {
-            mpaa_protection_level: '*',
-          },
+        location: {
+          code: location?.code || 'GLOB',
+        },
+        mpaa_protection_level: {
+          slug: 'fully-highly-protected',
         },
       },
+      populate: '*',
       'pagination[limit]': -1,
     },
     {
@@ -84,47 +74,42 @@ const ProtectionTypesWidget: FCWithMessages<ProtectionTypesWidgetProps> = ({ loc
 
   // Go through all the relevant stats, find the last updated one's value
   const lastUpdated = useMemo(() => {
-    const protectionLevelStats =
-      protectionLevelsData[0]?.attributes?.mpaa_protection_level_stats?.data;
-    const updatedAtValues = protectionLevelStats?.reduce(
+    const updatedAtValues = protectionLevelsStatsData?.reduce(
       (acc, curr) => [...acc, curr?.attributes?.updatedAt],
       []
     );
 
     return updatedAtValues?.sort()?.reverse()?.[0];
-  }, [protectionLevelsData]);
+  }, [protectionLevelsStatsData]);
 
   // Parse data to display in the chart
   const widgetChartData = useMemo(() => {
-    if (!protectionLevelsData.length) return [];
+    if (!protectionLevelsStatsData.length) return [];
+
+    const parseProtectionLevelStats = (protectionLevelStats) => {
+      const mpaaProtectionLevel = protectionLevelStats?.mpaa_protection_level?.data?.attributes;
+      const location = protectionLevelStats?.location?.data?.attributes;
+
+      const barColor = PROTECTION_TYPES_CHART_COLORS[mpaaProtectionLevel?.slug];
 
-    const parsedProtectionLevel = (label, protectionLevel, stats) => {
       return {
-        title: label,
-        slug: protectionLevel.slug,
-        background: PROTECTION_TYPES_CHART_COLORS[protectionLevel.slug],
-        totalArea: location.totalMarineArea,
-        protectedArea: stats?.area,
+        title: mpaaProtectionLevel?.name,
+        slug: mpaaProtectionLevel?.slug,
+        background: barColor,
+        totalArea: location?.totalMarineArea,
+        protectedArea: protectionLevelStats?.area,
         info: metadata?.info,
         sources: metadata?.sources,
       };
     };
 
-    const parsedMpaaProtectionLevelData =
-      protectionLevelsData[0]?.attributes?.mpaa_protection_level_stats?.data?.map((entry) => {
-        const stats = entry?.attributes;
-        const protectionLevel = stats?.mpaa_protection_level?.data.attributes;
-        const displayName =
-          PROTECTION_LEVEL_NAME_SUBSTITUTIONS[protectionLevel.slug] || protectionLevel?.name;
-        return parsedProtectionLevel(displayName, protectionLevel, stats);
-      });
-
-    return parsedMpaaProtectionLevelData;
-  }, [location, protectionLevelsData, metadata]);
+    return protectionLevelsStatsData?.map(({ attributes }) =>
+      parseProtectionLevelStats(attributes)
+    );
+  }, [metadata, protectionLevelsStatsData]);
 
   const noData = !widgetChartData.length;
-
-  const loading = isFetchingProtectionLevelsData;
+  const loading = isFetchingProtectionLevelsStatsData;
 
   return (
     <Widget