diff --git a/frontend/src/containers/map/content/map/index.tsx b/frontend/src/containers/map/content/map/index.tsx index 5e03a41f..cb2ff667 100644 --- a/frontend/src/containers/map/content/map/index.tsx +++ b/frontend/src/containers/map/content/map/index.tsx @@ -5,7 +5,6 @@ import { useMap } from 'react-map-gl'; import dynamic from 'next/dynamic'; import { useParams } from 'next/navigation'; -import { useQueryClient } from '@tanstack/react-query'; import { useAtomValue, useSetAtom } from 'jotai'; import Map, { ZoomControls, Attributions } from '@/components/map'; @@ -25,7 +24,7 @@ import { popupAtom, } from '@/containers/map/store'; import { useGetLayers } from '@/types/generated/layer'; -import { LocationGroupsDataItemAttributes } from '@/types/generated/strapi.schemas'; +import { useGetLocations } from '@/types/generated/location'; import { LayerTyped } from '@/types/layers'; const LayerManager = dynamic(() => import('@/containers/map/content/map/layer-manager'), { @@ -41,12 +40,20 @@ const MainMap: React.FC = () => { const { locationCode } = useParams(); const locationBbox = useAtomValue(bboxLocation); const hoveredPolygonId = useRef[0] | null>(null); - const queryClient = useQueryClient(); - const locationsQuery = queryClient.getQueryState([ - 'locations', - locationCode, - ]); + const locationsQuery = useGetLocations( + { + filters: { + code: locationCode, + }, + }, + { + query: { + queryKey: ['locations', locationCode], + select: ({ data }) => data?.[0]?.attributes, + }, + } + ); const layersInteractive = useAtomValue(layersInteractiveAtom); const layersInteractiveIds = useAtomValue(layersInteractiveIdsAtom); diff --git a/frontend/src/containers/map/sidebar/widgets/index.tsx b/frontend/src/containers/map/sidebar/widgets/index.tsx index af7a7c9b..a649b5a3 100644 --- a/frontend/src/containers/map/sidebar/widgets/index.tsx +++ b/frontend/src/containers/map/sidebar/widgets/index.tsx @@ -1,8 +1,6 @@ import { useRouter } from 'next/router'; -import { useQueryClient } from '@tanstack/react-query'; - -import { LocationGroupsDataItemAttributes } from '@/types/generated/strapi.schemas'; +import { useGetLocations } from '@/types/generated/location'; import EstablishmentStagesWidget from './establishment-stages'; import HabitatWidget from './habitat'; @@ -14,19 +12,26 @@ const MapWidgets: 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, + }, + } + ); return (
- - - - + + + +
); }; diff --git a/frontend/src/pages/map/[locationCode].tsx b/frontend/src/pages/map/[locationCode].tsx index 7bb85d82..7e95f2c2 100644 --- a/frontend/src/pages/map/[locationCode].tsx +++ b/frontend/src/pages/map/[locationCode].tsx @@ -5,7 +5,7 @@ import Content from '@/containers/map/content'; import Sidebar from '@/containers/map/sidebar'; import Layout from '@/layouts/map'; import { getLocations } from '@/types/generated/location'; -import { Location, LocationGroupsDataItemAttributes } from '@/types/generated/strapi.schemas'; +import { Location, LocationListResponseDataItem } from '@/types/generated/strapi.schemas'; export const getServerSideProps: GetServerSideProps = async (context) => { const { query } = context; @@ -19,18 +19,15 @@ export const getServerSideProps: GetServerSideProps = async (context) => { }, }); - const location = locationsData?.[0]; + if (!locationsData) return { notFound: true }; - if (!location) return { notFound: true }; - - queryClient.setQueryData( - ['locations', locationCode], - location.attributes - ); + queryClient.setQueryData<{ data: LocationListResponseDataItem[] }>(['locations', locationCode], { + data: locationsData, + }); return { props: { - location: location.attributes, + location: locationsData[0].attributes, dehydratedState: dehydrate(queryClient), }, };