From 080265d27f80eff9a04e44aefcec70054aae2332 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cl=C3=A9ment=20Prod=27homme?= Date: Mon, 9 Sep 2024 15:21:32 +0200 Subject: [PATCH] Address empty global table depending on locale --- .../details/tables/global-regional/index.tsx | 125 ++++++++++++++---- 1 file changed, 102 insertions(+), 23 deletions(-) diff --git a/frontend/src/containers/map/content/details/tables/global-regional/index.tsx b/frontend/src/containers/map/content/details/tables/global-regional/index.tsx index 4b5056c9..35759a45 100644 --- a/frontend/src/containers/map/content/details/tables/global-regional/index.tsx +++ b/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,22 +240,22 @@ 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, @@ -184,11 +263,11 @@ const GlobalRegionalTable: FCWithMessages = () => { mpas: percentageMPAs, oecms: percentageOECMs, fullyHighlyProtected: fullyHighlyProtectedAreaPercentage, - highlyProtectedLfp: lfpHighProtectedPercentage, + // highlyProtectedLfp: lfpHighProtectedPercentage, globalContribution: globalContributionPercentage, }; }); - }, [globalLocationQuery?.data, locationsData]); + }, [locale, globalLocationQuery?.data, locationsData]); const tableData = parsedData;