[feat-5588]: refactor containers in detail panel (#2788)

* Refactor assetSelectableObject logic * Fix TSLint warnings * Fix tests * Fix get-feture-type test * Cleanup code * Add public lights case to mapper\ * PR feedback
Amsterdam · Dec 20, 2023 · 6f072a8 · 6f072a8
1 parent 01d58fd
commit 6f072a8
Show file tree

Hide file tree

Showing 24 changed files with 675 additions and 122 deletions.
diff --git a/src/components/IconList/IconList.tsx b/src/components/IconList/IconList.tsx
@@ -14,6 +14,7 @@ import type {
 import { makeSelectMaxAssetWarning } from 'signals/incident/containers/IncidentContainer/selectors'
 
 import { StyledListItem, StyledImg, StatusIcon } from './styled'
+import type { SelectableFeature } from '../../signals/incident/components/form/MapSelectors/types'
 import Checkbox from '../Checkbox'
 
 export interface IconListItemProps {
@@ -24,7 +25,7 @@ export interface IconListItemProps {
   featureStatusType?: FeatureStatusType
   children: ReactNode
   onClick?: (item: Item) => void
-  item?: Item
+  item?: SelectableFeature | Item
   checkboxDisabled?: boolean
   checked?: boolean
 }

diff --git a/src/signals/incident/components/form/MapSelectors/Asset/AssetList/AssetList.test.tsx b/src/signals/incident/components/form/MapSelectors/Asset/AssetList/AssetList.test.tsx
@@ -111,27 +111,16 @@ describe('AssetList', () => {
         coordinates: { lat: 1, lng: 2 },
       },
     ],
-    selectableFeatures: {
-      type: 'FeatureCollection',
-      features: [
-        {
-          type: 'Feature',
-          id: '123',
-          properties: {
-            fractie_omschrijving: 'Rest',
-            id: '123',
-            type: 'Rest',
-            status: FeatureStatus.REPORTED,
-            label: 'Rest container - 123',
-          },
-          geometry: {
-            type: 'Point',
-            coordinates: [1, 2],
-          },
-        },
-      ],
-    },
-    objectTypePlural: 'objecten',
+    selectableFeatures: [
+      {
+        type: 'Feature',
+        id: '123',
+        coordinates: { lat: 1, lng: 2 },
+        status: FeatureStatus.REPORTED,
+        label: 'Rest container - 123',
+        description: 'Rest',
+      },
+    ],
   }
 
   const reportedProps: AssetListProps = {

diff --git a/src/signals/incident/components/form/MapSelectors/Asset/AssetList/AssetList.tsx b/src/signals/incident/components/form/MapSelectors/Asset/AssetList/AssetList.tsx
@@ -2,16 +2,14 @@
 // Copyright (C) 2021 - 2023 Gemeente Amsterdam
 import type { FunctionComponent } from 'react'
 
-import type { FeatureCollection } from 'geojson'
-
 import IconList from 'components/IconList/IconList'
 import { capitalize } from 'shared/services/date-utils'
 
 import { AssetListItem } from './AssetListItem'
 import { AssetListItemSelectable } from './AssetListItemSelectable'
 import { ListDescription, ListHeading } from './styled'
-import type { Feature } from '../../types'
 import type { FeatureStatusType, FeatureType, Item } from '../../types'
+import type { SelectableFeature } from '../../types'
 
 export interface AssetListProps {
   className?: string
@@ -20,7 +18,7 @@ export interface AssetListProps {
   objectTypePlural?: string
   remove?: (item: Item) => void
   selection?: Item[]
-  selectableFeatures?: FeatureCollection
+  selectableFeatures?: SelectableFeature[]
   zoomLevel?: number
 }
 
@@ -36,8 +34,7 @@ const AssetList: FunctionComponent<AssetListProps> = ({
 }) => {
   const selectableComponents =
     selectableFeatures &&
-    selectableFeatures?.features?.map((feat: any) => {
-      const feature = feat as Feature
+    selectableFeatures?.map((feature) => {
       return (
         <AssetListItemSelectable
           key={feature.id}
@@ -65,10 +62,10 @@ const AssetList: FunctionComponent<AssetListProps> = ({
             ) && (
               <ListDescription>
                 {`Er zijn geen ${
-                  objectTypePlural || 'Objecten'
+                  objectTypePlural || 'objecten'
                 } in de buurt. Versleep de kaart om de ${
-                  objectTypePlural || 'Objecten'
-                }  te zien.`}
+                  objectTypePlural || 'objecten'
+                } te zien.`}
               </ListDescription>
             )}
         </>

diff --git a/...signals/incident/components/form/MapSelectors/Asset/AssetList/AssetListItemSelectable.tsx b/...signals/incident/components/form/MapSelectors/Asset/AssetList/AssetListItemSelectable.tsx
@@ -3,12 +3,13 @@
 import { useSelectionProps } from './hooks/useSelectionProps'
 import { StyledLabel, ListItem } from './styled'
 import { IconListItem } from '../../../../../../../components/IconList'
-import type { Feature, FeatureType, Item, FeatureStatusType } from '../../types'
+import type { FeatureType, Item, FeatureStatusType } from '../../types'
+import type { SelectableFeature } from '../../types'
 
 export type Props = {
   featureTypes: FeatureType[]
   featureStatusTypes: FeatureStatusType[]
-  feature: Feature
+  feature: SelectableFeature
   selection?: Item[]
 }
 

diff --git a/...ls/incident/components/form/MapSelectors/Asset/AssetList/hooks/useSelectionProps.test.tsx b/...ls/incident/components/form/MapSelectors/Asset/AssetList/hooks/useSelectionProps.test.tsx
@@ -70,26 +70,16 @@ describe('useSelectionProps', () => {
         coordinates: { lat: 1, lng: 2 },
       },
     ],
-    selectableFeatures: {
-      type: 'FeatureCollection',
-      features: [
-        {
-          type: 'Feature',
-          id: '123',
-          properties: {
-            fractie_omschrijving: 'Rest',
-            id: '123',
-            type: 'Rest',
-            status: FeatureStatus.REPORTED,
-            label: 'Rest container - 123',
-          },
-          geometry: {
-            type: 'Point',
-            coordinates: [1, 2],
-          },
-        },
-      ],
-    },
+    selectableFeatures: [
+      {
+        type: 'Feature',
+        id: '123',
+        coordinates: { lat: 2, lng: 1 },
+        status: FeatureStatus.REPORTED,
+        label: 'Rest container - 123',
+        description: 'Rest',
+      },
+    ],
   }
 
   beforeEach(() => {
@@ -107,7 +97,7 @@ describe('useSelectionProps', () => {
       useSelectionProps({
         featureTypes: props.featureTypes,
         featureStatusTypes: props.featureStatusTypes,
-        feature: props?.selectableFeatures?.features[0] as any,
+        feature: props?.selectableFeatures?.[0] as any,
         selection: [],
       })
     )
@@ -126,7 +116,7 @@ describe('useSelectionProps', () => {
       useSelectionProps({
         featureTypes: props.featureTypes,
         featureStatusTypes: props.featureStatusTypes,
-        feature: props?.selectableFeatures?.features[0] as any,
+        feature: props?.selectableFeatures?.[0] as any,
         selection: [
           {
             description: 'Description',

diff --git a/...signals/incident/components/form/MapSelectors/Asset/AssetList/hooks/useSelectionProps.tsx b/...signals/incident/components/form/MapSelectors/Asset/AssetList/hooks/useSelectionProps.tsx
@@ -4,27 +4,26 @@ import { useContext } from 'react'
 
 import { useSelector } from 'react-redux'
 
+import reverseGeocoderService from 'shared/services/reverse-geocoder'
 import { makeSelectMaxAssetWarning } from 'signals/incident/containers/IncidentContainer/selectors'
+import type { Location } from 'types/incident'
 
-import { featureToCoordinates } from '../../../../../../../../shared/services/map-location'
-import reverseGeocoderService from '../../../../../../../../shared/services/reverse-geocoder'
 import type {
-  Geometrie,
-  Location,
-} from '../../../../../../../../types/incident'
-import {
-  isTemplateString,
-  parseTemplateString,
-} from '../../../../../../../../utils/parseTemplateString'
-import type { Feature, FeatureType, Item } from '../../../types'
+  FeatureStatusType,
+  FeatureType,
+  Item,
+  SelectableFeature,
+} 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
-  )
+
+type Props = {
+  featureTypes: FeatureType[]
+  featureStatusTypes: FeatureStatusType[]
+  feature: SelectableFeature
+  selection?: Item[]
 }
+
 export const useSelectionProps = ({
   featureTypes,
   featureStatusTypes,
@@ -33,50 +32,25 @@ export const useSelectionProps = ({
 }: Props) => {
   const { setItem } = useContext(AssetSelectContext)
   const { maxAssetWarning } = useSelector(makeSelectMaxAssetWarning)
-
-  const coordinates = featureToCoordinates(feature.geometry as Geometrie)
-
-  const featureType = getFeatureType(feature, featureTypes)
-  if (!featureType) return null
-
-  const { description, typeValue, idField } = featureType
-  const id = feature.properties[idField] || ''
-
   const featureStatusType = featureStatusTypes.find(
     ({ typeValue }) => typeValue === status
   )
-
-  const label = isTemplateString(description)
-    ? parseTemplateString(description, feature.properties)
-    : [description, id].filter(Boolean).join(' - ')
-
   const item: Item = {
-    id: `${coordinates.lat}.${coordinates.lng}.${feature.properties.created_at}`,
-    label: label,
-    description: featureType.description,
-    type: featureType.typeValue,
-    coordinates,
+    ...feature,
+    address: undefined,
+    status: featureStatusType?.typeValue,
   }
 
-  if (selection?.find((item) => item.id === id)) return null
+  if (selection?.find((item) => item.id === feature.id)) return null
 
   const { icon }: Partial<FeatureType> =
-    featureTypes?.find(({ typeValue }) => typeValue === item.type) ?? {}
+    featureTypes?.find(({ typeValue }) => typeValue === feature.type) ?? {}
 
   const onClick = async () => {
-    if (typeValue !== FeatureStatus.REPORTED && !maxAssetWarning) {
-      const location: Location = { coordinates }
-
-      const item: Item = {
-        id,
-        type: typeValue,
-        description,
-        status: featureStatusType?.typeValue,
-        label,
-        coordinates,
-      }
+    if (feature.type !== FeatureStatus.REPORTED && !maxAssetWarning) {
+      const location: Location = { coordinates: feature.coordinates }
 
-      const response = await reverseGeocoderService(coordinates)
+      const response = await reverseGeocoderService(feature.coordinates)
 
       if (response) {
         location.address = response.data.address
@@ -87,5 +61,5 @@ export const useSelectionProps = ({
     }
   }
 
-  return { id, item, featureStatusType, icon, onClick }
+  return { id: feature.id, item: feature, featureStatusType, icon, onClick }
 }
diff --git a/src/signals/incident/components/form/MapSelectors/Asset/AssetSelect.tsx b/src/signals/incident/components/form/MapSelectors/Asset/AssetSelect.tsx
@@ -4,7 +4,6 @@ import type { FC } from 'react'
 import { useEffect } from 'react'
 import { useCallback, useState } from 'react'
 
-import type { FeatureCollection } from 'geojson'
 import type { LatLngLiteral } from 'leaflet'
 import { useDispatch, useSelector } from 'react-redux'
 
@@ -20,7 +19,13 @@ import Selector from './Selector'
 import SelectorV2 from './Selector_v2_removeafterfinishepic5440'
 import configuration from '../../../../../../shared/services/configuration/configuration'
 import { UNKNOWN_TYPE, UNREGISTERED_TYPE } from '../constants'
-import type { FeatureStatusType, FeatureType, Item, Meta } from '../types'
+import type {
+  FeatureStatusType,
+  FeatureType,
+  Item,
+  Meta,
+  SelectableFeature,
+} from '../types'
 
 const defaultIconConfig: FeatureType['icon'] = {
   options: {
@@ -66,7 +71,7 @@ const AssetSelect: FC<AssetSelectProps> = ({ value, layer, meta, parent }) => {
   const { selection, location } = value || {}
   const [message, setMessage] = useState<string>()
   const [selectableFeatures, setSelectableFeatures] = useState<
-    FeatureCollection | undefined
+    SelectableFeature[] | undefined
   >(undefined)
   const { mapActive } = useSelector(makeSelectIncidentContainer)
   const [featureTypes, setFeatureTypes] = useState<FeatureType[]>([])

diff --git a/src/signals/incident/components/form/MapSelectors/Asset/Selector/StatusLayer/StatusLayer.tsx b/src/signals/incident/components/form/MapSelectors/Asset/Selector/StatusLayer/StatusLayer.tsx
@@ -44,7 +44,7 @@ const StatusLayer: FC<StatusLayerProps> = ({
 
       return (
         <Marker
-          key={featureId}
+          key={featureId.toString()}
           latLng={latLng}
           options={{
             zIndexOffset: 1000,

diff --git a/...s/incident/components/form/MapSelectors/Asset/Selector/WfsLayer/AssetLayer/AssetLayer.tsx b/...s/incident/components/form/MapSelectors/Asset/Selector/WfsLayer/AssetLayer/AssetLayer.tsx
@@ -79,7 +79,7 @@ export const AssetLayer: FC = () => {
         const location: Location = { coordinates }
 
         const item: Item = {
-          id,
+          id: id.toString(),
           type: typeValue,
           description,
           status: featureStatusType?.typeValue,

diff --git a/...ents/form/MapSelectors/Asset/Selector_v2_removeafterfinishepic5440/DetailPanel/styled.tsx b/...ents/form/MapSelectors/Asset/Selector_v2_removeafterfinishepic5440/DetailPanel/styled.tsx
@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MPL-2.0
-// Copyright (C) 2022-2023 Gemeente Amsterdam
+// Copyright (C) 2022 - 2023 Gemeente Amsterdam
 import { Button, themeSpacing, themeColor, breakpoint } from '@amsterdam/asc-ui'
 import styled, { css } from 'styled-components'
 

diff --git a/...form/MapSelectors/Asset/Selector_v2_removeafterfinishepic5440/StatusLayer/StatusLayer.tsx b/...form/MapSelectors/Asset/Selector_v2_removeafterfinishepic5440/StatusLayer/StatusLayer.tsx
@@ -44,7 +44,7 @@ const StatusLayer: FC<StatusLayerProps> = ({
 
       return (
         <Marker
-          key={featureId}
+          key={featureId.toString()}
           latLng={latLng}
           options={{
             zIndexOffset: 1000,

diff --git a/...pSelectors/Asset/Selector_v2_removeafterfinishepic5440/WfsLayer/AssetLayer/AssetLayer.tsx b/...pSelectors/Asset/Selector_v2_removeafterfinishepic5440/WfsLayer/AssetLayer/AssetLayer.tsx
@@ -79,7 +79,7 @@ export const AssetLayer: FC = () => {
         const location: Location = { coordinates }
 
         const item: Item = {
-          id,
+          id: id.toString(),
           type: typeValue,
           description,
           status: featureStatusType?.typeValue,