diff --git a/src/components/FirecallItems/elements/FirecallConnection.tsx b/src/components/FirecallItems/elements/FirecallConnection.tsx index eb7627d..b569634 100644 --- a/src/components/FirecallItems/elements/FirecallConnection.tsx +++ b/src/components/FirecallItems/elements/FirecallConnection.tsx @@ -129,9 +129,14 @@ export class FirecallConnection extends FirecallItemBase { ); } public renderMarker(selectItem: (item: FirecallItem) => void): ReactNode { - return ( - - ); + try { + return ( + + ); + } catch (err) { + console.error('failed to render marker', err, this.data()); + return <>; + } } public static isPolyline(): boolean { diff --git a/src/components/FirecallItems/elements/FirecallItemBase.tsx b/src/components/FirecallItems/elements/FirecallItemBase.tsx index 8694d96..39e00e0 100644 --- a/src/components/FirecallItems/elements/FirecallItemBase.tsx +++ b/src/components/FirecallItems/elements/FirecallItemBase.tsx @@ -215,13 +215,18 @@ export class FirecallItemBase { } public renderMarker(selectItem: (item: FirecallItem) => void): ReactNode { - return ( - - ); + try { + return ( + + ); + } catch (err) { + console.error('failed to render marker', err, this.data()); + return <>; + } } public get(key: string): T { diff --git a/src/components/FirecallItems/elements/connection/ConnectionComponent.tsx b/src/components/FirecallItems/elements/connection/ConnectionComponent.tsx index 853a46e..98025b3 100644 --- a/src/components/FirecallItems/elements/connection/ConnectionComponent.tsx +++ b/src/components/FirecallItems/elements/connection/ConnectionComponent.tsx @@ -56,58 +56,60 @@ export default function ConnectionMarker({ return ( <> - {positions.map( - (p, index) => - (record.alwaysShowMarker === 'true' || - showMarkers || - index === 0 || - index === positions.length - 1) && ( - { - updateFirecallPositions( - firecallId, - (event.target as L.Marker)?.getLatLng(), - record.data(), - index - ); - }, - }} - > - - - selectItem(record)} - > - - - - - - deleteFirecallPosition(firecallId, record, index) - } - > - - - - {record.popupFn()} -
- Punkt {index + 1} von {positions.length} -
-
- ) - )} + {positions + .filter(([pLat, pLng]) => pLat && pLng) + .map( + (p, index) => + (record.alwaysShowMarker === 'true' || + showMarkers || + index === 0 || + index === positions.length - 1) && ( + { + updateFirecallPositions( + firecallId, + (event.target as L.Marker)?.getLatLng(), + record.data(), + index + ); + }, + }} + > + + + selectItem(record)} + > + + + + + + deleteFirecallPosition(firecallId, record, index) + } + > + + + + {record.popupFn()} +
+ Punkt {index + 1} von {positions.length} +
+
+ ) + )} pLat && pLng)} pathOptions={{ color: record.color || '#0000ff', opacity: ((record as any)?.opacity || 100.0) / 100, diff --git a/src/components/Map/layers/FirecallItemsLayer.tsx b/src/components/Map/layers/FirecallItemsLayer.tsx index 85da8a1..b91543b 100644 --- a/src/components/Map/layers/FirecallItemsLayer.tsx +++ b/src/components/Map/layers/FirecallItemsLayer.tsx @@ -1,4 +1,4 @@ -import { useMemo, useState } from 'react'; +import { Suspense, useMemo, useState } from 'react'; import useFirebaseCollection from '../../../hooks/useFirebaseCollection'; import useFirecall from '../../../hooks/useFirecall'; import { @@ -15,6 +15,18 @@ export interface FirecallLayerOptions { layer?: FirecallLayer; } +function renderMarker( + record: FirecallItem, + setFirecallItem: (item: FirecallItem) => void +) { + try { + return getItemInstance(record).renderMarker(setFirecallItem); + } catch (err) { + console.error('Failed to render item ', record, err); + } + return <>; +} + export default function FirecallItemsLayer({ layer }: FirecallLayerOptions) { const firecall = useFirecall(); const [firecallItem, setFirecallItem] = useState(); @@ -43,7 +55,7 @@ export default function FirecallItemsLayer({ layer }: FirecallLayerOptions) { {records.map( (record) => ( - {getItemInstance(record).renderMarker(setFirecallItem)} + <>{renderMarker(record, setFirecallItem)} ) //