116361 Changed BAG API

src/__external__/BAGBenkAggResponse.d.ts

@@ -0,0 +1,25 @@
+declare type BAGBenkAggResponse = {
+ page: {
+ number: number
+ size: number
+ }
+ _embedded: {
+ adresseerbareobjecten: Array<BAGBenkAggAddress>
+ }
+}
+
+declare type BAGBenkAggAddress = {
+ openbareruimteNaam: string
+ huisnummer: number
+ huisletter: string
+ huisnummertoevoeging: string
+ postcode: string
+ verblijfsobjectOppervlakte: number
+ verblijfsobjectAantalBouwlagen: number
+ verblijfsobjectAantalKamers: number
+ typeAdres: string
+ gebiedenStadsdeelNaam: string
+ gebruiksdoelOmschrijvingen: Array<string>
+ toegangOmschrijvingen: Array<string>
+ wozSoortObjectOmschrijving: Array<string>
+}

src/__external__/BAGPdokResponse.d.ts

@@ -0,0 +1,22 @@
+declare type BAGPdokResponse = {
+ response: {
+ numFound: number
+ docs: Array<BAGPdokAddress>
+ }
+}
+
+declare type BAGPdokAddress = {
+ woonplaatsnaam: string
+ weergavenaam: string
+ adrestype: string
+ gemeentenaam: string
+ postcode: string
+ centroide_ll: string
+ nummeraanduiding_id: string
+ adresseerbaarobject_id: string
+ straatnaam: string
+ huisnummer: integer
+ huisletter: string
+ huisnummertoevoeging: string
+ score: float
+}

src/app/components/addresses/AddressHeader/AddressHeader.tsx

@@ -1,11 +1,12 @@
 import styled from "styled-components"
 import { breakpoint, themeSpacing, Typography } from "@amsterdam/asc-ui"
+import { SmallSkeleton } from "@amsterdam/wonen-ui"
 
-import { useBAG } from "app/state/rest"
+import { useBagPdok } from "app/state/rest"
 import ShowOtherAddressesButton, { Index } from "app/components/addresses/AddressSuffixSwitcher/ShowOtherAddressesButton"
 import useOtherAddressesByBagId from "app/state/rest/custom/useOtherAddresses/useOtherAddresses"
 import AddressLink from "./components/AddressLink"
-import getAddressFromBagResults from "app/components/addresses/utils/getAddressFromBagResults"
+import { getAddressFromBagPdokResponse } from "app/components/addresses/utils"
 
 type Props = {
  bagId: Components.Schemas.Address["bag_id"]
@@ -28,14 +29,11 @@ const ButtonWrap = styled.div`
 `
 
 const AddressHeader: React.FC<Props> = ({ bagId, headingSize = "h2", isHeader = false, enableSwitch = true }) => {
- const [data] = useBAG(bagId)
- const foundAddress = getAddressFromBagResults(data)
- const title = foundAddress?.adres ? `${ foundAddress.adres }, ${ foundAddress.postcode }` : undefined
- const showTitle = title !== undefined
-
+ const [data, { isBusy }] = useBagPdok(bagId)
+ const foundAddress = getAddressFromBagPdokResponse(data)
  const [filteredAddresses] = useOtherAddressesByBagId(bagId)
  const showButton = enableSwitch && (filteredAddresses?.length ?? 0) > 1
- const isCurrentAddress = (address: { adres: string }) => address.adres.trim() === foundAddress?.adres.trim()
+ const isCurrentAddress = (address: BAGPdokAddress ) => address.weergavenaam === foundAddress?.weergavenaam
  const addressIndex = filteredAddresses?.findIndex(isCurrentAddress) ?? -1
  let index: Index = undefined
  if (addressIndex === 0) {
@@ -44,10 +42,11 @@ const AddressHeader: React.FC<Props> = ({ bagId, headingSize = "h2", isHeader =
  index = "last"
  }
 
- // TODO: Show loading status visually
+ const title = foundAddress?.weergavenaam
  return (
  <Div isHeader={ isHeader }>
- { showTitle && <AddressLink title={ title } bagId={ bagId } as={ headingSize ?? "span" } /> }
+ { isBusy && <SmallSkeleton height={ 10 } /> }
+ { title && <AddressLink title={ title } bagId={ bagId } as={ headingSize ?? "span" } /> }
  { showButton && (
  <ButtonWrap>
  <ShowOtherAddressesButton bagId={ bagId } index={ index } />

src/app/components/addresses/AddressSuffixSwitcher/OtherAddressesTable.tsx

@@ -14,7 +14,7 @@ const OtherAddressesTable: React.FC<Props> = ({ bagId, onAddressChosen }) => {
 
  const onClickRow = (data: any) => {
  onAddressChosen()
- navigateTo("/adres/:bagId", { bagId: data.adresseerbaar_object_id })
+ navigateTo("/adres/:bagId", { bagId: data.adresseerbaarobject_id })
  }
 
  return (

src/app/components/addresses/AddressSuffixSwitcher/columns.tsx

@@ -4,10 +4,10 @@ import to from "app/routing/utils/to"
 const columns = [
  {
  header: "Adres",
- dataIndex: "adres",
+ dataIndex: "weergavenaam",
  minWidth: 300
  }, {
- dataIndex: "adresseerbaar_object_id",
+ dataIndex: "adresseerbaarobject_id",
  minWidth: 100,
  render: (bagId: any) => (
  <TableAction to={ to("/adres/:bagId", { bagId })}>

src/app/components/addresses/ObjectDetails/ObjectDetails.tsx

@@ -1,23 +1,16 @@
-import { useBAG, useBAGLodging } from "app/state/rest"
+import { useBenkAgg } from "app/state/rest"
 import { DefinitionList } from "@amsterdam/wonen-ui"
-import getAddressFromBagResults from "app/components/addresses/utils/getAddressFromBagResults"
+import { getAddressFromBenkAggResponse } from "app/components/addresses/utils"
 import useValues from "./hooks/useValues"
 
 type Props = {
  bagId: Components.Schemas.Address["bag_id"]
 }
 
 const ObjectDetails: React.FC<Props> = ({ bagId }) => {
-
- const [BAGAddressResponse, { isBusy: isBusyAddress }] = useBAG(bagId)
- const BAGAddress = getAddressFromBagResults(BAGAddressResponse)
-
-
- const { type, subtype_id } = BAGAddress ?? {}
- const [BAGObject, { isBusy: isBusyObject }] = useBAGLodging(type, subtype_id)
-
- const isBusy = isBusyAddress || isBusyObject
- const values = useValues(BAGAddress, BAGObject)
+ const [benkAggResponse, { isBusy }] = useBenkAgg(bagId)
+ const benkAggAddress = getAddressFromBenkAggResponse(benkAggResponse)
+ const values = useValues(benkAggAddress)
 
  return (
  <DefinitionList

src/app/components/addresses/ObjectDetails/hooks/useValues.ts

@@ -1,12 +1,18 @@
-export default (BAGAddress?: BAGAddressResponse["results"][number], BAGObjectResponse?: BAGObjectResponse) => {
-
- if (BAGAddress === undefined || BAGObjectResponse === undefined) return
+export default (benkAggAddress?: BAGBenkAggAddress) => {
+ if (!benkAggAddress) return
+
+ const { 
+ gebruiksdoelOmschrijvingen, verblijfsobjectOppervlakte, verblijfsobjectAantalBouwlagen, 
+ toegangOmschrijvingen, verblijfsobjectAantalKamers 
+ } = benkAggAddress
 
  const values = [
- ["Bestemming", BAGAddress?.type ?? "-"],
- ["Oppervlakte", BAGObjectResponse.oppervlakte ? `${ BAGObjectResponse.oppervlakte }m²` : "-"],
- ["Bouwlagen", BAGObjectResponse.bouwlagen],
- ["Aantal kamers", BAGObjectResponse.aantal_kamers]
+ ["Gebruiksdoel", gebruiksdoelOmschrijvingen ? gebruiksdoelOmschrijvingen.join(", ") : undefined],
+ ["Oppervlakte", verblijfsobjectOppervlakte ? `${ verblijfsobjectOppervlakte }m²` : undefined],
+ ["Bouwlagen", verblijfsobjectAantalBouwlagen],
+ ["Toegang", toegangOmschrijvingen ? toegangOmschrijvingen.join(", ") : undefined],
+ ["Aantal kamers", verblijfsobjectAantalKamers ]
  ]
+
  return Object.fromEntries(values)
 }

src/app/components/addresses/utils/getAddressFromBagPdokResponse.ts

@@ -0,0 +1,6 @@
+export const getAddressFromBagPdokResponse = (data?: BAGPdokResponse): BAGPdokAddress | undefined => {
+ const docs = data?.response?.docs
+ return (
+ docs?.find((result) => result.adrestype === "hoofdadres")
+ ) 
+}

src/app/components/addresses/utils/getAddressFromBenkAggResponse.ts

@@ -0,0 +1,4 @@
+export const getAddressFromBenkAggResponse = (data?: BAGBenkAggResponse): BAGBenkAggAddress | undefined => {
+ const adresseerbareobjecten = data?._embedded?.adresseerbareobjecten ?? []
+ return adresseerbareobjecten?.length > 0 ? adresseerbareobjecten[0] : undefined
+}

src/app/components/addresses/utils/index.ts

@@ -0,0 +1,2 @@
+export * from "./getAddressFromBagPdokResponse"
+export * from "./getAddressFromBenkAggResponse"

src/app/components/cases/CreateForm/CreateForm.tsx

@@ -2,13 +2,12 @@ import { useState, useEffect } from "react"
 import scaffold from "./scaffold"
 import {
  useCaseThemes, useReasons, useCaseCreate, useProjects,
- useListing, useSubjects, useCasesByBagId, useCorporations, useBAG
+ useListing, useSubjects, useCasesByBagId, useCorporations, useBagPdok
 } from "app/state/rest"
 import ConfirmScaffoldForm from "app/components/shared/ConfirmScaffoldForm/ConfirmScaffoldForm"
 import useNavigateWithFlashMessage from "app/state/flashMessages/useNavigateWithFlashMessage"
 import useScaffoldedFields from "app/components/shared/ConfirmScaffoldForm/hooks/useScaffoldedFields"
-import getAddressAsString from "app/components/addresses/utils/getAddressAsString"
-import getAddressFromBagResults from "app/components/addresses/utils/getAddressFromBagResults"
+import { getAddressFromBagPdokResponse } from "app/components/addresses/utils"
 import useNavigation from "app/routing/useNavigation"
 
 
@@ -65,8 +64,8 @@ const CreateForm: React.FC<Props> = ({ bagId, tonId }) => {
  const [listing] = useListing(tonId)
  const [cases] = useCasesByBagId(bagId)
  const [corporations] = useCorporations()
- const [bagAddressResponse] = useBAG(bagId)
- const bagAddress = getAddressFromBagResults(bagAddressResponse)
+ const [bagAddressResponse] = useBagPdok(bagId)
+ const bagAddress = getAddressFromBagPdokResponse(bagAddressResponse)
  const { navigateTo } = useNavigation()
 
 
@@ -140,9 +139,7 @@ const CreateForm: React.FC<Props> = ({ bagId, tonId }) => {
  } : {}
  }
 
- const addressString = getAddressAsString(bagAddress)
- const title = `${ addressString } - Controleer de gegevens`
-
+ const title = `${ bagAddress?.weergavenaam } - Controleer de gegevens`
  return (
  <ConfirmScaffoldForm
  fields={ fields }

src/app/components/search/SearchResults/SearchResults.tsx

@@ -1,59 +1,41 @@
-import { Paragraph } from "@amsterdam/asc-ui"
 import { Table } from "@amsterdam/wonen-ui"
-import { useBAGWithZipCode, useBAGWithStreet } from "app/state/rest"
+import { useBagPdok } from "app/state/rest"
 import useNavigation from "app/routing/useNavigation"
 import columns from "./columns"
 
-export type SearchResult = Pick<BAGAddressResponse["results"][0], "adres" | "postcode" | "adresseerbaar_object_id">
-
 type Props = {
  searchString: string
 }
 
-const REGEX_ZIP_CODE = /^[1-9][0-9]{3} ?(?!sa|sd|ss)[a-z]{2}/i
-
 const MIN_SEARCH_LENGTH = 3
 const isValidSearchString = (s: string) => s.length >= MIN_SEARCH_LENGTH
 
 const SearchResults: React.FC<Props> = ({ searchString }) => {
- const isValid = isValidSearchString(searchString)
- const isZipCode = isValid && REGEX_ZIP_CODE.test(searchString)
- const searchStringZipcode = isZipCode ? searchString : undefined
- const searchStringStreet = isValid && !REGEX_ZIP_CODE.test(searchString) ? searchString : undefined
- const [dataZipCode, { isBusy: isBusyZipCode }] = useBAGWithZipCode(searchStringZipcode)
- const [dataStreet, { isBusy: isBusyStreet }] = useBAGWithStreet(searchStringStreet)
  const { navigateTo } = useNavigation()
-
+ const isValid = isValidSearchString(searchString)
+ const searchStringBagPdok = isValid ? searchString : undefined
+ const [bagData, { isBusy: loading }] = useBagPdok(searchStringBagPdok)
+
  const onClickRow = (data: any) => {
- navigateTo("/adres/:bagId", { bagId: data.adresseerbaar_object_id })
+ navigateTo("/adres/:bagId", { bagId: data.adresseerbaarobject_id })
  }
 
- const loading = isBusyZipCode || isBusyStreet
- const data = isZipCode ? dataZipCode : dataStreet
  // Only show addresses with a bagId
- const dataSource = data?.results?.filter((obj) => obj.adresseerbaar_object_id) || []
+ const dataSource = bagData?.response?.docs?.filter((obj) => obj.adresseerbaarobject_id) || []
 
  return (
- <>
- { data && data?.count > 100 && (
- <Paragraph strong>
- Er zijn meer dan 100 resultaten voor deze zoekopdracht. Specificeer je zoekterm.
- </Paragraph>
- )}
- { isValid ? (
- <Table
- lastColumnFixed
- columns={ columns }
- data={ dataSource }
- loading={ loading }
- numLoadingRows={ 1 }
- onClickRow={ onClickRow }
- emptyPlaceholder="Er zijn geen adressen gevonden"
- pagination={ false }
- />
- ) : null
- }
- </>
+ isValid ? (
+ <Table
+ lastColumnFixed
+ columns={ columns }
+ data={ dataSource }
+ loading={ loading }
+ numLoadingRows={ 1 }
+ onClickRow={ onClickRow }
+ emptyPlaceholder="Er zijn geen adressen gevonden"
+ pagination={ false }
+ />
+ ) : null
  )
 }
 

src/app/components/search/SearchResults/columns.tsx

@@ -4,15 +4,14 @@ import to from "app/routing/utils/to"
 const columns = [
  {
  header: "Adres",
- dataIndex: "adres",
+ dataIndex: "weergavenaam",
  minWidth: 100,
  render: (adres: any, obj: any) => (
- `${ adres } ${ obj.type_adres === "Nevenadres" ? "(Nevenadres)" : "" }`
+ `${ adres } ${ obj.adrestype === "nevenadres" ? "(Nevenadres)" : "" }`
  )
  },
- { header: "Postcode", dataIndex: "postcode", minWidth: 100 },
  {
- dataIndex: "adresseerbaar_object_id",
+ dataIndex: "adresseerbaarobject_id",
  minWidth: 140,
  render: (bagId: any) => (
  <TableAction to={ to("/adres/:bagId", { bagId }) }>