diff --git a/frontend/src/components/map/constants.ts b/frontend/src/components/map/constants.ts index 681e61c6..31d8ebde 100644 --- a/frontend/src/components/map/constants.ts +++ b/frontend/src/components/map/constants.ts @@ -1,7 +1,7 @@ import type { ViewState } from 'react-map-gl'; export const DEFAULT_VIEW_STATE: Partial = { - zoom: 1, + zoom: 2, latitude: 0, longitude: 0, }; diff --git a/frontend/src/containers/map/content/map/index.tsx b/frontend/src/containers/map/content/map/index.tsx index 87d105a1..7e65340e 100644 --- a/frontend/src/containers/map/content/map/index.tsx +++ b/frontend/src/containers/map/content/map/index.tsx @@ -204,12 +204,11 @@ const MainMap: React.FC = () => { diff --git a/frontend/src/containers/map/sidebar/analysis/widget/index.tsx b/frontend/src/containers/map/sidebar/analysis/widget/index.tsx index 38cc642e..e451ca3e 100644 --- a/frontend/src/containers/map/sidebar/analysis/widget/index.tsx +++ b/frontend/src/containers/map/sidebar/analysis/widget/index.tsx @@ -118,8 +118,9 @@ const AnalysisWidget: React.FC = () => { title="Administrative boundary" tooltip={tooltips?.['administrativeBoundary']} /> - - {administrativeBoundaries?.[0]} +{administrativeBoundaries?.length - 1} + + {administrativeBoundaries?.[0]}{' '} + {administrativeBoundaries?.length > 1 && `+${administrativeBoundaries?.length - 1}`}
diff --git a/frontend/src/containers/map/sidebar/details/index.tsx b/frontend/src/containers/map/sidebar/details/index.tsx index bb234487..65e57d0f 100644 --- a/frontend/src/containers/map/sidebar/details/index.tsx +++ b/frontend/src/containers/map/sidebar/details/index.tsx @@ -14,25 +14,17 @@ const SidebarDetails: React.FC = () => { } = useRouter(); const [{ showDetails }] = useSyncMapContentSettings(); - const locationsQuery = useGetLocations( - { - filters: { - code: locationCode, - }, + const { data: locationsData } = useGetLocations({ + filters: { + code: locationCode, }, - { - query: { - queryKey: ['locations', locationCode], - select: ({ data }) => data?.[0]?.attributes, - }, - } - ); + }); return ( <>
-

{locationsQuery.data?.name}

+

{locationsData.data[0]?.attributes?.name}

diff --git a/frontend/src/containers/map/sidebar/details/widgets/establishment-stages/index.tsx b/frontend/src/containers/map/sidebar/details/widgets/establishment-stages/index.tsx index e432a6e9..26285dd9 100644 --- a/frontend/src/containers/map/sidebar/details/widgets/establishment-stages/index.tsx +++ b/frontend/src/containers/map/sidebar/details/widgets/establishment-stages/index.tsx @@ -97,7 +97,9 @@ const EstablishmentStagesWidget: React.FC = ({ l return { title: establishmentStage.name, slug: establishmentStage.slug, - background: `border-box #fff url(${PATTERNS[establishmentStage.slug]})`, + ...(PATTERNS[establishmentStage.slug] && { + background: `border-box #fff url(${PATTERNS[establishmentStage.slug]})`, + }), totalArea: location.totalMarineArea, protectedArea: establishmentStage.area, info: establishmentStage.info, diff --git a/frontend/src/containers/map/sidebar/details/widgets/index.tsx b/frontend/src/containers/map/sidebar/details/widgets/index.tsx index a649b5a3..69c03611 100644 --- a/frontend/src/containers/map/sidebar/details/widgets/index.tsx +++ b/frontend/src/containers/map/sidebar/details/widgets/index.tsx @@ -12,26 +12,18 @@ const MapWidgets: React.FC = () => { query: { locationCode }, } = useRouter(); - const locationsQuery = useGetLocations( - { - filters: { - code: locationCode, - }, + const { data: locationsData } = 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 7e95f2c2..f9607402 100644 --- a/frontend/src/pages/map/[locationCode].tsx +++ b/frontend/src/pages/map/[locationCode].tsx @@ -4,8 +4,8 @@ import type { GetServerSideProps } from 'next'; 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, LocationListResponseDataItem } from '@/types/generated/strapi.schemas'; +import { getGetLocationsQueryKey, getGetLocationsQueryOptions } from '@/types/generated/location'; +import { Location, LocationListResponse } from '@/types/generated/strapi.schemas'; export const getServerSideProps: GetServerSideProps = async (context) => { const { query } = context; @@ -13,21 +13,30 @@ export const getServerSideProps: GetServerSideProps = async (context) => { const queryClient = new QueryClient(); - const { data: locationsData } = await getLocations({ - filters: { - code: locationCode, - }, + await queryClient.prefetchQuery({ + ...getGetLocationsQueryOptions({ + filters: { + code: locationCode, + }, + }), }); - if (!locationsData) return { notFound: true }; + const locationsData = queryClient.getQueryData( + getGetLocationsQueryKey({ + filters: { + code: locationCode, + }, + }) + ); - queryClient.setQueryData<{ data: LocationListResponseDataItem[] }>(['locations', locationCode], { - data: locationsData, - }); + if (!locationsData || !locationsData.data) return { notFound: true }; return { props: { - location: locationsData[0].attributes, + location: locationsData.data[0].attributes || { + code: 'GLOB', + name: 'Global', + }, dehydratedState: dehydrate(queryClient), }, };