Merge pull request #2218 from Amsterdam/bugfix/89484-multiple-address…

…es-with-bag-id

89484

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

@@ -2,9 +2,10 @@ import styled from "styled-components"
 import { breakpoint, themeSpacing, Typography } from "@amsterdam/asc-ui"
 
 import { useBAG } from "app/state/rest"
-import ShowOtherAddressesButton from "app/components/addresses/AddressSuffixSwitcher/ShowOtherAddressesButton"
+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"
 
 type Props = {
  bagId: Components.Schemas.Address["bag_id"]
@@ -27,31 +28,31 @@ const ButtonWrap = styled.div`
 `
 
 const AddressHeader: React.FC<Props> = ({ bagId, headingSize = "h2", isHeader = false, enableSwitch = true }) => {
-
  const [data] = useBAG(bagId)
- const title = data?.results[0] !== undefined ? `${ data.results[0].adres }, ${ data.results[0].postcode }` : undefined
+ const foundAddress = getAddressFromBagResults(data)
+ const title = foundAddress?.adres ? `${ foundAddress.adres }, ${ foundAddress.postcode }` : undefined
  const showTitle = title !== undefined
 
  const [filteredAddresses] = useOtherAddressesByBagId(bagId)
  const showButton = enableSwitch && (filteredAddresses?.length ?? 0) > 1
- const isCurrentAddress = (address: { adres: string }) => address.adres.trim() === data?.results[0]?.adres.trim()
+ const isCurrentAddress = (address: { adres: string }) => address.adres.trim() === foundAddress?.adres.trim()
  const addressIndex = filteredAddresses?.findIndex(isCurrentAddress) ?? -1
- const index =
- addressIndex === 0 ? "first" :
- addressIndex > 0 && addressIndex === (filteredAddresses?.length ?? 0) - 1 ? "last" :
- undefined
+ let index: Index = undefined
+ if (addressIndex === 0) {
+ index = "first"
+ } else if (addressIndex > 0 && addressIndex === (filteredAddresses?.length ?? 0) - 1) {
+ index = "last"
+ }
 
  // TODO: Show loading status visually
  return (
  <Div isHeader={ isHeader }>
- { showTitle &&
- <AddressLink title={ title } bagId={ bagId } as={ headingSize ?? "span" } />
- }
- { showButton &&
- <ButtonWrap>
- <ShowOtherAddressesButton bagId={ bagId } index={ index } />
- </ButtonWrap>
- }
+ { showTitle && <AddressLink title={ title } bagId={ bagId } as={ headingSize ?? "span" } /> }
+ { showButton && (
+ <ButtonWrap>
+ <ShowOtherAddressesButton bagId={ bagId } index={ index } />
+ </ButtonWrap>
+ )}
  </Div>
  )
 }

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

@@ -6,7 +6,7 @@ import { Button, Icon } from "@amsterdam/asc-ui"
 import { useModal } from "app/components/shared/Modal/hooks/useModal"
 import OtherAddressesModal from "./OtherAddressesModal"
 
-type Index = "first" | "last" | undefined
+export type Index = "first" | "last" | undefined
 type Props = {
  bagId: Components.Schemas.Address["bag_id"]
  index: Index
@@ -21,9 +21,9 @@ const StyledIcon = styled(Icon)`
 const renderIcon = (index: Index) => {
  switch(index) {
  case "first":
- return <StyledIcon size={32}><ExpandMore/></StyledIcon>
+ return <StyledIcon size={ 32 }><ExpandMore/></StyledIcon>
  case "last":
- return <StyledIcon size={32}><ExpandLess/></StyledIcon>
+ return <StyledIcon size={ 32 }><ExpandLess/></StyledIcon>
  default:
  return <StyledIcon
  size={ 32 }

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

@@ -1,5 +1,6 @@
 import { useBAG, useBAGLodging } from "app/state/rest"
 import { DefinitionList } from "@amsterdam/wonen-ui"
+import getAddressFromBagResults from "app/components/addresses/utils/getAddressFromBagResults"
 import useValues from "./hooks/useValues"
 
 type Props = {
@@ -8,8 +9,11 @@ type Props = {
 
 const ObjectDetails: React.FC<Props> = ({ bagId }) => {
 
- const [BAGAddress, { isBusy: isBusyAddress }] = useBAG(bagId)
- const { type, subtype_id } = BAGAddress?.results[0] ?? {}
+ 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

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

@@ -1,9 +1,9 @@
-export default (BAGAddressResponse?: BAGAddressResponse, BAGObjectResponse?: BAGObjectResponse) => {
+export default (BAGAddress?: BAGAddressResponse["results"][number], BAGObjectResponse?: BAGObjectResponse) => {
 
- if (BAGAddressResponse === undefined || BAGObjectResponse === undefined) return
+ if (BAGAddress === undefined || BAGObjectResponse === undefined) return
 
  const values = [
- ["Bestemming", BAGAddressResponse.results[0]?.type ?? "-"],
+ ["Bestemming", BAGAddress?.type ?? "-"],
  ["Oppervlakte", BAGObjectResponse.oppervlakte ? `${ BAGObjectResponse.oppervlakte }m²` : "-"],
  ["Bouwlagen", BAGObjectResponse.bouwlagen],
  ["Aantal kamers", BAGObjectResponse.aantal_kamers]

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

@@ -1,5 +1,4 @@
-const getAddressAsString = (data?: BAGAddressResponse) => {
- const address = data?.results[0]
+const getAddressAsString = (address?: BAGAddressResponse["results"][number]) => {
  if (!address) return
  const { straatnaam, huisnummer, bag_huisletter, bag_toevoeging } = address
  return (

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

@@ -0,0 +1,5 @@
+const getAddressFromBagResults = (data?: BAGAddressResponse): BAGAddressResponse["results"][number] | undefined => (
+ data?.results?.find((result) => result.type_adres === "Hoofdadres")
+)
+
+export default getAddressFromBagResults

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

@@ -9,6 +9,7 @@ import ConfirmScaffoldForm from "app/components/shared/ConfirmScaffoldForm/Confi
 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"
 
 const TON_THEME_NAME = "Vakantieverhuur"
 const TON_REASON_NAME = "Digitaal toezicht"
@@ -25,25 +26,25 @@ type Props = {
 const mapData = (bagId: Components.Schemas.Address["bag_id"], tonId: number | undefined) =>
  (data: any): any => {
  const mappedData = {
- ...data,
- bag_id: bagId,
- theme_id: data.theme.id,
- reason_id: data.reason.id,
- project_id: data.project?.id,
- ton_ids: tonId !== undefined ? [ tonId ] : undefined,
- subject_ids: data.subjects.map((subject: any) => subject.id),
- previous_case: data.previous_case?.id || undefined,
- housing_corporation: data.housing_corporation?.id || undefined
- }
- if (data.identification) {
- mappedData.citizen_reports = [{
  ...data,
- nuisance: Array.isArray(data?.nuisance) && data?.nuisance?.includes("nuisance"),
- advertisements: undefined
- }]
+ bag_id: bagId,
+ theme_id: data.theme.id,
+ reason_id: data.reason.id,
+ project_id: data.project?.id,
+ ton_ids: tonId !== undefined ? [ tonId ] : undefined,
+ subject_ids: data.subjects.map((subject: any) => subject.id),
+ previous_case: data.previous_case?.id || undefined,
+ housing_corporation: data.housing_corporation?.id || undefined
+ }
+ if (data.identification) {
+ mappedData.citizen_reports = [{
+ ...data,
+ nuisance: Array.isArray(data?.nuisance) && data?.nuisance?.includes("nuisance"),
+ advertisements: undefined
+ }]
+ }
+ return mappedData
  }
- return mappedData
-}
 
 const CreateForm: React.FC<Props> = ({ bagId, tonId }) => {
  const [caseThemes] = useCaseThemes()
@@ -63,7 +64,9 @@ const CreateForm: React.FC<Props> = ({ bagId, tonId }) => {
  const [listing] = useListing(tonId)
  const [cases] = useCasesByBagId(bagId)
  const [corporations] = useCorporations()
- const [bagAddress] = useBAG(bagId)
+ const [bagAddressResponse] = useBAG(bagId)
+ const bagAddress = getAddressFromBagResults(bagAddressResponse)
+
 
  // Only show Vakantieverhuur, Digitaal Toezicht and Yes as an option for TON.
  const caseThemesOptions = tonId ? caseThemes?.results?.filter(({ name }) => name === TON_THEME_NAME) : caseThemes?.results
@@ -91,7 +94,7 @@ const CreateForm: React.FC<Props> = ({ bagId, tonId }) => {
  setThemeId(undefined)
  setTimeout(() => {
  setThemeId(newThemeId)
- }, 0)
+  }, 0)
  }
 
  /*
@@ -131,7 +134,7 @@ const CreateForm: React.FC<Props> = ({ bagId, tonId }) => {
  reason: reasons?.results?.find(({ name }) => name === TON_REASON_NAME),
  advertisement: "yes",
  advertisements: [{ link: listing?.url }]
-  } : {}
+ } : {}
  }
 
  const addressString = getAddressAsString(bagAddress)

src/app/components/shared/AddressHeadingByBagId/AddressHeadingByBagId.tsx

@@ -3,7 +3,7 @@ import styled from "styled-components"
 import { Heading, themeSpacing } from "@amsterdam/asc-ui"
 import { useBAG } from "app/state/rest/"
 import AddressDisplay from "app/components/addresses/AddressDisplay/AddressDisplay"
-
+import getAddressFromBagResults from "app/components/addresses/utils/getAddressFromBagResults"
 
 type Props = {
  bagId: Components.Schemas.Address["bag_id"]
@@ -15,7 +15,7 @@ const Div = styled.div`
 
 const AddressHeadingByBagId: React.FC<Props> = ({ bagId }) => {
  const [data] = useBAG(bagId)
- const address = data?.results[0]
+ const address = getAddressFromBagResults(data)
 
  return (
  <>

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

@@ -1,14 +1,15 @@
 import { useBAG, useBAGWithStreet } from "app/state/rest/index"
+import getAddressFromBagResults from "app/components/addresses/utils/getAddressFromBagResults"
 
 /**
  * Returns other addresses with the same postcode + huisnummer
  * @param bagId
  */
 const useOtherAddressesByBagId = (bagId: Components.Schemas.Address["bag_id"]) => {
  const [data] = useBAG(bagId)
- const firstResult = data?.results?.[0]
- const searchQuery = `${ firstResult?.postcode } ${ firstResult?.huisnummer }`
+ const foundAddress = getAddressFromBagResults(data)
+ const searchQuery = `${ foundAddress?.postcode } ${ foundAddress?.huisnummer }`
  const [otherAddresses, otherAddressesMethods] = useBAGWithStreet(searchQuery, { lazy: data === undefined })
- return [otherAddresses?.results?.filter(({ huisnummer }) => huisnummer === firstResult?.huisnummer), otherAddressesMethods] as const
+ return [otherAddresses?.results?.filter(({ huisnummer }) => huisnummer === foundAddress?.huisnummer), otherAddressesMethods] as const
 }
 export default useOtherAddressesByBagId

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

@@ -1,16 +1,18 @@
 import { useBAG, usePanorama } from "app/state/rest/index"
+import getAddressFromBagResults from "app/components/addresses/utils/getAddressFromBagResults"
 
 const usePanoramaByBagId = (bagId: string, width: number | undefined, aspect: number | undefined, radius: number, fov: number | undefined) => {
  const [data] = useBAG(bagId)
+ const foundAddress = getAddressFromBagResults(data)
 
  return usePanorama(
- data?.results?.[0]?.centroid[1],
- data?.results?.[0]?.centroid[0],
+ foundAddress?.centroid[1],
+ foundAddress?.centroid[0],
  width,
  aspect,
  radius,
  fov,
- { lazy: data?.results?.[0] === undefined || width === undefined }
+ { lazy: foundAddress === undefined || width === undefined }
  )
 }