fix(islands): load islands that do not belong to any regency

Author: fityannugroho

lib/data.ts

@@ -72,7 +72,8 @@ export async function getData<A extends Area, P extends string | Query<A>>(
   )
   const parent = parentArea[area]
 
-  if (query?.parentCode && parent) {
+  // Allow empty string on `parentCode` query
+  if (query?.parentCode != null && parent) {
     url.searchParams.append(`${parent}Code`, query.parentCode)
   }
 

modules/MapDashboard/IslandMarkers.tsx

@@ -17,9 +17,8 @@ const MapMarker = dynamic(() => import('@/components/MapMarker'), {
 })
 
 export default function IslandMarkers() {
-  const { selectedArea, loading } = useMapDashboard()
-  const regencyCode = selectedArea.regency?.code
-  const { data: islands = [] } = useIslands(regencyCode)
+  const { loading } = useMapDashboard()
+  const { data: islands = [] } = useIslands()
 
   return (
     <MarkerClusterGroup

modules/MapDashboard/IslandsInfo.tsx

@@ -6,13 +6,11 @@ import { useIslands } from './hooks/useIslands'
 
 export default function IslandsInfo() {
   const { selectedArea } = useMapDashboard()
-  const { isLoading, data: islands = [] } = useIslands(
-    selectedArea.regency?.code,
-  )
+  const { isLoading, data: islands = [] } = useIslands()
 
   return (
     <div className="w-full p-2 border rounded flex justify-center items-center text-center">
-      {selectedArea.regency ? (
+      {selectedArea.province || selectedArea.regency ? (
         <div className="flex flex-col w-full justify-center items-center">
           {isLoading ? (
             <div className="flex gap-2 justify-center items-center">
@@ -35,7 +33,7 @@ export default function IslandsInfo() {
         </div>
       ) : (
         <span className="text-sm text-gray-500">
-          Select a regency to see islands
+          Select a province or regency to see islands
         </span>
       )}
     </div>

modules/MapDashboard/hooks/useIslands.ts

@@ -1,7 +1,9 @@
 import { useQuery } from '@tanstack/react-query'
+import { useMemo } from 'react'
 import { config } from '@/lib/config'
 import { Area, type Island } from '@/lib/const'
 import { getData } from '@/lib/data'
+import { useMapDashboard } from './useDashboard'
 
 const MAX_PAGE_SIZE = config.dataSource.area.pagination.maxPageSize
 
@@ -29,10 +31,73 @@ async function fetchIslandsRecursively(
   return []
 }
 
-export function useIslands(regencyCode?: string) {
-  return useQuery({
-    queryKey: ['islands', { parentCode: regencyCode }],
-    queryFn: () => fetchIslandsRecursively(regencyCode as string),
+export function useIslands() {
+  const { selectedArea } = useMapDashboard()
+  const provinceCode = selectedArea.province?.code
+  const regencyCode = selectedArea.regency?.code
+
+  // Load all islands in a province that does not belong to any regency
+  // Fetch the full list of islands that don't belong to any regency once and
+  // cache it. We only enable this when a province is selected to avoid
+  // fetching unnecessarily on initial load. Different provinces will reuse
+  // the same cached list and we filter it locally instead of refetching.
+  const allNoRegencyQuery = useQuery<Island[], Error>({
+    queryKey: ['islands', 'without-regency'],
+    queryFn: () => fetchIslandsRecursively(''),
+    enabled: !!provinceCode,
+    // keep it fresh for a while so switching provinces won't trigger refetch
+    staleTime: 1000 * 60 * 60, // 1 hour
+  })
+
+  // derive province-level islands from the cached full list
+  const provinceIslands = useMemo(() => {
+    if (!provinceCode) return []
+    const all: Island[] = (allNoRegencyQuery.data as Island[]) ?? []
+    return all.filter((island: Island) =>
+      island.code.startsWith(`${provinceCode}.00`),
+    )
+  }, [allNoRegencyQuery.data, provinceCode])
+
+  // Load islands for a specific regency
+  const regencyQuery = useQuery<Island[], Error>({
+    queryKey: ['islands', 'regency', regencyCode],
+    queryFn: () =>
+      regencyCode ? fetchIslandsRecursively(regencyCode) : Promise.resolve([]),
     enabled: !!regencyCode,
   })
+
+  // Compute aggregated islands from province + regency query results
+  const islands = useMemo(() => {
+    const prov = provinceIslands ?? []
+    const reg = regencyQuery.data ?? []
+    const map = new Map<string, Island>()
+
+    // add province islands first
+    prov.forEach((i) => {
+      map.set(i.code, i)
+    })
+    // overlay regency islands (will replace duplicates)
+    reg.forEach((i) => {
+      map.set(i.code, i)
+    })
+
+    return Array.from(map.values())
+  }, [provinceIslands, regencyQuery.data])
+
+  const isLoading = allNoRegencyQuery.isLoading || regencyQuery.isLoading
+  const isFetching = allNoRegencyQuery.isFetching || regencyQuery.isFetching
+  const aggregatedError = [regencyQuery.error, allNoRegencyQuery.error].filter(
+    Boolean,
+  )
+
+  return {
+    data: islands,
+    isLoading,
+    isFetching,
+    error: aggregatedError.length > 0 ? aggregatedError : null,
+    refetch: () => {
+      void allNoRegencyQuery.refetch()
+      void regencyQuery.refetch()
+    },
+  }
 }