Merge pull request #281 from Vizzuality/SKY30-418-fe-adapt-national-h…

…ighseas-tables-to-work-with-s-cs-strapi-changes

[SKY30-418] Adapt national highseas tables to work with new mpaa strapi changes

frontend/src/containers/map/content/details/table/index.tsx

@@ -44,7 +44,7 @@ const MapTable: FCWithMessages = ({ columns, data }) => {
   return (
     <table
       ref={tableRef}
-      className="relative border-spacing-0 whitespace-nowrap pr-6 font-mono text-xs"
+      className="relative min-w-full border-spacing-0 whitespace-nowrap pr-6 font-mono text-xs"
     >
       <thead className="sticky -top-4 z-10 bg-white text-left">
         {table.getHeaderGroups().map((headerGroup) => (

frontend/src/containers/map/content/details/tables/national-highseas/index.tsx

@@ -9,8 +9,8 @@ import Table from '@/containers/map/content/details/table';
 import useColumns from '@/containers/map/content/details/tables/national-highseas/useColumns';
 import { FCWithMessages } from '@/types';
 import { useGetLocations } from '@/types/generated/location';
-import { useGetMpaProtectionCoverageStats } from '@/types/generated/mpa-protection-coverage-stat';
-import { MpaProtectionCoverageStatListResponseDataItem } from '@/types/generated/strapi.schemas';
+import { useGetMpas } from '@/types/generated/mpa';
+import { MpaListResponseDataItem } from '@/types/generated/strapi.schemas';
 
 import SortingButton from '../../table/sorting-button';
 
@@ -46,75 +46,67 @@ const NationalHighseasTable: FCWithMessages = () => {
 
   const columns = useColumns({ filters, onFiltersChange: handleOnFiltersChange });
 
-  const { data: coverageData }: { data: MpaProtectionCoverageStatListResponseDataItem[] } =
-    useGetMpaProtectionCoverageStats(
-      {
-        filters: {
-          location: {
-            code: {
-              $eq: locationsQuery.data?.code,
-            },
+  const { data: mpasData }: { data: MpaListResponseDataItem[] } = useGetMpas(
+    {
+      filters: {
+        location: {
+          code: {
+            $eq: locationsQuery.data?.code,
           },
         },
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        fields: ['area'],
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        populate: {
-          mpaa_establishment_stage: {
-            fields: ['name', 'slug'],
-          },
-          mpa: {
-            fields: ['name', 'wdpaid', 'area'],
-            populate: {
-              protection_status: {
-                fields: ['slug', 'name'],
-              },
+      },
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      populate: {
+        mpaa_establishment_stage: {
+          fields: ['name', 'slug'],
+        },
+        mpa: {
+          fields: ['name', 'wdpaid', 'area'],
+          populate: {
+            protection_status: {
+              fields: ['slug', 'name'],
             },
           },
-          location: {
-            fields: ['code', 'total_marine_area'],
-          },
-          fishing_protection_level: {
-            fields: ['slug', 'name'],
-          },
-          mpaa_protection_level: {
-            fields: ['slug', 'name'],
-          },
         },
-        'pagination[limit]': -1,
-      },
-      {
-        query: {
-          select: ({ data }) => data,
-          placeholderData: { data: [] },
+        location: {
+          fields: ['code', 'total_marine_area'],
         },
-      }
-    );
+        mpaa_protection_level: {
+          fields: ['slug', 'name'],
+        },
+        protection_status: {
+          fields: ['slug', 'name'],
+        },
+      },
+      'pagination[limit]': -1,
+    },
+    {
+      query: {
+        select: ({ data }) => data,
+        placeholderData: { data: [] },
+      },
+    }
+  );
 
   const parsedData = useMemo(() => {
-    return coverageData?.map(({ attributes: coverageStats }) => {
-      const mpa = coverageStats.mpa?.data?.attributes;
+    return mpasData?.map(({ attributes: mpa }) => {
       const protectionStatus = mpa?.protection_status?.data?.attributes;
-      const establishmentStage = coverageStats?.mpaa_establishment_stage?.data?.attributes;
-      const mpaaProtectionLevel = coverageStats?.mpaa_protection_level?.data?.attributes;
-      const fishingProtectionLevel = coverageStats?.fishing_protection_level?.data?.attributes;
+      const establishmentStage = mpa?.mpaa_establishment_stage?.data?.attributes;
+      const mpaaProtectionLevel = mpa?.mpaa_protection_level?.data?.attributes;
 
-      // Calculate coverage percentage
-      const coveragePercentage = (coverageStats.area / locationsQuery.data?.totalMarineArea) * 100;
+      const coveragePercentage = (mpa.area / locationsQuery.data?.totalMarineArea) * 100;
 
       return {
         protectedArea: mpa?.name,
         coverage: coveragePercentage,
         protectedAreaType: protectionStatus?.slug,
         establishmentStage: establishmentStage?.slug || 'N/A',
         protectionLevel: mpaaProtectionLevel?.slug || 'unknown',
-        fishingProtectionLevel: fishingProtectionLevel?.slug,
-        area: coverageStats.area,
+        area: mpa?.area,
       };
     });
-  }, [coverageData, locationsQuery.data]);
+  }, [locationsQuery, mpasData]);
 
   const tableData = useMemo(() => {
     return applyFilters(parsedData, filters);