Merge pull request #297 from Vizzuality/SKY30-441-modify-and-reactiva…

…te-protected-seas-widget

Add the Fishing Protection widget back

frontend/src/containers/map/sidebar/main-panel/panels/details/widgets/fishing-protection/index.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 
-import { useLocale } from 'next-intl';
+import { useLocale, useTranslations } from 'next-intl';
 
 import HorizontalBarChart from '@/components/charts/horizontal-bar-chart';
 import Widget from '@/components/widget';
@@ -9,11 +9,12 @@ import { useGetDataInfos } from '@/types/generated/data-info';
 import { useGetLocations } from '@/types/generated/location';
 import type { LocationGroupsDataItemAttributes } from '@/types/generated/strapi.schemas';
 
-type ProtectionTypesWidgetProps = {
+type FishingProtectionWidgetProps = {
   location: LocationGroupsDataItemAttributes;
 };
 
-const ProtectionTypesWidget: React.FC<ProtectionTypesWidgetProps> = ({ location }) => {
+const FishingProtectionWidget: React.FC<FishingProtectionWidgetProps> = ({ location }) => {
+  const t = useTranslations('containers.map-sidebar-main-panel');
   const locale = useLocale();
 
   // Get protection levels data for the location
@@ -22,13 +23,18 @@ const ProtectionTypesWidget: React.FC<ProtectionTypesWidgetProps> = ({ location
     isFetching: isFetchingProtectionLevelsData,
   } = useGetLocations(
     {
-      locale,
+      // We will use the data from the `localizations` field because the model “Fishing Protection
+      // Level Stats” is not localised and its 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: {
         code: location?.code,
       },
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
       populate: {
+        // This part if for the English version only
         fishing_protection_level_stats: {
           filters: {
             fishing_protection_level: {
@@ -39,6 +45,21 @@ const ProtectionTypesWidget: React.FC<ProtectionTypesWidgetProps> = ({ location
             fishing_protection_level: '*',
           },
         },
+        // This part is for the Spanish and French versions
+        localizations: {
+          populate: {
+            fishing_protection_level_stats: {
+              filters: {
+                fishing_protection_level: {
+                  slug: 'highly',
+                },
+              },
+              populate: {
+                fishing_protection_level: '*',
+              },
+            },
+          },
+        },
       },
       'pagination[limit]': -1,
     },
@@ -108,35 +129,45 @@ const ProtectionTypesWidget: React.FC<ProtectionTypesWidgetProps> = ({ location
   const widgetChartData = useMemo(() => {
     if (!protectionLevelsData.length) return [];
 
-    const parsedProtectionLevel = (label, protectionLevel, stats) => {
+    const parsedProtectionLevel = (label: string, protectionLevel, stats) => {
       return {
         title: label,
         slug: protectionLevel.slug,
         background: FISHING_PROTECTION_CHART_COLORS[protectionLevel.slug],
-        totalArea: location.totalMarineArea,
+        totalArea: (stats?.area / stats?.pct) * 100,
         protectedArea: stats?.area,
         info: metadata?.info,
         sources: metadata?.sources,
       };
     };
 
-    const parsedFishingProtectionLevelData =
-      protectionLevelsData[0]?.attributes?.fishing_protection_level_stats?.data?.map((entry) => {
-        const stats = entry?.attributes;
-        const protectionLevel = stats?.fishing_protection_level?.data.attributes;
-        return parsedProtectionLevel('Highly protected from fishing', protectionLevel, stats);
-      });
+    const fishingProtectionLevelStats = [
+      protectionLevelsData[0]?.attributes?.fishing_protection_level_stats.data,
+      ...(protectionLevelsData[0]?.attributes?.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);
+
+    const parsedFishingProtectionLevelData = fishingProtectionLevelStats?.map((stats) => {
+      const data = stats?.attributes;
+      const protectionLevel = data?.fishing_protection_level?.data.attributes;
+      return parsedProtectionLevel(t('highly-protected-from-fishing'), protectionLevel, data);
+    });
 
     return parsedFishingProtectionLevelData;
-  }, [location, protectionLevelsData, metadata]);
+  }, [t, protectionLevelsData, metadata]);
 
   const noData = !widgetChartData.length;
 
   const loading = isFetchingProtectionLevelsData;
 
   return (
     <Widget
-      title="Fishing Protection"
+      title={t('fishing-protection')}
       lastUpdated={protectionLevelsData[0]?.attributes?.updatedAt}
       noData={noData}
       loading={loading}
@@ -150,4 +181,4 @@ const ProtectionTypesWidget: React.FC<ProtectionTypesWidgetProps> = ({ location
   );
 };
 
-export default ProtectionTypesWidget;
+export default FishingProtectionWidget;

frontend/src/containers/map/sidebar/main-panel/panels/details/widgets/index.tsx

@@ -7,12 +7,12 @@ import { cn } from '@/lib/classnames';
 import { FCWithMessages } from '@/types';
 import { useGetLocations } from '@/types/generated/location';
 
+import FishingProtectionWidget from './fishing-protection';
 import HabitatWidget from './habitat';
 import MarineConservationWidget from './marine-conservation';
 import ProtectionTypesWidget from './protection-types';
 
 // import EstablishmentStagesWidget from './establishment-stages';
-// import FishingProtectionWidget from './fishing-protection';
 
 const DetailsWidgets: FCWithMessages = () => {
   const locale = useLocale();
@@ -39,7 +39,7 @@ const DetailsWidgets: FCWithMessages = () => {
     >
       <MarineConservationWidget location={locationsData?.data[0]?.attributes} />
       <ProtectionTypesWidget location={locationsData?.data[0]?.attributes} />
-      {/* <FishingProtectionWidget location={locationsData?.data[0]?.attributes} /> */}
+      <FishingProtectionWidget location={locationsData?.data[0]?.attributes} />
       {/* <EstablishmentStagesWidget location={locationsData?.data[0]?.attributes} /> */}
       <HabitatWidget location={locationsData?.data[0]?.attributes} />
     </div>

frontend/translations/en.json

@@ -215,7 +215,9 @@
       "new-added-area": "New added area",
       "administrative-boundary": "Administrative boundary",
       "national-level-contribution": "National level contribution",
-      "global": "Global"
+      "global": "Global",
+      "fishing-protection": "Fishing Protection",
+      "highly-protected-from-fishing": "Highly protected from fishing"
     },
     "map-sidebar-layers-panel": {
       "layers": "Layers",