Scale regional data catalogs

frontend/src/services/api/areas.ts

@@ -1,8 +1,35 @@
 import { apiGet, apiPost, apiPatch } from './client'
 import type { AreaCreate, AreaListResponse, AreaRead } from '../../types'
 
+const AREA_PAGE_SIZE = 200
+
+async function listProjectAreas(projectId: string): Promise<AreaListResponse> {
+  const items: AreaRead[] = []
+  let offset = 0
+  let total: number | null = null
+  do {
+    const page = await apiGet<AreaListResponse>(
+      `/api/v1/projects/${projectId}/areas?limit=${AREA_PAGE_SIZE}&offset=${offset}`,
+    )
+    if (total === null) {
+      total = page.total
+    } else if (page.total !== total) {
+      throw new Error('De gebiedslijst wijzigde tijdens het laden. Vernieuw de werkruimte.')
+    }
+    items.push(...page.items)
+    if (page.items.length === 0) {
+      break
+    }
+    offset += page.items.length
+  } while (offset < (total ?? 0))
+  if (total !== null && items.length !== total) {
+    throw new Error(`Niet alle gebieden konden worden geladen (${items.length}/${total}).`)
+  }
+  return { items, total: total ?? 0, limit: items.length, offset: 0 }
+}
+
 export const areasApi = {
-  list: (projectId: string): Promise<AreaListResponse> => apiGet<AreaListResponse>(`/api/v1/projects/${projectId}/areas`),
+  list: listProjectAreas,
   create: (projectId: string, payload: AreaCreate): Promise<AreaRead> =>
     apiPost<AreaRead>(`/api/v1/projects/${projectId}/areas`, payload),
   get: (projectId: string, areaId: string): Promise<AreaRead> =>