Merge pull request #301 from Vizzuality/SKY30-446-fe-change-how-non-l…

…ocalised-models-are-loaded-through-localised-models

Address issue where the data displayed in the global table would be different depending on locale

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

@@ -53,7 +53,12 @@ const GlobalRegionalTable: FCWithMessages = () => {
   // Get location data and calculate data to display on the table
   const { data: locationsData }: { data: LocationListResponseDataItem[] } = useGetLocations(
     {
-      locale,
+      // We will use the data from the `localizations` field because the models “Protection Coverage
+      // Stats” and “Mpaa Protection Level Stats” are not localised and their relationship to the
+      // “Location” model only points to a specific localised version. As such, we're forced to load
+      // all the locales of the “Location” model and then figure out which version has the relation
+      // to the other model.
+      locale: 'en',
       filters:
         locationsQuery.data?.type === 'region'
           ? {
@@ -74,6 +79,7 @@ const GlobalRegionalTable: FCWithMessages = () => {
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
       populate: {
+        // This part if for the English version only
         protection_coverage_stats: {
           fields: ['cumSumProtectedArea', 'protectedAreasCount', 'year'],
           populate: {
@@ -90,12 +96,42 @@ const GlobalRegionalTable: FCWithMessages = () => {
             },
           },
         },
-        fishing_protection_level_stats: {
-          fields: ['area'],
+        // fishing_protection_level_stats: {
+        //   fields: ['area'],
+        //   populate: {
+        //     fishing_protection_level: {
+        //       fields: ['slug', 'name'],
+        //     },
+        //   },
+        // },
+        // This part is for the Spanish and French versions
+        localizations: {
+          fields: ['code', 'name', 'type', 'totalMarineArea', 'locale'],
           populate: {
-            fishing_protection_level: {
-              fields: ['slug', 'name'],
+            protection_coverage_stats: {
+              fields: ['cumSumProtectedArea', 'protectedAreasCount', 'year'],
+              populate: {
+                protection_status: {
+                  fields: ['slug', 'name'],
+                },
+              },
+            },
+            mpaa_protection_level_stats: {
+              fields: ['area'],
+              populate: {
+                mpaa_protection_level: {
+                  fields: ['slug', 'name'],
+                },
+              },
             },
+            // fishing_protection_level_stats: {
+            //   fields: ['area'],
+            //   populate: {
+            //     fishing_protection_level: {
+            //       fields: ['slug', 'name'],
+            //     },
+            //   },
+            // },
           },
         },
       },
@@ -113,16 +149,59 @@ const GlobalRegionalTable: FCWithMessages = () => {
   // Calculate table data
   const parsedData = useMemo(() => {
     return locationsData.map(({ attributes: location }) => {
+      const localizedLocation = [
+        { ...location, locale: 'en' },
+        ...(location.localizations.data.map(
+          // The types below are wrong. There is definitely an `attributes` key inside
+          // `localizations`.
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          (localization) => localization.attributes
+        ) ?? []),
+      ].find((data) => data.locale === locale);
+
       // Base stats needed for calculations
-      const allCoverageStats = location.protection_coverage_stats?.data;
-      const mpaaStats = location.mpaa_protection_level_stats?.data;
-      const lfpStats = location.fishing_protection_level_stats?.data;
+      const protectionCoverageStats =
+        [
+          location.protection_coverage_stats.data,
+          ...(location.localizations.data.map(
+            // The types below are wrong. There is definitely an `attributes` key inside
+            // `localizations`.
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            (localization) => localization.attributes.protection_coverage_stats.data
+          ) ?? []),
+        ].find((data) => data?.length) ?? [];
+
+      const mpaaProtectionLevelStats =
+        [
+          location.mpaa_protection_level_stats.data,
+          ...(location.localizations.data.map(
+            // The types below are wrong. There is definitely an `attributes` key inside
+            // `localizations`.
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            (localization) => localization.attributes.mpaa_protection_level_stats.data
+          ) ?? []),
+        ].find((data) => data?.length) ?? [];
+
+      // const fishingProtectionLevelStats =
+      //   [
+      //     location.fishing_protection_level_stats.data,
+      //     ...(location.localizations.data.map(
+      //       // The types below are wrong. There is definitely an `attributes` key inside
+      //       // `localizations`.
+      //       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      //       // @ts-ignore
+      //       (localization) => localization.attributes.fishing_protection_level_stats.data
+      //     ) ?? []),
+      //   ].find((data) => data?.length) ?? [];
 
       // Find coverage stats data for the last available year in the data
       const lastCoverageDataYear = Math.max(
-        ...allCoverageStats.map(({ attributes }) => attributes.year)
+        ...protectionCoverageStats.map(({ attributes }) => attributes.year)
       );
-      const coverageStats = allCoverageStats.filter(
+      const coverageStats = protectionCoverageStats.filter(
         ({ attributes }) => attributes.year === lastCoverageDataYear
       );
 
@@ -149,7 +228,7 @@ const GlobalRegionalTable: FCWithMessages = () => {
       const percentageOECMs = (numOECMs * 100) / (numMPAs + numOECMs);
 
       // Fully/Highly Protected calculations
-      const fullyHighlyProtected = mpaaStats.filter(
+      const fullyHighlyProtected = mpaaProtectionLevelStats.filter(
         ({ attributes }) =>
           attributes?.mpaa_protection_level?.data?.attributes?.slug === 'fully-highly-protected'
       );
@@ -161,34 +240,34 @@ const GlobalRegionalTable: FCWithMessages = () => {
         (fullyHighlyProtectedArea * 100) / location.totalMarineArea;
 
       // Highly Protected LFP calculations
-      const lfpHighProtected = lfpStats.filter(
-        ({ attributes }) =>
-          attributes?.fishing_protection_level?.data?.attributes?.slug === 'highly'
-      );
-      const lfpHighProtectedArea = lfpHighProtected.reduce(
-        (acc, { attributes }) => acc + attributes?.area,
-        0
-      );
-      const lfpHighProtectedPercentage = (lfpHighProtectedArea * 100) / location.totalMarineArea;
+      // const lfpHighProtected = fishingProtectionLevelStats.filter(
+      //   ({ attributes }) =>
+      //     attributes?.fishing_protection_level?.data?.attributes?.slug === 'highly'
+      // );
+      // const lfpHighProtectedArea = lfpHighProtected.reduce(
+      //   (acc, { attributes }) => acc + attributes?.area,
+      //   0
+      // );
+      // const lfpHighProtectedPercentage = (lfpHighProtectedArea * 100) / location.totalMarineArea;
 
       // Global contributions calculations
       const globalContributionPercentage =
         (protectedArea * 100) / globalLocationQuery?.data?.totalMarineArea;
 
       return {
-        location: location.name,
+        location: localizedLocation.name,
         locationCode: location.code,
         coverage: coveragePercentage,
         area: protectedArea,
         locationType: location.type,
         mpas: percentageMPAs,
         oecms: percentageOECMs,
         fullyHighlyProtected: fullyHighlyProtectedAreaPercentage,
-        highlyProtectedLfp: lfpHighProtectedPercentage,
+        // highlyProtectedLfp: lfpHighProtectedPercentage,
         globalContribution: globalContributionPercentage,
       };
     });
-  }, [globalLocationQuery?.data, locationsData]);
+  }, [locale, globalLocationQuery?.data, locationsData]);
 
   const tableData = parsedData;