Merge pull request #2570 from Amsterdam/bugfix/116361-change-bag-api

Bugfix/116361 change bag api

.github/dependabot.yml

@@ -10,3 +10,6 @@ updates:
     schedule:
       interval: "daily"
     open-pull-requests-limit: 100
+    ignore:
+      - dependency-name: "*" # This will ignore all dependencies
+        update-types: ["version-update:semver-patch"]

cypress/fixtures/address.json

@@ -3,6 +3,6 @@
   "street": "Weesperstraat 113",
   "zipCode": "1018VN",
   "city": "Amsterdam",
-  "queryString": "1018VN113",
+  "queryString": "1018VN 113",
   "bagId": "0363010000864314"
 }

cypress/support/address.js

@@ -1,18 +1,15 @@
+import address from "../fixtures/address.json"
 /*
  ** Search address for cases by queryString.
  ** Select first case.
  ** Check Adresoverzicht for right address
  */
 Cypress.Commands.add("selectAddress", (queryString, addressString) => {
-
   expect(queryString, "queryString was set").to.be.a("string").and.not.be.empty
   expect(addressString, "addressString was set").to.be.a("string").and.not.be.empty
 
-  const urlAddress = `${Cypress.env("baseUrlData")}atlas/search/postcode/*`
-  cy.intercept(urlAddress).as("getAddress")
-
-  const urlCases = `**/addresses/*/cases/`
-  cy.intercept(urlCases).as("getCases")
+  cy.intercept(`**${ address.zipCode }**`).as("getAddress")
+  cy.intercept("**/addresses/*/cases/").as("getCases")
 
   cy.visit(`/?query=${queryString}`)
 

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 { useBagPdokByBagId } 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 }] = useBagPdokByBagId(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,4 @@
+export const getAddressFromBagPdokResponse = (data?: BAGPdokResponse):  BAGPdokAddress | undefined => {
+  const docs = data?.response?.docs
+  return docs && docs[0] ? docs[0] : undefined
+}

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, useBagPdokByBagId
 } 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] = useBagPdokByBagId(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
   )
 }