Merge pull request #54 from Vizzuality/SKY30-103-fe-implement-the-dat…

…a-table

[SKY30-103] Implement the National/High Seas data table

frontend/orval.config.ts

@@ -32,6 +32,7 @@ module.exports = {
           'Mpaa-protection-level',
           'Mpaa-protection-level-stat',
           'Mpaa-establishment-stage',
+          'Mpa-protection-coverage-stat',
           'Mpaa-establishment-stage-status',
           'Protection-coverage-stat',
           'Protection-status',

frontend/src/containers/data-tool/content/details/helpers.ts

@@ -0,0 +1,9 @@
+export const applyFilters = (data, filters) => {
+  const filteredData = data.filter((item) => {
+    for (const key in filters) {
+      if (!filters[key].includes(item[key])) return false;
+    }
+    return true;
+  });
+  return filteredData;
+};

frontend/src/containers/data-tool/content/details/table/sorting-button/index.tsx

@@ -3,12 +3,15 @@ import { ArrowDownNarrowWide, ArrowUpNarrowWide, ArrowUpDown } from 'lucide-reac
 
 import { Button } from '@/components/ui/button';
 import { GlobalRegionalTableColumns } from '@/containers/data-tool/content/details/tables/global-regional/useColumns';
+import { NationalHighseasTableColumns } from '@/containers/data-tool/content/details/tables/national-highseas/useColumns';
 
 const BUTTON_CLASSNAMES = '-ml-4';
 const ICON_CLASSNAMES = 'h-4 w-4';
 
 type SortingButtonProps = {
-  column: Column<GlobalRegionalTableColumns, unknown>;
+  column:
+    | Column<GlobalRegionalTableColumns, unknown>
+    | Column<NationalHighseasTableColumns, unknown>;
 };
 
 const SortingButton: React.FC<SortingButtonProps> = ({ column }) => {

frontend/src/containers/data-tool/content/details/tables/global-regional/index.tsx

@@ -8,6 +8,8 @@ import { locationAtom } from '@/store/location';
 import { useGetLocations } from '@/types/generated/location';
 import type { LocationListResponseDataItem } from '@/types/generated/strapi.schemas';
 
+import { applyFilters } from '@/containers/data-tool/content/details/helpers';
+
 const DATA_YEAR = 2023;
 
 const GlobalRegionalTable: React.FC = () => {
@@ -198,13 +200,7 @@ const GlobalRegionalTable: React.FC = () => {
   }, [globalStats, locationsData]);
 
   const tableData = useMemo(() => {
-    const filteredData = parsedData.filter((item) => {
-      for (const key in filters) {
-        return filters[key].includes(item[key]);
-      }
-      return true;
-    });
-    return filteredData;
+    return applyFilters(parsedData, filters);
   }, [filters, parsedData]);
 
   return <Table columns={columns} data={tableData} />;

frontend/src/containers/data-tool/content/details/tables/global-regional/useColumns.tsx

@@ -2,11 +2,11 @@ import { useMemo } from 'react';
 
 import { ColumnDef } from '@tanstack/react-table';
 
-import { LOCATION_TYPES_FILTER_OPTIONS } from '@/containers/data-tool/constants';
 import FiltersButton from '@/containers/data-tool/content/details/table/filters-button';
 import HeaderItem from '@/containers/data-tool/content/details/table/header-item';
 import { cellFormatter } from '@/containers/data-tool/content/details/table/helpers';
 import SortingButton from '@/containers/data-tool/content/details/table/sorting-button';
+import useFiltersOptions from '@/containers/data-tool/content/details/tables/global-regional/useFiltersOptions';
 
 export type GlobalRegionalTableColumns = {
   location: string;
@@ -26,6 +26,8 @@ type UseColumnsProps = {
 };
 
 const useColumns = ({ filters, onFiltersChange }: UseColumnsProps) => {
+  const { locationTypes: locationTypesOptions } = useFiltersOptions();
+
   const columns: ColumnDef<GlobalRegionalTableColumns>[] = useMemo(() => {
     return [
       {
@@ -64,7 +66,7 @@ const useColumns = ({ filters, onFiltersChange }: UseColumnsProps) => {
           <HeaderItem>
             <FiltersButton
               field={column.id}
-              options={LOCATION_TYPES_FILTER_OPTIONS}
+              options={locationTypesOptions}
               values={filters[column.id]}
               onChange={onFiltersChange}
             />

frontend/src/containers/data-tool/content/details/tables/global-regional/useFiltersOptions.ts

@@ -0,0 +1,9 @@
+import { LOCATION_TYPES_FILTER_OPTIONS } from '@/containers/data-tool/constants';
+
+const useFiltersOptions = () => {
+  return {
+    locationTypes: LOCATION_TYPES_FILTER_OPTIONS,
+  };
+};
+
+export default useFiltersOptions;

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

@@ -1,11 +1,111 @@
+import { useMemo, useState } from 'react';
+
+import { useAtomValue } from 'jotai';
+
 import Table from '@/containers/data-tool/content/details/table';
-import columns from '@/containers/data-tool/content/details/tables/national-highseas/columns';
-import mockedData from '@/containers/data-tool/content/details/tables/national-highseas/mocked-data';
+import useColumns from '@/containers/data-tool/content/details/tables/national-highseas/useColumns';
+import { locationAtom } from '@/store/location';
+import { useGetMpaProtectionCoverageStats } from '@/types/generated/mpa-protection-coverage-stat';
+import { MpaProtectionCoverageStatListResponseDataItem } from '@/types/generated/strapi.schemas';
+import { applyFilters } from '@/containers/data-tool/content/details/helpers';
 
 const NationalHighseasTable: React.FC = () => {
-  const data = mockedData;
+  const location = useAtomValue(locationAtom);
+
+  const [filters, setFilters] = useState({
+    // ! This shouldn't be hardcoded. The setup needs to be able to work the same without any default filters here.
+    protectedAreaType: ['mpa', 'oecm'],
+    establishmentStage: [
+      'designated-implemented',
+      'designated-unimplemented',
+      'proposed-committed',
+    ],
+    protectionLevel: ['fully-highly-protected', 'less-protected-unknown'],
+    fishingProtectionLevel: ['highly', 'moderately', 'less'],
+  });
+
+  const handleOnFiltersChange = (field, values) => {
+    setFilters({ ...filters, [field]: values });
+  };
+
+  const columns = useColumns({ filters, onFiltersChange: handleOnFiltersChange });
+
+  const { data: coverageData }: { data: MpaProtectionCoverageStatListResponseDataItem[] } =
+    useGetMpaProtectionCoverageStats(
+      {
+        filters: {
+          location: {
+            code: {
+              $eq: location.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: {
+          mpa: {
+            fields: ['name', 'wdpaid', 'area'],
+            populate: {
+              mpaa_establishment_stage: {
+                fields: ['slug', 'name'],
+              },
+              protection_status: {
+                fields: ['slug', 'name'],
+              },
+            },
+          },
+          location: {
+            fields: ['code', 'total_marine_area'],
+          },
+          fishing_protection_level: {
+            fields: ['slug', 'name'],
+          },
+          mpaa_protection_level: {
+            fields: ['slug', 'name'],
+          },
+        },
+      },
+      {
+        query: {
+          select: ({ data }) => data,
+          placeholderData: { data: [] },
+        },
+      }
+    );
+
+  const parsedData = useMemo(() => {
+    return coverageData.map(({ attributes: coverageStats }) => {
+      const mpa = coverageStats?.mpa?.data?.attributes;
+      const protectionStatus = mpa?.protection_status?.data?.attributes;
+      const establishmentStage = mpa?.mpaa_establishment_stage?.data?.attributes;
+      const mpaaProtectionLevel = coverageStats?.mpaa_protection_level?.data?.attributes;
+      const fishingProtectionLevel = coverageStats?.fishing_protection_level?.data?.attributes;
+      const coverageArea = coverageStats?.area;
+      const location = coverageStats?.location?.data?.attributes;
+
+      // Calculate coverage percentage
+      const coveragePercentage = (coverageArea / location?.totalMarineArea) * 100;
+
+      return {
+        protectedArea: mpa.name,
+        coverage: coveragePercentage,
+        protectedAreaType: protectionStatus?.slug,
+        establishmentStage: establishmentStage?.slug,
+        protectionLevel: mpaaProtectionLevel?.slug,
+        fishingProtectionLevel: fishingProtectionLevel?.slug,
+        area: coverageArea,
+      };
+    });
+  }, [coverageData]);
+
+  const tableData = useMemo(() => {
+    return applyFilters(parsedData, filters);
+  }, [filters, parsedData]);
 
-  return <Table columns={columns} data={data} />;
+  return <Table columns={columns} data={tableData} />;
 };
 
 export default NationalHighseasTable;