diff --git a/frontend/src/containers/map/sidebar/main-panel/panels/details/widgets/protection-types/constants.ts b/frontend/src/containers/map/sidebar/main-panel/panels/details/widgets/protection-types/constants.ts deleted file mode 100644 index dc1849d1..00000000 --- a/frontend/src/containers/map/sidebar/main-panel/panels/details/widgets/protection-types/constants.ts +++ /dev/null @@ -1,4 +0,0 @@ -export const PROTECTION_LEVEL_NAME_SUBSTITUTIONS = { - 'fully-highly-protected': 'Fully or highly protected', - 'less-protected-unknown': 'Less protected or unknown', -}; diff --git a/frontend/src/containers/map/sidebar/main-panel/panels/details/widgets/protection-types/index.tsx b/frontend/src/containers/map/sidebar/main-panel/panels/details/widgets/protection-types/index.tsx index 00d290db..c4bd363a 100644 --- a/frontend/src/containers/map/sidebar/main-panel/panels/details/widgets/protection-types/index.tsx +++ b/frontend/src/containers/map/sidebar/main-panel/panels/details/widgets/protection-types/index.tsx @@ -7,11 +7,9 @@ import Widget from '@/components/widget'; import { PROTECTION_TYPES_CHART_COLORS } from '@/constants/protection-types-chart-colors'; import { FCWithMessages } from '@/types'; import { useGetDataInfos } from '@/types/generated/data-info'; -import { useGetLocations } from '@/types/generated/location'; +import { useGetMpaaProtectionLevelStats } from '@/types/generated/mpaa-protection-level-stat'; import type { LocationGroupsDataItemAttributes } from '@/types/generated/strapi.schemas'; -import { PROTECTION_LEVEL_NAME_SUBSTITUTIONS } from './constants'; - type ProtectionTypesWidgetProps = { location: LocationGroupsDataItemAttributes; }; @@ -22,28 +20,20 @@ const ProtectionTypesWidget: FCWithMessages = ({ loc // Get protection levels data for the location const { - data: { data: protectionLevelsData }, - isFetching: isFetchingProtectionLevelsData, - } = useGetLocations( + data: { data: protectionLevelsStatsData }, + isFetching: isFetchingProtectionLevelsStatsData, + } = useGetMpaaProtectionLevelStats( { locale, filters: { - code: location?.code, - }, - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - populate: { - mpaa_protection_level_stats: { - filters: { - mpaa_protection_level: { - slug: 'fully-highly-protected', - }, - }, - populate: { - mpaa_protection_level: '*', - }, + location: { + code: location?.code || 'GLOB', + }, + mpaa_protection_level: { + slug: 'fully-highly-protected', }, }, + populate: '*', 'pagination[limit]': -1, }, { @@ -84,47 +74,42 @@ const ProtectionTypesWidget: FCWithMessages = ({ loc // Go through all the relevant stats, find the last updated one's value const lastUpdated = useMemo(() => { - const protectionLevelStats = - protectionLevelsData[0]?.attributes?.mpaa_protection_level_stats?.data; - const updatedAtValues = protectionLevelStats?.reduce( + const updatedAtValues = protectionLevelsStatsData?.reduce( (acc, curr) => [...acc, curr?.attributes?.updatedAt], [] ); return updatedAtValues?.sort()?.reverse()?.[0]; - }, [protectionLevelsData]); + }, [protectionLevelsStatsData]); // Parse data to display in the chart const widgetChartData = useMemo(() => { - if (!protectionLevelsData.length) return []; + if (!protectionLevelsStatsData.length) return []; + + const parseProtectionLevelStats = (protectionLevelStats) => { + const mpaaProtectionLevel = protectionLevelStats?.mpaa_protection_level?.data?.attributes; + const location = protectionLevelStats?.location?.data?.attributes; + + const barColor = PROTECTION_TYPES_CHART_COLORS[mpaaProtectionLevel?.slug]; - const parsedProtectionLevel = (label, protectionLevel, stats) => { return { - title: label, - slug: protectionLevel.slug, - background: PROTECTION_TYPES_CHART_COLORS[protectionLevel.slug], - totalArea: location.totalMarineArea, - protectedArea: stats?.area, + title: mpaaProtectionLevel?.name, + slug: mpaaProtectionLevel?.slug, + background: barColor, + totalArea: location?.totalMarineArea, + protectedArea: protectionLevelStats?.area, info: metadata?.info, sources: metadata?.sources, }; }; - const parsedMpaaProtectionLevelData = - protectionLevelsData[0]?.attributes?.mpaa_protection_level_stats?.data?.map((entry) => { - const stats = entry?.attributes; - const protectionLevel = stats?.mpaa_protection_level?.data.attributes; - const displayName = - PROTECTION_LEVEL_NAME_SUBSTITUTIONS[protectionLevel.slug] || protectionLevel?.name; - return parsedProtectionLevel(displayName, protectionLevel, stats); - }); - - return parsedMpaaProtectionLevelData; - }, [location, protectionLevelsData, metadata]); + return protectionLevelsStatsData?.map(({ attributes }) => + parseProtectionLevelStats(attributes) + ); + }, [metadata, protectionLevelsStatsData]); const noData = !widgetChartData.length; - - const loading = isFetchingProtectionLevelsData; + const loading = isFetchingProtectionLevelsStatsData; return (