diff --git a/src/app/components/addresses/AddressHeader/AddressHeader.tsx b/src/app/components/addresses/AddressHeader/AddressHeader.tsx index 920c0deb3..e47ca567a 100644 --- a/src/app/components/addresses/AddressHeader/AddressHeader.tsx +++ b/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 = ({ 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 (
- { showTitle && - - } - { showButton && - - - - } + { showTitle && } + { showButton && ( + + + + )}
) } diff --git a/src/app/components/addresses/AddressSuffixSwitcher/ShowOtherAddressesButton.tsx b/src/app/components/addresses/AddressSuffixSwitcher/ShowOtherAddressesButton.tsx index 668841999..a6f9ed7db 100644 --- a/src/app/components/addresses/AddressSuffixSwitcher/ShowOtherAddressesButton.tsx +++ b/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 + return case "last": - return + return default: return = ({ 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 diff --git a/src/app/components/addresses/ObjectDetails/hooks/useValues.ts b/src/app/components/addresses/ObjectDetails/hooks/useValues.ts index 7d550b05b..e4db90ecb 100644 --- a/src/app/components/addresses/ObjectDetails/hooks/useValues.ts +++ b/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] diff --git a/src/app/components/addresses/utils/getAddressAsString.ts b/src/app/components/addresses/utils/getAddressAsString.ts index 140deab86..4a5974b19 100644 --- a/src/app/components/addresses/utils/getAddressAsString.ts +++ b/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 ( diff --git a/src/app/components/addresses/utils/getAddressFromBagResults.ts b/src/app/components/addresses/utils/getAddressFromBagResults.ts new file mode 100644 index 000000000..619cc0dff --- /dev/null +++ b/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 diff --git a/src/app/components/cases/CreateForm/CreateForm.tsx b/src/app/components/cases/CreateForm/CreateForm.tsx index f5bd52d52..588875a77 100644 --- a/src/app/components/cases/CreateForm/CreateForm.tsx +++ b/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 = ({ bagId, tonId }) => { const [caseThemes] = useCaseThemes() @@ -63,7 +64,9 @@ const CreateForm: React.FC = ({ 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 = ({ bagId, tonId }) => { setThemeId(undefined) setTimeout(() => { setThemeId(newThemeId) - }, 0) + }, 0) } /* @@ -131,7 +134,7 @@ const CreateForm: React.FC = ({ bagId, tonId }) => { reason: reasons?.results?.find(({ name }) => name === TON_REASON_NAME), advertisement: "yes", advertisements: [{ link: listing?.url }] - } : {} + } : {} } const addressString = getAddressAsString(bagAddress) diff --git a/src/app/components/shared/AddressHeadingByBagId/AddressHeadingByBagId.tsx b/src/app/components/shared/AddressHeadingByBagId/AddressHeadingByBagId.tsx index a1e2b9b42..8a6778fbc 100644 --- a/src/app/components/shared/AddressHeadingByBagId/AddressHeadingByBagId.tsx +++ b/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 = ({ bagId }) => { const [data] = useBAG(bagId) - const address = data?.results[0] + const address = getAddressFromBagResults(data) return ( <> diff --git a/src/app/state/rest/custom/useOtherAddresses/useOtherAddresses.ts b/src/app/state/rest/custom/useOtherAddresses/useOtherAddresses.ts index ad92974f5..99e02d21d 100644 --- a/src/app/state/rest/custom/useOtherAddresses/useOtherAddresses.ts +++ b/src/app/state/rest/custom/useOtherAddresses/useOtherAddresses.ts @@ -1,4 +1,5 @@ import { useBAG, useBAGWithStreet } from "app/state/rest/index" +import getAddressFromBagResults from "app/components/addresses/utils/getAddressFromBagResults" /** * Returns other addresses with the same postcode + huisnummer @@ -6,9 +7,9 @@ import { useBAG, useBAGWithStreet } from "app/state/rest/index" */ 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 diff --git a/src/app/state/rest/custom/usePanoramaByBagId/usePanoramaByBagId.ts b/src/app/state/rest/custom/usePanoramaByBagId/usePanoramaByBagId.ts index abef08362..54d2a94c3 100644 --- a/src/app/state/rest/custom/usePanoramaByBagId/usePanoramaByBagId.ts +++ b/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 } ) }