From 5ede5ee5fb668ef237a6d851ef7852b7a1e3167f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Gonz=C3=A1lez=20Mu=C3=B1oz?= Date: Tue, 21 Nov 2023 18:30:33 +0100 Subject: [PATCH] fixes issue loading locations due to pagination --- frontend/next.config.js | 2 +- .../data-tool/content/details/index.tsx | 37 +- .../details/tables/global-regional/index.tsx | 29 +- .../tables/national-highseas/index.tsx | 23 +- .../data-tool/content/map/index.tsx | 17 +- .../containers/data-tool/sidebar/index.tsx | 20 +- .../sidebar/location-selector/index.tsx | 39 +- .../sidebar/widgets/habitat/index.tsx | 4 +- .../data-tool/sidebar/widgets/index.tsx | 17 +- .../widgets/marine-conservation/index.tsx | 4 +- .../widgets/protection-types/index.tsx | 4 +- frontend/src/pages/dashboard/[locationId].tsx | 1305 +---------------- .../src/pages/data-tool/[locationCode].tsx | 19 +- frontend/src/store/location.ts | 10 - 14 files changed, 180 insertions(+), 1350 deletions(-) delete mode 100644 frontend/src/store/location.ts diff --git a/frontend/next.config.js b/frontend/next.config.js index d5db0260..1dbdec8f 100644 --- a/frontend/next.config.js +++ b/frontend/next.config.js @@ -39,7 +39,7 @@ const nextConfig = { return [ { source: '/dashboard', - destination: '/dashboard/worldwide', + destination: '/dashboard/GLOB', permanent: false, }, { diff --git a/frontend/src/containers/data-tool/content/details/index.tsx b/frontend/src/containers/data-tool/content/details/index.tsx index f2b8a548..a44dc866 100644 --- a/frontend/src/containers/data-tool/content/details/index.tsx +++ b/frontend/src/containers/data-tool/content/details/index.tsx @@ -1,32 +1,45 @@ import { useMemo } from 'react'; -import { useAtomValue } from 'jotai'; +import { useRouter } from 'next/router'; + +import { useQueryClient } from '@tanstack/react-query'; import { Button } from '@/components/ui/button'; import tablesSettings from '@/containers/data-tool/content/details/tables-settings'; import { useSyncDataToolContentSettings } from '@/containers/data-tool/sync-settings'; -import { locationAtom } from '@/store/location'; +import { LocationGroupsDataItemAttributes } from '@/types/generated/strapi.schemas'; const DataToolDetails: React.FC = () => { const [, setSettings] = useSyncDataToolContentSettings(); - const location = useAtomValue(locationAtom); + const { + query: { locationCode }, + } = useRouter(); + + const queryClient = useQueryClient(); + + const location = queryClient.getQueryData([ + 'locations', + locationCode, + ]); const handleOnCloseClick = () => { setSettings((prevSettings) => ({ ...prevSettings, showDetails: false })); }; const table = useMemo(() => { - // TODO: Improve to support more entries (although not needed right now) - const tableSettings = tablesSettings.worldwideRegion.locationTypes.includes(location.type) - ? tablesSettings.worldwideRegion - : tablesSettings.countryHighseas; + if (location) { + // TODO: Improve to support more entries (although not needed right now) + const tableSettings = tablesSettings.worldwideRegion.locationTypes.includes(location.type) + ? tablesSettings.worldwideRegion + : tablesSettings.countryHighseas; - const parsedTitle = tableSettings.title[location.type].replace('{location}', location.name); + const parsedTitle = tableSettings.title[location.type].replace('{location}', location.name); - return { - title: parsedTitle, - component: tableSettings.component, - }; + return { + title: parsedTitle, + component: tableSettings.component, + }; + } }, [location]); return ( diff --git a/frontend/src/containers/data-tool/content/details/tables/global-regional/index.tsx b/frontend/src/containers/data-tool/content/details/tables/global-regional/index.tsx index 12720a12..45dbba03 100644 --- a/frontend/src/containers/data-tool/content/details/tables/global-regional/index.tsx +++ b/frontend/src/containers/data-tool/content/details/tables/global-regional/index.tsx @@ -1,18 +1,31 @@ import { useMemo, useState } from 'react'; -import { useAtomValue } from 'jotai'; +import { useRouter } from 'next/router'; + +import { useQueryClient } from '@tanstack/react-query'; import { applyFilters } from '@/containers/data-tool/content/details/helpers'; import Table from '@/containers/data-tool/content/details/table'; import useColumns from '@/containers/data-tool/content/details/tables/global-regional/useColumns'; -import { locationAtom } from '@/store/location'; import { useGetLocations } from '@/types/generated/location'; -import type { LocationListResponseDataItem } from '@/types/generated/strapi.schemas'; +import type { + LocationGroupsDataItemAttributes, + LocationListResponseDataItem, +} from '@/types/generated/strapi.schemas'; const DATA_YEAR = 2023; const GlobalRegionalTable: React.FC = () => { - const location = useAtomValue(locationAtom); + const { + query: { locationCode }, + } = useRouter(); + + const queryClient = useQueryClient(); + + const location = queryClient.getQueryData([ + 'locations', + locationCode, + ]); const [filters, setFilters] = useState({ // ! This shouldn't be hardcoded. The setup needs to be able to work the same without any default filters here. @@ -65,7 +78,7 @@ const GlobalRegionalTable: React.FC = () => { ? { groups: { code: { - $eq: location.code, + $eq: location?.code, }, }, } @@ -135,9 +148,9 @@ const GlobalRegionalTable: React.FC = () => { const parsedData = useMemo(() => { return locationsData.map(({ attributes: location }) => { // Base stats needed for calculations - const coverageStats = location?.protection_coverage_stats?.data; - const mpaaStats = location?.mpaa_protection_level_stats?.data; - const lfpStats = location?.fishing_protection_level_stats?.data; + const coverageStats = location.protection_coverage_stats?.data; + const mpaaStats = location.mpaa_protection_level_stats?.data; + const lfpStats = location.fishing_protection_level_stats?.data; // Coverage calculations const protectedArea = coverageStats.reduce( diff --git a/frontend/src/containers/data-tool/content/details/tables/national-highseas/index.tsx b/frontend/src/containers/data-tool/content/details/tables/national-highseas/index.tsx index d9ec86d3..6ea99566 100644 --- a/frontend/src/containers/data-tool/content/details/tables/national-highseas/index.tsx +++ b/frontend/src/containers/data-tool/content/details/tables/national-highseas/index.tsx @@ -1,16 +1,29 @@ import { useMemo, useState } from 'react'; -import { useAtomValue } from 'jotai'; +import { useRouter } from 'next/router'; + +import { useQueryClient } from '@tanstack/react-query'; import { applyFilters } from '@/containers/data-tool/content/details/helpers'; import Table from '@/containers/data-tool/content/details/table'; import useColumns from '@/containers/data-tool/content/details/tables/national-highseas/useColumns'; -import { locationAtom } from '@/store/location'; import { useGetMpaProtectionCoverageStats } from '@/types/generated/mpa-protection-coverage-stat'; -import { MpaProtectionCoverageStatListResponseDataItem } from '@/types/generated/strapi.schemas'; +import { + LocationGroupsDataItemAttributes, + MpaProtectionCoverageStatListResponseDataItem, +} from '@/types/generated/strapi.schemas'; const NationalHighseasTable: React.FC = () => { - const location = useAtomValue(locationAtom); + const { + query: { locationCode }, + } = useRouter(); + + const queryClient = useQueryClient(); + + const location = queryClient.getQueryData([ + 'locations', + locationCode, + ]); const [filters, setFilters] = useState({ // ! This shouldn't be hardcoded. The setup needs to be able to work the same without any default filters here. @@ -36,7 +49,7 @@ const NationalHighseasTable: React.FC = () => { filters: { location: { code: { - $eq: location.code, + $eq: location?.code, }, }, }, diff --git a/frontend/src/containers/data-tool/content/map/index.tsx b/frontend/src/containers/data-tool/content/map/index.tsx index 21137d18..0687dcb0 100644 --- a/frontend/src/containers/data-tool/content/map/index.tsx +++ b/frontend/src/containers/data-tool/content/map/index.tsx @@ -22,8 +22,7 @@ import { popupAtom, } from '@/store/map'; import { useGetLayers } from '@/types/generated/layer'; -import { getGetLocationsQueryOptions } from '@/types/generated/location'; -import { LocationListResponse, LocationResponseDataObject } from '@/types/generated/strapi.schemas'; +import { LocationGroupsDataItemAttributes } from '@/types/generated/strapi.schemas'; import { LayerTyped } from '@/types/layers'; const LayerManager = dynamic(() => import('@/containers/data-tool/content/map/layer-manager'), { @@ -39,7 +38,7 @@ const DataToolMap: React.FC = () => { const { locationCode } = useParams(); const hoveredPolygonId = useRef(null); - const locationData = queryClient.getQueryData([ + const location = queryClient.getQueryData([ 'locations', locationCode, ]); @@ -128,15 +127,11 @@ const DataToolMap: React.FC = () => { } }, [map, hoveredPolygonId]); - const bounds = customBbox ?? (locationData?.attributes?.bounds as LngLatBoundsLike); + const bounds = customBbox ?? (location?.bounds as LngLatBoundsLike); useEffect(() => { - const { queryKey } = getGetLocationsQueryOptions(); - const d = queryClient.getQueryData(queryKey); - if (d) { - const location = d.data.find(({ attributes }) => attributes.code === locationCode); - - map?.fitBounds(location.attributes.bounds as LngLatBoundsLike, { + if (location && map) { + map.fitBounds(location.bounds as LngLatBoundsLike, { padding: { top: 0, bottom: 0, @@ -145,7 +140,7 @@ const DataToolMap: React.FC = () => { }, }); } - }, [queryClient, locationCode, map]); + }, [location, map]); return (
diff --git a/frontend/src/containers/data-tool/sidebar/index.tsx b/frontend/src/containers/data-tool/sidebar/index.tsx index 6fea7682..78041d7a 100644 --- a/frontend/src/containers/data-tool/sidebar/index.tsx +++ b/frontend/src/containers/data-tool/sidebar/index.tsx @@ -1,18 +1,30 @@ -import { useAtom, useAtomValue } from 'jotai'; +import { useRouter } from 'next/router'; + +import { useQueryClient } from '@tanstack/react-query'; +import { useAtom } from 'jotai'; import { ChevronLeft } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'; import { cn } from '@/lib/classnames'; import { sidebarAtom } from '@/store/data-tool'; -import { locationAtom } from '@/store/location'; +import { LocationGroupsDataItemAttributes } from '@/types/generated/strapi.schemas'; import DetailsButton from './details-button'; import LocationSelector from './location-selector'; import Widgets from './widgets'; const DataToolSidebar: React.FC = () => { - const location = useAtomValue(locationAtom); + const { + query: { locationCode }, + } = useRouter(); + + const queryClient = useQueryClient(); + + const location = queryClient.getQueryData([ + 'locations', + locationCode, + ]); const [isSidebarOpen, setSidebarOpen] = useAtom(sidebarAtom); @@ -39,7 +51,7 @@ const DataToolSidebar: React.FC = () => {
-

{location.name}

+

{location?.name}

diff --git a/frontend/src/containers/data-tool/sidebar/location-selector/index.tsx b/frontend/src/containers/data-tool/sidebar/location-selector/index.tsx index 157eb3ff..f537e423 100644 --- a/frontend/src/containers/data-tool/sidebar/location-selector/index.tsx +++ b/frontend/src/containers/data-tool/sidebar/location-selector/index.tsx @@ -2,7 +2,7 @@ import { useCallback, useState } from 'react'; import { useRouter } from 'next/router'; -import { useAtomValue } from 'jotai'; +import { useQueryClient } from '@tanstack/react-query'; import { Check } from 'lucide-react'; import { @@ -15,8 +15,8 @@ import { import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'; import { PAGES } from '@/constants/pages'; import { cn } from '@/lib/classnames'; -import { locationAtom } from '@/store/location'; import { useGetLocations } from '@/types/generated/location'; +import { LocationGroupsDataItemAttributes } from '@/types/generated/strapi.schemas'; import { useDataToolSearchParams } from '../../content/map/sync-settings'; @@ -25,20 +25,35 @@ type LocationSelectorProps = { }; const LocationSelector: React.FC = ({ className }) => { - const location = useAtomValue(locationAtom); - const { push } = useRouter(); + const { + query: { locationCode }, + push, + } = useRouter(); + + const queryClient = useQueryClient(); + + const location = queryClient.getQueryData([ + 'locations', + locationCode, + ]); const searchParams = useDataToolSearchParams(); const [locationPopoverOpen, setLocationPopoverOpen] = useState(false); - const { data: locationsData } = useGetLocations(null, { - query: { - placeholderData: { data: [] }, - select: ({ data }) => data, + const { data: locationsData } = useGetLocations( + { + 'pagination[limit]': -1, + sort: 'name:asc', }, - }); + { + query: { + placeholderData: { data: [] }, + select: ({ data }) => data, + }, + } + ); const handleLocationSelected = useCallback( - async (locationCode: string) => { + async (locationCode: LocationGroupsDataItemAttributes['code']) => { setLocationPopoverOpen(false); await push(`${PAGES.dataTool}/${locationCode.toUpperCase()}?${searchParams.toString()}`); @@ -56,7 +71,7 @@ const LocationSelector: React.FC = ({ className }) => { No result - + {locationsData.map(({ attributes }) => { const { name, code, type } = attributes; @@ -71,7 +86,7 @@ const LocationSelector: React.FC = ({ className }) => { {name} diff --git a/frontend/src/containers/data-tool/sidebar/widgets/habitat/index.tsx b/frontend/src/containers/data-tool/sidebar/widgets/habitat/index.tsx index c37c333e..c7a57f72 100644 --- a/frontend/src/containers/data-tool/sidebar/widgets/habitat/index.tsx +++ b/frontend/src/containers/data-tool/sidebar/widgets/habitat/index.tsx @@ -4,10 +4,10 @@ import HorizontalBarChart from '@/components/charts/horizontal-bar-chart'; import Widget from '@/components/widget'; import { HABITAT_CHART_COLORS } from '@/constants/habitat-chart-colors'; import { useGetHabitatStats } from '@/types/generated/habitat-stat'; -import type { Location } from '@/types/generated/strapi.schemas'; +import type { LocationGroupsDataItemAttributes } from '@/types/generated/strapi.schemas'; type HabitatWidgetProps = { - location: Location; + location: LocationGroupsDataItemAttributes; }; const HabitatWidget: React.FC = ({ location }) => { diff --git a/frontend/src/containers/data-tool/sidebar/widgets/index.tsx b/frontend/src/containers/data-tool/sidebar/widgets/index.tsx index 0035f8ed..c98129e8 100644 --- a/frontend/src/containers/data-tool/sidebar/widgets/index.tsx +++ b/frontend/src/containers/data-tool/sidebar/widgets/index.tsx @@ -1,13 +1,24 @@ -import { useAtomValue } from 'jotai'; +import { useRouter } from 'next/router'; -import { locationAtom } from '@/store/location'; +import { useQueryClient } from '@tanstack/react-query'; + +import { LocationGroupsDataItemAttributes } from '@/types/generated/strapi.schemas'; import HabitatWidget from './habitat'; import MarineConservationWidget from './marine-conservation'; import ProtectionTypesWidget from './protection-types'; const DataToolWidgets: React.FC = () => { - const location = useAtomValue(locationAtom); + const { + query: { locationCode }, + } = useRouter(); + + const queryClient = useQueryClient(); + + const location = queryClient.getQueryData([ + 'locations', + locationCode, + ]); return (
diff --git a/frontend/src/containers/data-tool/sidebar/widgets/marine-conservation/index.tsx b/frontend/src/containers/data-tool/sidebar/widgets/marine-conservation/index.tsx index 38c89a6d..1d1175c9 100644 --- a/frontend/src/containers/data-tool/sidebar/widgets/marine-conservation/index.tsx +++ b/frontend/src/containers/data-tool/sidebar/widgets/marine-conservation/index.tsx @@ -6,10 +6,10 @@ import { groupBy } from 'lodash-es'; import ConservationChart from '@/components/charts/conservation-chart'; import Widget from '@/components/widget'; import { useGetProtectionCoverageStats } from '@/types/generated/protection-coverage-stat'; -import type { Location } from '@/types/generated/strapi.schemas'; +import type { LocationGroupsDataItemAttributes } from '@/types/generated/strapi.schemas'; type MarineConservationWidgetProps = { - location: Location; + location: LocationGroupsDataItemAttributes; }; const MarineConservationWidget: React.FC = ({ location }) => { diff --git a/frontend/src/containers/data-tool/sidebar/widgets/protection-types/index.tsx b/frontend/src/containers/data-tool/sidebar/widgets/protection-types/index.tsx index 27046938..12e367d4 100644 --- a/frontend/src/containers/data-tool/sidebar/widgets/protection-types/index.tsx +++ b/frontend/src/containers/data-tool/sidebar/widgets/protection-types/index.tsx @@ -4,10 +4,10 @@ import HorizontalBarChart from '@/components/charts/horizontal-bar-chart'; import Widget from '@/components/widget'; import { PROTECTION_TYPES_CHART_COLORS } from '@/constants/protection-types-chart-colors'; import { useGetMpaaProtectionLevelStats } from '@/types/generated/mpaa-protection-level-stat'; -import type { Location } from '@/types/generated/strapi.schemas'; +import type { LocationGroupsDataItemAttributes } from '@/types/generated/strapi.schemas'; type ProtectionTypesWidgetProps = { - location: Location; + location: LocationGroupsDataItemAttributes; }; const ProtectionTypesWidget: React.FC = ({ location }) => { diff --git a/frontend/src/pages/dashboard/[locationId].tsx b/frontend/src/pages/dashboard/[locationId].tsx index ea9465a7..59df5ae1 100644 --- a/frontend/src/pages/dashboard/[locationId].tsx +++ b/frontend/src/pages/dashboard/[locationId].tsx @@ -1,4 +1,4 @@ -import { useMemo, useState } from 'react'; +import { useState } from 'react'; import Link from 'next/link'; import { useRouter } from 'next/router'; @@ -17,1259 +17,8 @@ import { import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'; import DefaultLayout from '@/layouts/default'; import { cn } from '@/lib/classnames'; - -const locations = [ - { - value: 'worldwide', - label: 'Worldwide', - type: 'region', - }, - { - label: 'Afghanistan', - value: 'AF', - type: 'country', - }, - { - label: 'Åland Islands', - value: 'AX', - type: 'country', - }, - { - label: 'Albania', - value: 'AL', - type: 'country', - }, - { - label: 'Algeria', - value: 'DZ', - type: 'country', - }, - { - label: 'American Samoa', - value: 'AS', - type: 'country', - }, - { - label: 'Andorra', - value: 'AD', - type: 'country', - }, - { - label: 'Angola', - value: 'AO', - type: 'country', - }, - { - label: 'Anguilla', - value: 'AI', - type: 'country', - }, - { - label: 'Antarctica', - value: 'AQ', - type: 'country', - }, - { - label: 'Antigua and Barbuda', - value: 'AG', - type: 'country', - }, - { - label: 'Argentina', - value: 'AR', - type: 'country', - }, - { - label: 'Armenia', - value: 'AM', - type: 'country', - }, - { - label: 'Aruba', - value: 'AW', - type: 'country', - }, - { - label: 'Australia', - value: 'AU', - type: 'country', - }, - { - label: 'Austria', - value: 'AT', - type: 'country', - }, - { - label: 'Azerbaijan', - value: 'AZ', - type: 'country', - }, - { - label: 'Bahamas', - value: 'BS', - type: 'country', - }, - { - label: 'Bahrain', - value: 'BH', - type: 'country', - }, - { - label: 'Bangladesh', - value: 'BD', - type: 'country', - }, - { - label: 'Barbados', - value: 'BB', - type: 'country', - }, - { - label: 'Belarus', - value: 'BY', - type: 'country', - }, - { - label: 'Belgium', - value: 'BE', - type: 'country', - }, - { - label: 'Belize', - value: 'BZ', - type: 'country', - }, - { - label: 'Benin', - value: 'BJ', - type: 'country', - }, - { - label: 'Bermuda', - value: 'BM', - type: 'country', - }, - { - label: 'Bhutan', - value: 'BT', - type: 'country', - }, - { - label: 'Bolivia, Plurinational State of', - value: 'BO', - type: 'country', - }, - { - label: 'Bonaire, Sint Eustatius and Saba', - value: 'BQ', - type: 'country', - }, - { - label: 'Bosnia and Herzegovina', - value: 'BA', - type: 'country', - }, - { - label: 'Botswana', - value: 'BW', - type: 'country', - }, - { - label: 'Bouvet Island', - value: 'BV', - type: 'country', - }, - { - label: 'Brazil', - value: 'BR', - type: 'country', - }, - { - label: 'British Indian Ocean Territory', - value: 'IO', - type: 'country', - }, - { - label: 'Brunei Darussalam', - value: 'BN', - type: 'country', - }, - { - label: 'Bulgaria', - value: 'BG', - type: 'country', - }, - { - label: 'Burkina Faso', - value: 'BF', - type: 'country', - }, - { - label: 'Burundi', - value: 'BI', - type: 'country', - }, - { - label: 'Cambodia', - value: 'KH', - type: 'country', - }, - { - label: 'Cameroon', - value: 'CM', - type: 'country', - }, - { - label: 'Canada', - value: 'CA', - type: 'country', - }, - { - label: 'Cape Verde', - value: 'CV', - type: 'country', - }, - { - label: 'Cayman Islands', - value: 'KY', - type: 'country', - }, - { - label: 'Central African Republic', - value: 'CF', - type: 'country', - }, - { - label: 'Chad', - value: 'TD', - type: 'country', - }, - { - label: 'Chile', - value: 'CL', - type: 'country', - }, - { - label: 'China', - value: 'CN', - type: 'country', - }, - { - label: 'Christmas Island', - value: 'CX', - type: 'country', - }, - { - label: 'Cocos (Keeling) Islands', - value: 'CC', - type: 'country', - }, - { - label: 'Colombia', - value: 'CO', - type: 'country', - }, - { - label: 'Comoros', - value: 'KM', - type: 'country', - }, - { - label: 'Congo', - value: 'CG', - type: 'country', - }, - { - label: 'Congo, the Democratic Republic of the', - value: 'CD', - type: 'country', - }, - { - label: 'Cook Islands', - value: 'CK', - type: 'country', - }, - { - label: 'Costa Rica', - value: 'CR', - type: 'country', - }, - { - label: "Côte d'Ivoire", - value: 'CI', - type: 'country', - }, - { - label: 'Croatia', - value: 'HR', - type: 'country', - }, - { - label: 'Cuba', - value: 'CU', - type: 'country', - }, - { - label: 'Curaçao', - value: 'CW', - type: 'country', - }, - { - label: 'Cyprus', - value: 'CY', - type: 'country', - }, - { - label: 'Czech Republic', - value: 'CZ', - type: 'country', - }, - { - label: 'Denmark', - value: 'DK', - type: 'country', - }, - { - label: 'Djibouti', - value: 'DJ', - type: 'country', - }, - { - label: 'Dominica', - value: 'DM', - type: 'country', - }, - { - label: 'Dominican Republic', - value: 'DO', - type: 'country', - }, - { - label: 'Ecuador', - value: 'EC', - type: 'country', - }, - { - label: 'Egypt', - value: 'EG', - type: 'country', - }, - { - label: 'El Salvador', - value: 'SV', - type: 'country', - }, - { - label: 'Equatorial Guinea', - value: 'GQ', - type: 'country', - }, - { - label: 'Eritrea', - value: 'ER', - type: 'country', - }, - { - label: 'Estonia', - value: 'EE', - type: 'country', - }, - { - label: 'Ethiopia', - value: 'ET', - type: 'country', - }, - { - label: 'Falkland Islands (Malvinas)', - value: 'FK', - type: 'country', - }, - { - label: 'Faroe Islands', - value: 'FO', - type: 'country', - }, - { - label: 'Fiji', - value: 'FJ', - type: 'country', - }, - { - label: 'Finland', - value: 'FI', - type: 'country', - }, - { - label: 'France', - value: 'FR', - type: 'country', - }, - { - label: 'French Guiana', - value: 'GF', - type: 'country', - }, - { - label: 'French Polynesia', - value: 'PF', - type: 'country', - }, - { - label: 'French Southern Territories', - value: 'TF', - type: 'country', - }, - { - label: 'Gabon', - value: 'GA', - type: 'country', - }, - { - label: 'Gambia', - value: 'GM', - type: 'country', - }, - { - label: 'Georgia', - value: 'GE', - type: 'country', - }, - { - label: 'Germany', - value: 'DE', - type: 'country', - }, - { - label: 'Ghana', - value: 'GH', - type: 'country', - }, - { - label: 'Gibraltar', - value: 'GI', - type: 'country', - }, - { - label: 'Greece', - value: 'GR', - type: 'country', - }, - { - label: 'Greenland', - value: 'GL', - type: 'country', - }, - { - label: 'Grenada', - value: 'GD', - type: 'country', - }, - { - label: 'Guadeloupe', - value: 'GP', - type: 'country', - }, - { - label: 'Guam', - value: 'GU', - type: 'country', - }, - { - label: 'Guatemala', - value: 'GT', - type: 'country', - }, - { - label: 'Guernsey', - value: 'GG', - type: 'country', - }, - { - label: 'Guinea', - value: 'GN', - type: 'country', - }, - { - label: 'Guinea-Bissau', - value: 'GW', - type: 'country', - }, - { - label: 'Guyana', - value: 'GY', - type: 'country', - }, - { - label: 'Haiti', - value: 'HT', - type: 'country', - }, - { - label: 'Heard Island and McDonald Islands', - value: 'HM', - type: 'country', - }, - { - label: 'Holy See (Vatican City State)', - value: 'VA', - type: 'country', - }, - { - label: 'Honduras', - value: 'HN', - type: 'country', - }, - { - label: 'Hong Kong', - value: 'HK', - type: 'country', - }, - { - label: 'Hungary', - value: 'HU', - type: 'country', - }, - { - label: 'Iceland', - value: 'IS', - type: 'country', - }, - { - label: 'India', - value: 'IN', - type: 'country', - }, - { - label: 'Indonesia', - value: 'ID', - type: 'country', - }, - { - label: 'Iran, Islamic Republic of', - value: 'IR', - type: 'country', - }, - { - label: 'Iraq', - value: 'IQ', - type: 'country', - }, - { - label: 'Ireland', - value: 'IE', - type: 'country', - }, - { - label: 'Isle of Man', - value: 'IM', - type: 'country', - }, - { - label: 'Israel', - value: 'IL', - type: 'country', - }, - { - label: 'Italy', - value: 'IT', - type: 'country', - }, - { - label: 'Jamaica', - value: 'JM', - type: 'country', - }, - { - label: 'Japan', - value: 'JP', - type: 'country', - }, - { - label: 'Jersey', - value: 'JE', - type: 'country', - }, - { - label: 'Jordan', - value: 'JO', - type: 'country', - }, - { - label: 'Kazakhstan', - value: 'KZ', - type: 'country', - }, - { - label: 'Kenya', - value: 'KE', - type: 'country', - }, - { - label: 'Kiribati', - value: 'KI', - type: 'country', - }, - { - label: "Korea, Democratic People's Republic of", - value: 'KP', - type: 'country', - }, - { - label: 'Korea, Republic of', - value: 'KR', - type: 'country', - }, - { - label: 'Kuwait', - value: 'KW', - type: 'country', - }, - { - label: 'Kyrgyzstan', - value: 'KG', - type: 'country', - }, - { - label: "Lao People's Democratic Republic", - value: 'LA', - type: 'country', - }, - { - label: 'Latvia', - value: 'LV', - type: 'country', - }, - { - label: 'Lebanon', - value: 'LB', - type: 'country', - }, - { - label: 'Lesotho', - value: 'LS', - type: 'country', - }, - { - label: 'Liberia', - value: 'LR', - type: 'country', - }, - { - label: 'Libya', - value: 'LY', - type: 'country', - }, - { - label: 'Liechtenstein', - value: 'LI', - type: 'country', - }, - { - label: 'Lithuania', - value: 'LT', - type: 'country', - }, - { - label: 'Luxembourg', - value: 'LU', - type: 'country', - }, - { - label: 'Macao', - value: 'MO', - type: 'country', - }, - { - label: 'Macedonia, the Former Yugoslav Republic of', - value: 'MK', - type: 'country', - }, - { - label: 'Madagascar', - value: 'MG', - type: 'country', - }, - { - label: 'Malawi', - value: 'MW', - type: 'country', - }, - { - label: 'Malaysia', - value: 'MY', - type: 'country', - }, - { - label: 'Maldives', - value: 'MV', - type: 'country', - }, - { - label: 'Mali', - value: 'ML', - type: 'country', - }, - { - label: 'Malta', - value: 'MT', - type: 'country', - }, - { - label: 'Marshall Islands', - value: 'MH', - type: 'country', - }, - { - label: 'Martinique', - value: 'MQ', - type: 'country', - }, - { - label: 'Mauritania', - value: 'MR', - type: 'country', - }, - { - label: 'Mauritius', - value: 'MU', - type: 'country', - }, - { - label: 'Mayotte', - value: 'YT', - type: 'country', - }, - { - label: 'Mexico', - value: 'MX', - type: 'country', - }, - { - label: 'Micronesia, Federated States of', - value: 'FM', - type: 'country', - }, - { - label: 'Moldova, Republic of', - value: 'MD', - type: 'country', - }, - { - label: 'Monaco', - value: 'MC', - type: 'country', - }, - { - label: 'Mongolia', - value: 'MN', - type: 'country', - }, - { - label: 'Montenegro', - value: 'ME', - type: 'country', - }, - { - label: 'Montserrat', - value: 'MS', - type: 'country', - }, - { - label: 'Morocco', - value: 'MA', - type: 'country', - }, - { - label: 'Mozambique', - value: 'MZ', - type: 'country', - }, - { - label: 'Myanmar', - value: 'MM', - type: 'country', - }, - { - label: 'Namibia', - value: 'NA', - type: 'country', - }, - { - label: 'Nauru', - value: 'NR', - type: 'country', - }, - { - label: 'Nepal', - value: 'NP', - type: 'country', - }, - { - label: 'Netherlands', - value: 'NL', - type: 'country', - }, - { - label: 'New Caledonia', - value: 'NC', - type: 'country', - }, - { - label: 'New Zealand', - value: 'NZ', - type: 'country', - }, - { - label: 'Nicaragua', - value: 'NI', - type: 'country', - }, - { - label: 'Niger', - value: 'NE', - type: 'country', - }, - { - label: 'Nigeria', - value: 'NG', - type: 'country', - }, - { - label: 'Niue', - value: 'NU', - type: 'country', - }, - { - label: 'Norfolk Island', - value: 'NF', - type: 'country', - }, - { - label: 'Northern Mariana Islands', - value: 'MP', - type: 'country', - }, - { - label: 'Norway', - value: 'NO', - type: 'country', - }, - { - label: 'Oman', - value: 'OM', - type: 'country', - }, - { - label: 'Pakistan', - value: 'PK', - type: 'country', - }, - { - label: 'Palau', - value: 'PW', - type: 'country', - }, - { - label: 'Palestine, State of', - value: 'PS', - type: 'country', - }, - { - label: 'Panama', - value: 'PA', - type: 'country', - }, - { - label: 'Papua New Guinea', - value: 'PG', - type: 'country', - }, - { - label: 'Paraguay', - value: 'PY', - type: 'country', - }, - { - label: 'Peru', - value: 'PE', - type: 'country', - }, - { - label: 'Philippines', - value: 'PH', - type: 'country', - }, - { - label: 'Pitcairn', - value: 'PN', - type: 'country', - }, - { - label: 'Poland', - value: 'PL', - type: 'country', - }, - { - label: 'Portugal', - value: 'PT', - type: 'country', - }, - { - label: 'Puerto Rico', - value: 'PR', - type: 'country', - }, - { - label: 'Qatar', - value: 'QA', - type: 'country', - }, - { - label: 'Réunion', - value: 'RE', - type: 'country', - }, - { - label: 'Romania', - value: 'RO', - type: 'country', - }, - { - label: 'Russian Federation', - value: 'RU', - type: 'country', - }, - { - label: 'Rwanda', - value: 'RW', - type: 'country', - }, - { - label: 'Saint Barthélemy', - value: 'BL', - type: 'country', - }, - { - label: 'Saint Helena, Ascension and Tristan da Cunha', - value: 'SH', - type: 'country', - }, - { - label: 'Saint Kitts and Nevis', - value: 'KN', - type: 'country', - }, - { - label: 'Saint Lucia', - value: 'LC', - type: 'country', - }, - { - label: 'Saint Martin (French part)', - value: 'MF', - type: 'country', - }, - { - label: 'Saint Pierre and Miquelon', - value: 'PM', - type: 'country', - }, - { - label: 'Saint Vincent and the Grenadines', - value: 'VC', - type: 'country', - }, - { - label: 'Samoa', - value: 'WS', - type: 'country', - }, - { - label: 'San Marino', - value: 'SM', - type: 'country', - }, - { - label: 'Sao Tome and Principe', - value: 'ST', - type: 'country', - }, - { - label: 'Saudi Arabia', - value: 'SA', - type: 'country', - }, - { - label: 'Senegal', - value: 'SN', - type: 'country', - }, - { - label: 'Serbia', - value: 'RS', - type: 'country', - }, - { - label: 'Seychelles', - value: 'SC', - type: 'country', - }, - { - label: 'Sierra Leone', - value: 'SL', - type: 'country', - }, - { - label: 'Singapore', - value: 'SG', - type: 'country', - }, - { - label: 'Sint Maarten (Dutch part)', - value: 'SX', - type: 'country', - }, - { - label: 'Slovakia', - value: 'SK', - type: 'country', - }, - { - label: 'Slovenia', - value: 'SI', - type: 'country', - }, - { - label: 'Solomon Islands', - value: 'SB', - type: 'country', - }, - { - label: 'Somalia', - value: 'SO', - type: 'country', - }, - { - label: 'South Africa', - value: 'ZA', - type: 'country', - }, - { - label: 'South Georgia and the South Sandwich Islands', - value: 'GS', - type: 'country', - }, - { - label: 'South Sudan', - value: 'SS', - type: 'country', - }, - { - label: 'Spain', - value: 'ES', - type: 'country', - }, - { - label: 'Sri Lanka', - value: 'LK', - type: 'country', - }, - { - label: 'Sudan', - value: 'SD', - type: 'country', - }, - { - label: 'Suriname', - value: 'SR', - type: 'country', - }, - { - label: 'Svalbard and Jan Mayen', - value: 'SJ', - type: 'country', - }, - { - label: 'Swaziland', - value: 'SZ', - type: 'country', - }, - { - label: 'Sweden', - value: 'SE', - type: 'country', - }, - { - label: 'Switzerland', - value: 'CH', - type: 'country', - }, - { - label: 'Syrian Arab Republic', - value: 'SY', - type: 'country', - }, - { - label: 'Taiwan, Province of China', - value: 'TW', - type: 'country', - }, - { - label: 'Tajikistan', - value: 'TJ', - type: 'country', - }, - { - label: 'Tanzania, United Republic of', - value: 'TZ', - type: 'country', - }, - { - label: 'Thailand', - value: 'TH', - type: 'country', - }, - { - label: 'Timor-Leste', - value: 'TL', - type: 'country', - }, - { - label: 'Togo', - value: 'TG', - type: 'country', - }, - { - label: 'Tokelau', - value: 'TK', - type: 'country', - }, - { - label: 'Tonga', - value: 'TO', - type: 'country', - }, - { - label: 'Trinidad and Tobago', - value: 'TT', - type: 'country', - }, - { - label: 'Tunisia', - value: 'TN', - type: 'country', - }, - { - label: 'Turkey', - value: 'TR', - type: 'country', - }, - { - label: 'Turkmenistan', - value: 'TM', - type: 'country', - }, - { - label: 'Turks and Caicos Islands', - value: 'TC', - type: 'country', - }, - { - label: 'Tuvalu', - value: 'TV', - type: 'country', - }, - { - label: 'Uganda', - value: 'UG', - type: 'country', - }, - { - label: 'Ukraine', - value: 'UA', - type: 'country', - }, - { - label: 'United Arab Emirates', - value: 'AE', - type: 'country', - }, - { - label: 'United Kingdom', - value: 'GB', - type: 'country', - }, - { - label: 'United States', - value: 'US', - type: 'country', - }, - { - label: 'United States Minor Outlying Islands', - value: 'UM', - type: 'country', - }, - { - label: 'Uruguay', - value: 'UY', - type: 'country', - }, - { - label: 'Uzbekistan', - value: 'UZ', - type: 'country', - }, - { - label: 'Vanuatu', - value: 'VU', - type: 'country', - }, - { - label: 'Venezuela, Bolivarian Republic of', - value: 'VE', - type: 'country', - }, - { - label: 'Viet Nam', - value: 'VN', - type: 'country', - }, - { - label: 'Virgin Islands, British', - value: 'VG', - type: 'country', - }, - { - label: 'Virgin Islands, U.S.', - value: 'VI', - type: 'country', - }, - { - label: 'Wallis and Futuna', - value: 'WF', - type: 'country', - }, - { - label: 'Western Sahara', - value: 'EH', - type: 'country', - }, - { - label: 'Yemen', - value: 'YE', - type: 'country', - }, - { - label: 'Zambia', - value: 'ZM', - type: 'country', - }, - { - label: 'Zimbabwe', - value: 'ZW', - type: 'country', - }, -]; +import { getLocations, useGetLocations } from '@/types/generated/location'; +import { LocationListResponseDataItem } from '@/types/generated/strapi.schemas'; const tableData: DashboardTableItem[] = [ { @@ -1337,37 +86,59 @@ const tableData: DashboardTableItem[] = [ }, ]; -export const getStaticPaths: GetStaticPaths = () => { +export const getStaticPaths: GetStaticPaths = async () => { + const locations = await getLocations({ + 'pagination[limit]': -1, + }); + return { - paths: locations.map(({ value }) => ({ params: { locationId: value } })), + paths: locations.data?.map(({ attributes: { code } }) => ({ params: { locationId: code } })), fallback: false, }; }; -export const getStaticProps: GetStaticProps<{ locationId: string }> = ({ +export const getStaticProps: GetStaticProps<{ location: LocationListResponseDataItem }> = async ({ params: { locationId }, }) => { + const location = await getLocations({ + filters: { + code: locationId, + }, + }); + return { props: { - locationId: locationId as string, + location: location?.data?.[0], }, }; }; -const DashboardPage: React.FC> = ({ - locationId, -}) => { +const DashboardPage: React.FC> = ({ location }) => { const router = useRouter(); + const { + query: { locationId }, + } = router; const [locationPopoverOpen, setLocationPopoverOpen] = useState(false); - const locationName = useMemo( - () => locations.find(({ value }) => value === locationId).label, - [locationId] + const locationsQuery = useGetLocations( + { + 'pagination[limit]': -1, + }, + { + query: { + select: ({ data }) => + data.map(({ attributes: { name: label, code: value, type } }) => ({ + label, + value, + type, + })), + }, + } ); return ( - +
{locationId !== 'worldwide' && ( > = 'md:text-6xl': locationId === 'worldwide', })} > - {locationName} + {location?.attributes.name} @@ -1393,7 +164,7 @@ const DashboardPage: React.FC> = No result - {locations.map(({ label, value, type }) => ( + {locationsQuery.data?.map(({ label, value, type }) => ( { const { query } = context; @@ -21,25 +19,24 @@ export const getServerSideProps: GetServerSideProps = async (context) => { }, }); - const location = locationsData[0]; - - queryClient.setQueryData(['locations', locationCode], location); + const location = locationsData?.[0]; if (!location) return { notFound: true }; + queryClient.setQueryData( + ['locations', locationCode], + location.attributes + ); + return { props: { - location: location?.attributes, + location: location.attributes, dehydratedState: dehydrate(queryClient), }, }; }; export default function Page({ location }: { location: Location }) { - const setLocation = useSetAtom(locationAtom); - - setLocation(location); - return (
diff --git a/frontend/src/store/location.ts b/frontend/src/store/location.ts deleted file mode 100644 index ae78de31..00000000 --- a/frontend/src/store/location.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { atom } from 'jotai'; - -import type { Location } from '@/types/generated/strapi.schemas'; - -export const locationAtom = atom({ - code: undefined, - name: undefined, - totalMarineArea: undefined, - type: undefined, -});