From 2605478289fd7e6d2432d6afd821b574c8415c52 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Gonz=C3=A1lez=20Mu=C3=B1oz?= Date: Wed, 13 Dec 2023 08:17:48 +0100 Subject: [PATCH] fixes getting location name --- .../containers/map/content/details/index.tsx | 35 ++++++++++++------- .../details/tables/global-regional/index.tsx | 35 ++++++++++--------- .../tables/national-highseas/index.tsx | 33 +++++++++-------- .../map/sidebar/analysis/widget/index.tsx | 1 - .../containers/map/sidebar/details/index.tsx | 24 ++++++++----- .../details/location-selector/index.tsx | 22 +++++++----- 6 files changed, 88 insertions(+), 62 deletions(-) diff --git a/frontend/src/containers/map/content/details/index.tsx b/frontend/src/containers/map/content/details/index.tsx index 9ff995d3..6fafcc30 100644 --- a/frontend/src/containers/map/content/details/index.tsx +++ b/frontend/src/containers/map/content/details/index.tsx @@ -2,12 +2,10 @@ import { useMemo } from 'react'; import { useRouter } from 'next/router'; -import { useQueryClient } from '@tanstack/react-query'; - import { Button } from '@/components/ui/button'; import tablesSettings from '@/containers/map/content/details/tables-settings'; import { useSyncMapContentSettings } from '@/containers/map/sync-settings'; -import { LocationGroupsDataItemAttributes } from '@/types/generated/strapi.schemas'; +import { useGetLocations } from '@/types/generated/location'; const MapDetails: React.FC = () => { const [, setSettings] = useSyncMapContentSettings(); @@ -15,12 +13,19 @@ const MapDetails: React.FC = () => { query: { locationCode }, } = useRouter(); - const queryClient = useQueryClient(); - - const location = queryClient.getQueryData([ - 'locations', - locationCode, - ]); + const locationsQuery = useGetLocations( + { + filters: { + code: locationCode, + }, + }, + { + query: { + queryKey: ['locations', locationCode], + select: ({ data }) => data?.[0]?.attributes, + }, + } + ); const handleOnCloseClick = () => { setSettings((prevSettings) => ({ ...prevSettings, showDetails: false })); @@ -29,20 +34,24 @@ const MapDetails: React.FC = () => { const table = useMemo(() => { if (location) { // TODO: Improve to support more entries (although not needed right now) - const tableSettings = tablesSettings.worldwideRegion.locationTypes.includes(location.type) + const tableSettings = tablesSettings.worldwideRegion.locationTypes.includes( + locationsQuery.data?.type + ) ? tablesSettings.worldwideRegion : tablesSettings.countryHighseas; const parsedTitle = - tableSettings.title[location.type]?.replace('{location}', location.name) || - tableSettings.title.fallback; + tableSettings.title[locationsQuery.data?.type]?.replace( + '{location}', + locationsQuery.data?.name + ) || tableSettings.title.fallback; return { title: parsedTitle, component: tableSettings.component, }; } - }, [location]); + }, [locationsQuery.data]); return (
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 5763f1fc..f629aeab 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 @@ -2,28 +2,30 @@ import { useMemo, useState } from 'react'; import { useRouter } from 'next/router'; -import { useQueryClient } from '@tanstack/react-query'; - import { applyFilters } from '@/containers/map/content/details/helpers'; import Table from '@/containers/map/content/details/table'; import useColumns from '@/containers/map/content/details/tables/global-regional/useColumns'; import { useGetLocations } from '@/types/generated/location'; -import type { - LocationGroupsDataItemAttributes, - LocationListResponseDataItem, -} from '@/types/generated/strapi.schemas'; +import type { LocationListResponseDataItem } from '@/types/generated/strapi.schemas'; const GlobalRegionalTable: React.FC = () => { const { query: { locationCode }, } = useRouter(); - const queryClient = useQueryClient(); - - const mapLocation = queryClient.getQueryData([ - 'locations', - locationCode, - ]); + const locationsQuery = useGetLocations( + { + filters: { + code: locationCode, + }, + }, + { + query: { + queryKey: ['locations', locationCode], + select: ({ data }) => data?.[0]?.attributes, + }, + } + ); const [filters, setFilters] = useState({ // ! This shouldn't be hardcoded. The setup needs to be able to work the same without any default filters here. @@ -40,11 +42,11 @@ const GlobalRegionalTable: React.FC = () => { const { data: locationsData }: { data: LocationListResponseDataItem[] } = useGetLocations( { filters: - mapLocation?.type === 'region' + locationsQuery.data?.type === 'region' ? { groups: { code: { - $eq: mapLocation?.code, + $eq: locationsQuery.data?.code, }, }, } @@ -154,7 +156,8 @@ const GlobalRegionalTable: React.FC = () => { const lfpHighProtectedPercentage = (lfpHighProtectedArea * 100) / location.totalMarineArea; // Global contributions calculations - const globalContributionPercentage = (protectedArea * 100) / mapLocation.totalMarineArea; + const globalContributionPercentage = + (protectedArea * 100) / locationsQuery.data?.totalMarineArea; return { location: location.name, @@ -169,7 +172,7 @@ const GlobalRegionalTable: React.FC = () => { globalContribution: globalContributionPercentage, }; }); - }, [mapLocation, locationsData]); + }, [locationsQuery.data, locationsData]); const tableData = useMemo(() => { return applyFilters(parsedData, filters); diff --git a/frontend/src/containers/map/content/details/tables/national-highseas/index.tsx b/frontend/src/containers/map/content/details/tables/national-highseas/index.tsx index 64b0205d..e058cb9f 100644 --- a/frontend/src/containers/map/content/details/tables/national-highseas/index.tsx +++ b/frontend/src/containers/map/content/details/tables/national-highseas/index.tsx @@ -2,28 +2,31 @@ import { useMemo, useState } from 'react'; import { useRouter } from 'next/router'; -import { useQueryClient } from '@tanstack/react-query'; - import { applyFilters } from '@/containers/map/content/details/helpers'; import Table from '@/containers/map/content/details/table'; import useColumns from '@/containers/map/content/details/tables/national-highseas/useColumns'; +import { useGetLocations } from '@/types/generated/location'; import { useGetMpaProtectionCoverageStats } from '@/types/generated/mpa-protection-coverage-stat'; -import { - LocationGroupsDataItemAttributes, - MpaProtectionCoverageStatListResponseDataItem, -} from '@/types/generated/strapi.schemas'; +import { MpaProtectionCoverageStatListResponseDataItem } from '@/types/generated/strapi.schemas'; const NationalHighseasTable: React.FC = () => { const { query: { locationCode }, } = useRouter(); - const queryClient = useQueryClient(); - - const mapLocation = queryClient.getQueryData([ - 'locations', - locationCode, - ]); + const locationsQuery = useGetLocations( + { + filters: { + code: locationCode, + }, + }, + { + query: { + queryKey: ['locations', locationCode], + select: ({ data }) => data?.[0]?.attributes, + }, + } + ); const [filters, setFilters] = useState({ // ! This shouldn't be hardcoded. The setup needs to be able to work the same without any default filters here. @@ -50,7 +53,7 @@ const NationalHighseasTable: React.FC = () => { filters: { location: { code: { - $eq: mapLocation?.code, + $eq: locationsQuery.data?.code, }, }, }, @@ -100,7 +103,7 @@ const NationalHighseasTable: React.FC = () => { const fishingProtectionLevel = coverageStats?.fishing_protection_level?.data?.attributes; // Calculate coverage percentage - const coveragePercentage = (coverageStats.area / mapLocation.totalMarineArea) * 100; + const coveragePercentage = (coverageStats.area / locationsQuery.data?.totalMarineArea) * 100; return { protectedArea: mpa?.name, @@ -112,7 +115,7 @@ const NationalHighseasTable: React.FC = () => { area: mpa?.area, }; }); - }, [coverageData, mapLocation]); + }, [coverageData, locationsQuery.data]); const tableData = useMemo(() => { return applyFilters(parsedData, filters); diff --git a/frontend/src/containers/map/sidebar/analysis/widget/index.tsx b/frontend/src/containers/map/sidebar/analysis/widget/index.tsx index 021f97cb..e854c74d 100644 --- a/frontend/src/containers/map/sidebar/analysis/widget/index.tsx +++ b/frontend/src/containers/map/sidebar/analysis/widget/index.tsx @@ -55,7 +55,6 @@ const AnalysisWidget: React.FC = () => { query: { placeholderData: { data: [] }, select: ({ data }) => data, - staleTime: Infinity, }, } ); diff --git a/frontend/src/containers/map/sidebar/details/index.tsx b/frontend/src/containers/map/sidebar/details/index.tsx index 8f0e7c66..bb234487 100644 --- a/frontend/src/containers/map/sidebar/details/index.tsx +++ b/frontend/src/containers/map/sidebar/details/index.tsx @@ -1,10 +1,8 @@ import { useRouter } from 'next/router'; -import { useQueryClient } from '@tanstack/react-query'; - import { useSyncMapContentSettings } from '@/containers/map/sync-settings'; import { cn } from '@/lib/classnames'; -import { LocationGroupsDataItemAttributes } from '@/types/generated/strapi.schemas'; +import { useGetLocations } from '@/types/generated/location'; import DetailsButton from './details-button'; import LocationSelector from './location-selector'; @@ -14,19 +12,27 @@ const SidebarDetails: React.FC = () => { const { query: { locationCode }, } = useRouter(); - const queryClient = useQueryClient(); const [{ showDetails }] = useSyncMapContentSettings(); - const location = queryClient.getQueryData([ - 'locations', - locationCode, - ]); + const locationsQuery = useGetLocations( + { + filters: { + code: locationCode, + }, + }, + { + query: { + queryKey: ['locations', locationCode], + select: ({ data }) => data?.[0]?.attributes, + }, + } + ); return ( <>
-

{location?.name}

+

{locationsQuery.data?.name}

diff --git a/frontend/src/containers/map/sidebar/details/location-selector/index.tsx b/frontend/src/containers/map/sidebar/details/location-selector/index.tsx index fbf88a7e..6b5a597d 100644 --- a/frontend/src/containers/map/sidebar/details/location-selector/index.tsx +++ b/frontend/src/containers/map/sidebar/details/location-selector/index.tsx @@ -2,7 +2,6 @@ import { useCallback, useState } from 'react'; import { useRouter } from 'next/router'; -import { useQueryClient } from '@tanstack/react-query'; import { useSetAtom } from 'jotai'; import { Check } from 'lucide-react'; @@ -34,12 +33,20 @@ const LocationSelector: React.FC = ({ className }) => { // @ts-expect-error to work properly, strict mode should be enabled const setLocationBBox = useSetAtom(bboxLocation); - const queryClient = useQueryClient(); + const locationsQuery = useGetLocations( + { + filters: { + code: locationCode, + }, + }, + { + query: { + queryKey: ['locations', locationCode], + select: ({ data }) => data?.[0]?.attributes, + }, + } + ); - const location = queryClient.getQueryData([ - 'locations', - locationCode, - ]); const searchParams = useMapSearchParams(); const [locationPopoverOpen, setLocationPopoverOpen] = useState(false); @@ -52,7 +59,6 @@ const LocationSelector: React.FC = ({ className }) => { query: { placeholderData: { data: [] }, select: ({ data }) => data, - staleTime: Infinity, }, } ); @@ -98,7 +104,7 @@ const LocationSelector: React.FC = ({ className }) => { {name}