Updated HOA description

src/app/pages/AddressPage/AddressPage.tsx

@@ -1,41 +1,17 @@
-import { Button } from "@amsterdam/design-system-react"
 import { HousingIcon } from "@amsterdam/design-system-react-icons"
-import { styled } from "styled-components"
-import { useNavigate, useParams } from "react-router-dom"
-import { PanoramaPreview, PageHeading, PageSpinner, Descriptions } from "app/components"
-import { useHomeownerAssociation } from "app/state/rest"
+import { useParams } from "react-router-dom"
+import { PanoramaPreview, PageHeading } from "app/components"
+import HoaDescription from "./HoaDescription"
 
 
-const Wrapper = styled.div`
-  margin: 24px 0;
-`
-
 export const AddressPage: React.FC = () => {
-  const { bagId } = useParams<{ bagId: string }>()
-  const [data, { isBusy }] = useHomeownerAssociation(bagId)
-  const navigate = useNavigate()
+  const { bagId } = useParams<{ bagId: string }>()  
 
-  const items = [
-    { label: "VVE statutaire naam", children: data?.name },
-    { label: "Bouwjaar", children: data?.build_year },
-    { label: "Aantal appartementen", children: data?.number_of_appartments }
-  ]
-
   return (
     <>
       <PageHeading label="Adresoverzicht" icon={ HousingIcon } />
       { bagId && <PanoramaPreview bagId={ bagId } aspect={ 4 } fov={ 120 } />}
-      { isBusy && <PageSpinner /> }
-      { data && data.id && (
-        <>
-          <Wrapper>
-            <Descriptions items={ items } />
-          </Wrapper>
-          <Button onClick={ () => navigate(`/vve/${ data.id }/zaken/nieuw`)} >
-            Nieuwe zaak aanmaken  
-          </Button>
-        </>
-      )}
+      { bagId && <HoaDescription bagId={ bagId } /> }
     </>
   )
 }

src/app/pages/AddressPage/HoaDescription.tsx

@@ -0,0 +1,47 @@
+import { Button } from "@amsterdam/design-system-react"
+import { styled } from "styled-components"
+import { useNavigate } from "react-router-dom"
+import { PageSpinner, Descriptions } from "app/components"
+import { useHomeownerAssociation } from "app/state/rest"
+
+
+type Props = {
+  bagId: string
+}
+
+const Wrapper = styled.div`
+  margin: 24px 0;
+`
+
+export const HoaDescription: React.FC<Props> = ({ bagId }) => {
+  const [data, { isBusy }] = useHomeownerAssociation(bagId)
+  const navigate = useNavigate()
+
+  if (isBusy) {
+    return <PageSpinner />
+  }
+  if (data?.message) {
+    return <p>Er zijn geen VVE-gegevens gevonden voor dit adres.</p>
+  }
+  if (data?.id) {
+    const items = [
+      { label: "VVE statutaire naam", children: data?.name },
+      { label: "Bouwjaar", children: data?.build_year },
+      { label: "Aantal appartementen", children: data?.number_of_appartments }
+    ]
+    return (
+      <>
+        <Wrapper>
+          <Descriptions items={ items } />
+        </Wrapper>
+        <Button onClick={ () => navigate(`/vve/${ data.id }/zaken/nieuw`)} >
+          Nieuwe zaak aanmaken  
+        </Button>
+      </>
+    )
+  }
+  return null
+}
+
+export default HoaDescription
+

src/app/state/rest/bagPdok.ts

@@ -4,7 +4,7 @@ import useApiRequest from "./hooks/useApiRequest"
 import qs from "qs"
 
 // Constants
-const PDOK_URL = "https://api.pdok.nl/bzk/locatieserver/search/v3_1/free"
+const PDOK_URL = "https://api.pdok.nl/bzk/locatieserver/search/v3_1"
 const MUNICIPALITY_FILTER = "gemeentenaam:(amsterdam)"
 const ADDRESS_FILTER = "AND (type:adres) AND (adrestype: hoofdadres)"
 const DEFAULT_SORT = "score desc, weergavenaam asc"
@@ -29,7 +29,20 @@ export const useBagPdok = (searchString?: string, options?: Options) => {
   const query = constructQuery(searchString)
 
   return useApiRequest<BAGPdokResponse>({
-    url: `${ PDOK_URL }${ query }`,
+    url: `${ PDOK_URL }/suggest${ query }`,
+    lazy: searchString === undefined,
+    ...options,
+    groupName: "bagPdok",
+    handleError
+  })
+}
+
+export const useBagPdokByBagId = (searchString?: string, options?: Options) => {
+  const handleError = useErrorHandler()
+  const query = constructQuery(searchString)
+
+  return useApiRequest<BAGPdokResponse>({
+    url: `${ PDOK_URL }/free${ query }`,
     lazy: searchString === undefined,
     ...options,
     groupName: "bagPdok",

src/app/state/rest/custom/usePanoramaByBagId.ts

@@ -1,4 +1,4 @@
-import { useBagPdok, usePanorama } from "app/state/rest"
+import { useBagPdokByBagId, usePanorama } from "app/state/rest"
 
 const extractLatLng = (point?: BAGPdokAddress["centroide_ll"]) => {
   // Ensure the string starts with "POINT(" and ends with ")"
@@ -17,7 +17,7 @@ const extractLatLng = (point?: BAGPdokAddress["centroide_ll"]) => {
 }
 
 export const usePanoramaByBagId = (bagId: string, width: number | undefined, aspect: number | undefined, radius: number, fov: number | undefined) => {
-  const [data] = useBagPdok(bagId)
+  const [data] = useBagPdokByBagId(bagId)
   const docs = data?.response?.docs
   const foundAddress = docs && docs[0] ? docs[0] : undefined
   const latLng = extractLatLng(foundAddress?.centroide_ll)