diff --git a/src/components/IconList/IconList.tsx b/src/components/IconList/IconList.tsx index 7b773730e6..edbd74dce9 100644 --- a/src/components/IconList/IconList.tsx +++ b/src/components/IconList/IconList.tsx @@ -1,15 +1,17 @@ // SPDX-License-Identifier: MPL-2.0 -// Copyright (C) 2021-2023 Gemeente Amsterdam +// Copyright (C) 2021 - 2023 Gemeente Amsterdam import type { ReactNode } from 'react' -import { useCallback, useState } from 'react' +import { useCallback, useEffect, useMemo, useState } from 'react' import { List } from '@amsterdam/asc-ui' +import { useSelector } from 'react-redux' import styled from 'styled-components' import type { FeatureStatusType, Item, } from 'signals/incident/components/form/MapSelectors/types' +import { makeSelectMaxAssetWarning } from 'signals/incident/containers/IncidentContainer/selectors' import { StyledListItem, StyledImg, StatusIcon } from './styled' import Checkbox from '../Checkbox' @@ -42,21 +44,31 @@ export const IconListItem = ({ const [checkedState, setCheckedState] = useState( undefined ) - const [disabled, setDisabled] = useState(false) + const { maxAssetWarning } = useSelector(makeSelectMaxAssetWarning) + + useEffect(() => { + setCheckedState(checked) + }, [checked, maxAssetWarning]) + + const disableOnClick = useMemo(() => { + if (maxAssetWarning) { + return checked + } + + return true + }, [checked, maxAssetWarning]) const onClickWithDelay = useCallback( (item) => { - if (onClick && !disabled) { - setDisabled(true) + if (onClick && disableOnClick) { setCheckedState(!checked) const timeout = setTimeout(() => { onClick(item) - setDisabled(false) - }, 600) + }, 400) return () => clearTimeout(timeout) } }, - [checked, disabled, onClick] + [checked, disableOnClick, onClick] ) return ( diff --git a/src/signals/incident/components/form/MapSelectors/Asset/AssetList/hooks/useSelectionProps.test.tsx b/src/signals/incident/components/form/MapSelectors/Asset/AssetList/hooks/useSelectionProps.test.tsx index 960029d64b..00240e1015 100644 --- a/src/signals/incident/components/form/MapSelectors/Asset/AssetList/hooks/useSelectionProps.test.tsx +++ b/src/signals/incident/components/form/MapSelectors/Asset/AssetList/hooks/useSelectionProps.test.tsx @@ -1,6 +1,7 @@ // SPDX-License-Identifier: MPL-2.0 // Copyright (C) 2023 Gemeente Amsterdam import { act, renderHook } from '@testing-library/react-hooks' +import * as reactRedux from 'react-redux' import reverseGeocoderService from 'shared/services/reverse-geocoder' @@ -90,10 +91,18 @@ describe('useSelectionProps', () => { ], }, } + + beforeEach(() => { + jest + .spyOn(reactRedux, 'useSelector') + .mockReturnValue({ makeSelectMaxAssetWarning: false }) + }) + it('should give a result', async () => { jest.mocked(reverseGeocoderService).mockImplementation(async () => { return geocodedResponse }) + const result = renderHook(() => useSelectionProps({ featureTypes: props.featureTypes, diff --git a/src/signals/incident/components/form/MapSelectors/Asset/AssetList/hooks/useSelectionProps.tsx b/src/signals/incident/components/form/MapSelectors/Asset/AssetList/hooks/useSelectionProps.tsx index d9efc62eb3..1d23f9412b 100644 --- a/src/signals/incident/components/form/MapSelectors/Asset/AssetList/hooks/useSelectionProps.tsx +++ b/src/signals/incident/components/form/MapSelectors/Asset/AssetList/hooks/useSelectionProps.tsx @@ -2,6 +2,10 @@ // Copyright (C) 2023 Gemeente Amsterdam import { useContext } from 'react' +import { useSelector } from 'react-redux' + +import { makeSelectMaxAssetWarning } from 'signals/incident/containers/IncidentContainer/selectors' + import { featureToCoordinates } from '../../../../../../../../shared/services/map-location' import reverseGeocoderService from '../../../../../../../../shared/services/reverse-geocoder' import type { @@ -16,7 +20,6 @@ import type { Feature, FeatureType, Item } from '../../../types' import { FeatureStatus } from '../../../types' import AssetSelectContext from '../../context' import type { Props } from '../AssetListItemSelectable' - const getFeatureType = (feature: Feature, featureTypes: FeatureType[]) => { return featureTypes.find( ({ typeField, typeValue }) => feature.properties[typeField] === typeValue @@ -29,6 +32,7 @@ export const useSelectionProps = ({ selection, }: Props) => { const { setItem } = useContext(AssetSelectContext) + const { maxAssetWarning } = useSelector(makeSelectMaxAssetWarning) const coordinates = featureToCoordinates(feature.geometry as Geometrie) @@ -60,7 +64,7 @@ export const useSelectionProps = ({ featureTypes?.find(({ typeValue }) => typeValue === item.type) ?? {} const onClick = async () => { - if (typeValue !== FeatureStatus.REPORTED) { + if (typeValue !== FeatureStatus.REPORTED && !maxAssetWarning) { const location: Location = { coordinates } const item: Item = { @@ -72,8 +76,6 @@ export const useSelectionProps = ({ coordinates, } - setItem(item, location) - const response = await reverseGeocoderService(coordinates) if (response) { diff --git a/src/signals/incident/components/form/MapSelectors/Asset/AssetSelect.tsx b/src/signals/incident/components/form/MapSelectors/Asset/AssetSelect.tsx index f4a9c2e9e3..6df4329acb 100644 --- a/src/signals/incident/components/form/MapSelectors/Asset/AssetSelect.tsx +++ b/src/signals/incident/components/form/MapSelectors/Asset/AssetSelect.tsx @@ -6,10 +6,11 @@ import { useCallback, useState } from 'react' import type { FeatureCollection } from 'geojson' import type { LatLngLiteral } from 'leaflet' -import { useSelector } from 'react-redux' +import { useDispatch, useSelector } from 'react-redux' import Summary from 'components/Summary' import reverseGeocoderService from 'shared/services/reverse-geocoder' +import { updateIncident as updateReduxIncident } from 'signals/incident/containers/IncidentContainer/actions' import { makeSelectIncidentContainer } from 'signals/incident/containers/IncidentContainer/selectors' import type { Incident, Location } from 'types/incident' @@ -61,9 +62,9 @@ export interface AssetSelectProps { } const AssetSelect: FC = ({ value, layer, meta, parent }) => { + const dispatch = useDispatch() const { selection, location } = value || {} const [message, setMessage] = useState() - const [addressLoading, setAddressLoading] = useState(false) const [selectableFeatures, setSelectableFeatures] = useState< FeatureCollection | undefined >(undefined) @@ -107,6 +108,7 @@ const AssetSelect: FC = ({ value, layer, meta, parent }) => { selection: selectedItem ? [selectedItem] : undefined, } + dispatch(updateReduxIncident({ maxAssetWarning: false })) parent.meta.removeFromSelection({ [meta.name as string]: payload, meta_name: meta.name, @@ -149,11 +151,9 @@ const AssetSelect: FC = ({ value, layer, meta, parent }) => { updateIncident(payload) if (payload.location) { - setAddressLoading(true) const response = await reverseGeocoderService(latLng) payload.location.address = response?.data?.address updateIncident(payload) - setAddressLoading(false) } }, [address, getUpdatePayload, updateIncident] @@ -204,7 +204,6 @@ const AssetSelect: FC = ({ value, layer, meta, parent }) => { layer, message, selectableFeatures, - addressLoading, meta: { ...meta, featureTypes, @@ -216,7 +215,6 @@ const AssetSelect: FC = ({ value, layer, meta, parent }) => { fetchLocation, setMessage, setSelectableFeatures, - setAddressLoading, }} > {!mapActive && !hasSelection && } diff --git a/src/signals/incident/components/form/MapSelectors/Asset/Selector_v2_removeafterfinishepic5440/DetailPanel/DetailPanel.test.tsx b/src/signals/incident/components/form/MapSelectors/Asset/Selector_v2_removeafterfinishepic5440/DetailPanel/DetailPanel.test.tsx index 665f3f9b46..b41448557d 100644 --- a/src/signals/incident/components/form/MapSelectors/Asset/Selector_v2_removeafterfinishepic5440/DetailPanel/DetailPanel.test.tsx +++ b/src/signals/incident/components/form/MapSelectors/Asset/Selector_v2_removeafterfinishepic5440/DetailPanel/DetailPanel.test.tsx @@ -292,9 +292,10 @@ describe('DetailPanel', () => { userEvent.click(screen.getByTestId('legend-toggle-button')) - await waitFor(() => { - expect(screen.getByTestId('close-button')).toHaveFocus() - }) + await waitFor(() => {}) + const closeButton = screen.getByTestId('close-button') + + expect(closeButton).toHaveFocus() }) /** diff --git a/src/signals/incident/components/form/MapSelectors/Asset/Selector_v2_removeafterfinishepic5440/DetailPanel/DetailPanel.tsx b/src/signals/incident/components/form/MapSelectors/Asset/Selector_v2_removeafterfinishepic5440/DetailPanel/DetailPanel.tsx index 7661acbf15..fa9980da31 100644 --- a/src/signals/incident/components/form/MapSelectors/Asset/Selector_v2_removeafterfinishepic5440/DetailPanel/DetailPanel.tsx +++ b/src/signals/incident/components/form/MapSelectors/Asset/Selector_v2_removeafterfinishepic5440/DetailPanel/DetailPanel.tsx @@ -23,7 +23,6 @@ import { StyledLabelPDOkAutoSuggest, StyledParagraphPDOkAutoSuggest, } from './styled' -import { useCurrentAddress } from './useCurrentAddress' import { useResetDrawerState } from './useResetDrawerState' import { DrawerOverlay, @@ -53,7 +52,6 @@ const DetailPanel: FC = ({ language, zoomLevel }) => { setLocation, meta, selectableFeatures, - addressLoading, } = useContext(AssetSelectContext) const { featureTypes } = meta const featureStatusTypes = meta.featureStatusTypes || [] @@ -88,18 +86,13 @@ const DetailPanel: FC = ({ language, zoomLevel }) => { : 100 }, [selection, zoomLevel, featureTypes, legendOpen]) - const currentAddress = useCurrentAddress({ - address, - addressLoading, - }) - return ( {!shouldRenderMobileVersion && ( @@ -114,7 +107,10 @@ const DetailPanel: FC = ({ language, zoomLevel }) => { variant="blank" /> )} - + {!shouldRenderMobileVersion && ( <> @@ -147,17 +143,17 @@ const DetailPanel: FC = ({ language, zoomLevel }) => { zoomLevel={zoomLevel} /> )} - {currentAddress && !shouldRenderMobileVersion && ( - dispatch(closeMap())} - variant="primary" - data-testid="asset-select-submit-button" - tabIndex={0} - > - {submitButtonText} - - )} + {address && !shouldRenderMobileVersion && ( + dispatch(closeMap())} + variant="primary" + data-testid="asset-select-submit-button" + tabIndex={0} + > + {submitButtonText} + + )} { @@ -165,13 +161,15 @@ const DetailPanel: FC = ({ language, zoomLevel }) => { setLegendOpen(!legendOpen) }} /> - {shouldRenderMobileVersion && currentAddress && ( + {shouldRenderMobileVersion && address && ( dispatch(closeMap())} variant="primary" data-testid="asset-select-submit-button" tabIndex={0} + $isMobile={shouldRenderMobileVersion} + $hasSubmitButton={!!address} > {submitButtonText} diff --git a/src/signals/incident/components/form/MapSelectors/Asset/Selector_v2_removeafterfinishepic5440/DetailPanel/styled.tsx b/src/signals/incident/components/form/MapSelectors/Asset/Selector_v2_removeafterfinishepic5440/DetailPanel/styled.tsx index 05ec5d8622..5721368264 100644 --- a/src/signals/incident/components/form/MapSelectors/Asset/Selector_v2_removeafterfinishepic5440/DetailPanel/styled.tsx +++ b/src/signals/incident/components/form/MapSelectors/Asset/Selector_v2_removeafterfinishepic5440/DetailPanel/styled.tsx @@ -1,13 +1,12 @@ // SPDX-License-Identifier: MPL-2.0 // Copyright (C) 2022-2023 Gemeente Amsterdam import { Button, themeSpacing, themeColor, breakpoint } from '@amsterdam/asc-ui' -import styled from 'styled-components' +import styled, { css } from 'styled-components' import { DETAIL_PANEL_WIDTH } from '../../../constants' import AssetList from '../../AssetList' import LegendPanel from '../LegendPanel' import LegendToggle from '../LegendToggleButton' -import { ScrollWrapper } from '../styled' export const StyledBackButton = styled(Button)` @media only screen and ${breakpoint('min-width', 'tabletM')} { @@ -27,9 +26,29 @@ export const StyledAssetList = styled(AssetList)` } ` -export const StyledButton = styled(Button)` - margin-top: ${themeSpacing(4)}; +export const StyledButton = styled(Button)<{ + $isMobile?: boolean + $hasSubmitButton?: boolean +}>` + position: sticky; + margin: ${themeSpacing(4)}; + bottom: 0; + z-index: 1; font-family: inherit; + + ${({ $isMobile }) => + $isMobile && + css` + margin: 0; + position: relative; + `} + + ${({ $hasSubmitButton, $isMobile }) => + $hasSubmitButton && + $isMobile && + css` + height: calc(100% - 44px); + `} ` export const StyledButtonWrapper = styled.div` @@ -41,10 +60,6 @@ export const StyledButtonWrapper = styled.div` padding: ${themeSpacing(5)}; background: white; box-shadow: rgba(0, 0, 0, 0.1) 0px -4px 4px 0px; - - ${StyledButton} { - margin-top: 0; - } ` export const LegendToggleButton = styled(LegendToggle)` @@ -67,12 +82,6 @@ export const PanelContent = styled.div` z-index: 1; position: relative; height: 100%; - - @media only screen and ${breakpoint('max-width', 'tabletM')} { - ${ScrollWrapper} { - padding-top: 0; - } - } ` export const StyledLegendPanel = styled(LegendPanel)` diff --git a/src/signals/incident/components/form/MapSelectors/Asset/Selector_v2_removeafterfinishepic5440/DetailPanel/useCurrentAddress.test.tsx b/src/signals/incident/components/form/MapSelectors/Asset/Selector_v2_removeafterfinishepic5440/DetailPanel/useCurrentAddress.test.tsx deleted file mode 100644 index 782da4286a..0000000000 --- a/src/signals/incident/components/form/MapSelectors/Asset/Selector_v2_removeafterfinishepic5440/DetailPanel/useCurrentAddress.test.tsx +++ /dev/null @@ -1,54 +0,0 @@ -// SPDX-License-IdentifiaddressExampleer: MPL-2.0 -// Copyright (C) 2023 Gemeente Amsterdam -import { renderHook } from '@testing-library/react-hooks' -import { act } from 'react-test-renderer' - -import { useCurrentAddress } from './useCurrentAddress' - -const addressExample = { - postcode: '1234AB', - huisnummer: '1', - huisnummer_toevoeging: 'B', - openbare_ruimte: 'Straatnaam', - woonplaats: 'Amsterdam', -} - -describe('useCurrentAddress', () => { - beforeEach(() => { - jest.useFakeTimers() - }) - - afterEach(() => { - jest.useRealTimers() - }) - - it('should get current address', () => { - let addressLoading = true - const { result, rerender } = renderHook(() => - useCurrentAddress({ - address: addressExample, - addressLoading, - }) - ) - - expect(result.current).toEqual(undefined) - - addressLoading = false - - rerender() - - act(() => { - jest.advanceTimersByTime(50) - }) - - addressLoading = true - - rerender() - - act(() => { - jest.runAllTimers() - }) - - expect(result.current).toEqual(addressExample) - }) -}) diff --git a/src/signals/incident/components/form/MapSelectors/Asset/Selector_v2_removeafterfinishepic5440/DetailPanel/useCurrentAddress.tsx b/src/signals/incident/components/form/MapSelectors/Asset/Selector_v2_removeafterfinishepic5440/DetailPanel/useCurrentAddress.tsx deleted file mode 100644 index 56dd169418..0000000000 --- a/src/signals/incident/components/form/MapSelectors/Asset/Selector_v2_removeafterfinishepic5440/DetailPanel/useCurrentAddress.tsx +++ /dev/null @@ -1,41 +0,0 @@ -// SPDX-License-Identifier: MPL-2.0 -// Copyright (C) 2023 Gemeente Amsterdam -import { useEffect, useRef, useState } from 'react' - -import type { Address } from '../../../../../../../../types/address' - -type Props = { - address: Address | undefined - addressLoading: boolean -} - -export const useCurrentAddress = ({ address, addressLoading }: Props) => { - const newAddressRef = useRef
(address) - const [currentAddress, setCurrentAddress] = useState
( - undefined - ) - const prevAddressLoading = useRef(undefined) - useEffect(() => { - newAddressRef.current = address - - const timeoutId = setTimeout(() => { - setCurrentAddress(newAddressRef.current) - prevAddressLoading.current = addressLoading - }, 100) - - if (!addressLoading && prevAddressLoading.current) { - setCurrentAddress(newAddressRef.current) - clearTimeout(timeoutId) - prevAddressLoading.current = addressLoading - return - } - - prevAddressLoading.current = addressLoading - - return () => { - clearTimeout(timeoutId) - } - }, [address, addressLoading]) - - return currentAddress -} diff --git a/src/signals/incident/components/form/MapSelectors/Asset/Selector_v2_removeafterfinishepic5440/NearbyLayer/NearbyLayer.tsx b/src/signals/incident/components/form/MapSelectors/Asset/Selector_v2_removeafterfinishepic5440/NearbyLayer/NearbyLayer.tsx index 6b7caa3427..9cf5ff58a3 100644 --- a/src/signals/incident/components/form/MapSelectors/Asset/Selector_v2_removeafterfinishepic5440/NearbyLayer/NearbyLayer.tsx +++ b/src/signals/incident/components/form/MapSelectors/Asset/Selector_v2_removeafterfinishepic5440/NearbyLayer/NearbyLayer.tsx @@ -76,8 +76,7 @@ export function findAssetMatch( } export const NearbyLayer: FC = ({ zoomLevel }) => { - const { selection, setItem, setAddressLoading } = - useContext(AssetSelectContext) + const { selection, setItem } = useContext(AssetSelectContext) const bbox = useBoundingBox() const layerVisible = useLayerVisible(zoomLevel) const mapInstance = useMapInstance() @@ -107,7 +106,6 @@ export const NearbyLayer: FC = ({ zoomLevel }) => { setItem(item, location) - setAddressLoading(true) const response = await reverseGeocoderService(coordinates) if (response) { location.address = response.data.address @@ -115,9 +113,8 @@ export const NearbyLayer: FC = ({ zoomLevel }) => { } setItem(item, location) - setAddressLoading(false) }, - [setItem, setAddressLoading] + [setItem] ) useEffect(() => { diff --git a/src/signals/incident/components/form/MapSelectors/Asset/Selector_v2_removeafterfinishepic5440/Selector.tsx b/src/signals/incident/components/form/MapSelectors/Asset/Selector_v2_removeafterfinishepic5440/Selector.tsx index 93cd65007d..615e6e7942 100644 --- a/src/signals/incident/components/form/MapSelectors/Asset/Selector_v2_removeafterfinishepic5440/Selector.tsx +++ b/src/signals/incident/components/form/MapSelectors/Asset/Selector_v2_removeafterfinishepic5440/Selector.tsx @@ -35,7 +35,10 @@ import configuration from 'shared/services/configuration/configuration' import { markerIcon } from 'shared/services/configuration/map-markers' import MAP_OPTIONS from 'shared/services/configuration/map-options' import AssetSelectContext from 'signals/incident/components/form/MapSelectors/Asset/context' -import { closeMap } from 'signals/incident/containers/IncidentContainer/actions' +import { + closeMap, + updateIncident, +} from 'signals/incident/containers/IncidentContainer/actions' import { makeSelectMaxAssetWarning } from 'signals/incident/containers/IncidentContainer/selectors' import type { LocationResult } from 'types/location' @@ -114,7 +117,6 @@ const Selector: FC = () => { } const [mapMessage, setMapMessage] = useState() - const [maxAssetWarningActive, setMaxAssetWarningActive] = useState(true) const [pinMarker, setPinMarker] = useState() const [map, setMap] = useState() const hasFeatureTypes = meta.featureTypes.length > 0 @@ -159,7 +161,7 @@ const Selector: FC = () => { }, []) useEffect(() => { - if (maxAssetWarning && maxAssetWarningActive) { + if (maxAssetWarning) { const number = maxNumberOfAssets === 1 ? meta?.language?.objectTypeSingular || 'object' @@ -168,19 +170,12 @@ const Selector: FC = () => { } }, [ maxAssetWarning, - maxAssetWarningActive, maxNumberOfAssets, mapMessage, meta?.language?.objectTypePlural, meta?.language?.objectTypeSingular, ]) - useEffect(() => { - if (!maxAssetWarning && selection && selection.length !== 0) { - setMaxAssetWarningActive(true) - } - }, [maxAssetWarningActive, maxAssetWarning, selection]) - const shouldRenderMobileVersion = useMediaQuery({ query: breakpoint('max-width', 'tabletM')({ theme: ascDefaultTheme }), }) @@ -254,7 +249,7 @@ const Selector: FC = () => { data-testid="map-message" onClick={() => { setMapMessage('') - setMaxAssetWarningActive(false) + dispatch(updateIncident({ maxAssetWarning: false })) }} > {mapMessage} diff --git a/src/signals/incident/components/form/MapSelectors/Asset/Selector_v2_removeafterfinishepic5440/WfsLayer/AssetLayer/AssetLayer.tsx b/src/signals/incident/components/form/MapSelectors/Asset/Selector_v2_removeafterfinishepic5440/WfsLayer/AssetLayer/AssetLayer.tsx index 6f56e08804..619f859bcc 100644 --- a/src/signals/incident/components/form/MapSelectors/Asset/Selector_v2_removeafterfinishepic5440/WfsLayer/AssetLayer/AssetLayer.tsx +++ b/src/signals/incident/components/form/MapSelectors/Asset/Selector_v2_removeafterfinishepic5440/WfsLayer/AssetLayer/AssetLayer.tsx @@ -28,7 +28,7 @@ import WfsDataContext from '../context' export const AssetLayer: FC = () => { const data = useContext(WfsDataContext) - const { selection, removeItem, setItem, setAddressLoading, meta } = + const { selection, removeItem, setItem, meta } = useContext(AssetSelectContext) const { featureTypes } = meta const featureStatusTypes = meta.featureStatusTypes || [] @@ -94,7 +94,6 @@ export const AssetLayer: FC = () => { setItem(item, location) - setAddressLoading(true) const response = await reverseGeocoderService(coordinates) if (response) { @@ -103,7 +102,6 @@ export const AssetLayer: FC = () => { } setItem(item, location) - setAddressLoading(false) } } diff --git a/src/signals/incident/components/form/MapSelectors/Asset/Selector_v2_removeafterfinishepic5440/styled.tsx b/src/signals/incident/components/form/MapSelectors/Asset/Selector_v2_removeafterfinishepic5440/styled.tsx index 0531645683..820b204238 100644 --- a/src/signals/incident/components/form/MapSelectors/Asset/Selector_v2_removeafterfinishepic5440/styled.tsx +++ b/src/signals/incident/components/form/MapSelectors/Asset/Selector_v2_removeafterfinishepic5440/styled.tsx @@ -110,16 +110,19 @@ export const TopLeftWrapper = styled.div` position: absolute; left: ${themeSpacing(4)}; top: ${themeSpacing(32)}; - + } ` export const ScrollWrapper = styled.div.attrs({ 'data-scroll-lock-scrollable': true, -})` +})<{ $hasSubmitButton?: boolean; $isMobile?: boolean }>` -webkit-overflow-scrolling: touch; - height: 100%; overflow-y: auto; padding: ${themeSpacing(5)}; + ${({ $hasSubmitButton, $isMobile }) => + $hasSubmitButton && !$isMobile + ? `max-height: calc(100% - 120px)}` + : `max-height: calc(100% - 44px)`}; ` export const Title = styled(Heading)` diff --git a/src/signals/incident/components/form/MapSelectors/Asset/__tests__/withAssetSelectContext.tsx b/src/signals/incident/components/form/MapSelectors/Asset/__tests__/withAssetSelectContext.tsx index fd68d8f4fe..03b5c8c81c 100644 --- a/src/signals/incident/components/form/MapSelectors/Asset/__tests__/withAssetSelectContext.tsx +++ b/src/signals/incident/components/form/MapSelectors/Asset/__tests__/withAssetSelectContext.tsx @@ -44,13 +44,11 @@ export const contextValue: AssetSelectValue = { woonplaats: 'Amsterdam', }, selectableFeatures: undefined, - addressLoading: false, setItem: jest.fn(), fetchLocation: jest.fn(), setLocation: jest.fn(), setMessage: jest.fn(), setSelectableFeatures: jest.fn(), - setAddressLoading: jest.fn(), } const withAssetSelectContext = (Component: ReactNode, context = contextValue) => diff --git a/src/signals/incident/components/form/MapSelectors/Asset/context.tsx b/src/signals/incident/components/form/MapSelectors/Asset/context.tsx index a223f1cec2..67340cb15c 100644 --- a/src/signals/incident/components/form/MapSelectors/Asset/context.tsx +++ b/src/signals/incident/components/form/MapSelectors/Asset/context.tsx @@ -17,14 +17,12 @@ export const initialValue: AssetSelectValue = { }, selection: undefined, selectableFeatures: undefined, - addressLoading: false, fetchLocation: /* istanbul ignore next */ () => {}, setLocation: /* istanbul ignore next */ () => {}, setMessage: /* istanbul ignore next */ () => {}, setItem: /* istanbul ignore next */ () => {}, removeItem: /* istanbul ignore next */ () => {}, setSelectableFeatures: /* istanbul ignore next */ () => {}, - setAddressLoading: /* istanbul ignore next */ () => {}, } const AssetSelectContext = createContext(initialValue) diff --git a/src/signals/incident/components/form/MapSelectors/Asset/types.ts b/src/signals/incident/components/form/MapSelectors/Asset/types.ts index 4b81b2ab81..b755bf3be1 100644 --- a/src/signals/incident/components/form/MapSelectors/Asset/types.ts +++ b/src/signals/incident/components/form/MapSelectors/Asset/types.ts @@ -14,20 +14,18 @@ import type { Meta, Item, FeatureType } from '../types' export interface AssetSelectValue { address?: Address - layer?: FC coordinates?: LatLngLiteral + fetchLocation: (latLng: LatLngLiteral) => void + layer?: FC message?: string meta: Meta - selectableFeatures?: FeatureCollection removeItem: (item?: Item) => void + selectableFeatures?: FeatureCollection selection?: Item[] - addressLoading: boolean setItem: (item: Item, location?: Location) => void - fetchLocation: (latLng: LatLngLiteral) => void setLocation: (location: Location) => void setMessage: (message?: string) => void setSelectableFeatures: (features?: FeatureCollection) => void - setAddressLoading: React.Dispatch> } export interface AssetSelectRendererProps extends FormFieldProps { diff --git a/src/signals/incident/components/form/MapSelectors/Caterpillar/CaterpillarLayer/CaterpillarLayer.tsx b/src/signals/incident/components/form/MapSelectors/Caterpillar/CaterpillarLayer/CaterpillarLayer.tsx index a3c77c05ad..b5d7b726fe 100644 --- a/src/signals/incident/components/form/MapSelectors/Caterpillar/CaterpillarLayer/CaterpillarLayer.tsx +++ b/src/signals/incident/components/form/MapSelectors/Caterpillar/CaterpillarLayer/CaterpillarLayer.tsx @@ -24,8 +24,7 @@ import { getFeatureStatusType } from '../../Asset/Selector_v2_removeafterfinishe /* istanbul ignore next */ export const CaterpillarLayer: FC = () => { const { features } = useContext(WfsDataContext) - const { selection, meta, setItem, removeItem, setAddressLoading } = - useContext(SelectContext) + const { selection, meta, setItem, removeItem } = useContext(SelectContext) const getMarker = useCallback( (feat: any, featureStatusTypes: FeatureStatusType[]) => { const feature = feat as Feature @@ -84,7 +83,6 @@ export const CaterpillarLayer: FC = () => { setItem(item, location) - setAddressLoading(true) const response = await reverseGeocoderService(coordinates) if (response) { @@ -93,7 +91,6 @@ export const CaterpillarLayer: FC = () => { } setItem(item, location) - setAddressLoading(false) } return ( @@ -111,14 +108,7 @@ export const CaterpillarLayer: FC = () => { /> ) }, - [ - meta.extraProperties, - meta.featureTypes, - removeItem, - selection, - setAddressLoading, - setItem, - ] + [meta.extraProperties, meta.featureTypes, removeItem, selection, setItem] ) const featureStatusTypes = meta.featureStatusTypes || []