Emergency fix for undefined positions

r00tat · Sep 18, 2024 · 88f0e23 · 88f0e23
1 parent aca4719
commit 88f0e23
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 63 deletions.
diff --git 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 (
-      <ConnectionMarker record={this} selectItem={selectItem} key={this.id} />
-    );
+    try {
+      return (
+        <ConnectionMarker record={this} selectItem={selectItem} key={this.id} />
+      );
+    } 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
@@ -215,13 +215,18 @@ export class FirecallItemBase {
   }
 
   public renderMarker(selectItem: (item: FirecallItem) => void): ReactNode {
-    return (
-      <FirecallItemMarkerDefault
-        record={this}
-        selectItem={selectItem}
-        key={this.id}
-      />
-    );
+    try {
+      return (
+        <FirecallItemMarkerDefault
+          record={this}
+          selectItem={selectItem}
+          key={this.id}
+        />
+      );
+    } catch (err) {
+      console.error('failed to render marker', err, this.data());
+      return <></>;
+    }
   }
 
   public get<T = any>(key: string): T {

diff --git 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) && (
-            <Marker
-              key={index}
-              position={p}
-              title={record.titleFn()}
-              icon={record.icon()}
-              draggable
-              autoPan={false}
-              eventHandlers={{
-                dragend: (event) => {
-                  updateFirecallPositions(
-                    firecallId,
-                    (event.target as L.Marker)?.getLatLng(),
-                    record.data(),
-                    index
-                  );
-                },
-              }}
-            >
-              <Popup>
-                <Tooltip title="Linie bearbeiten">
-                  <IconButton
-                    sx={{ marginLeft: 'auto', float: 'right' }}
-                    onClick={() => selectItem(record)}
-                  >
-                    <EditIcon />
-                  </IconButton>
-                </Tooltip>
-                <Tooltip title="Punkt entfernen">
-                  <IconButton
-                    sx={{ marginLeft: 'auto', float: 'right' }}
-                    onClick={() =>
-                      deleteFirecallPosition(firecallId, record, index)
-                    }
-                  >
-                    <DeleteIcon />
-                  </IconButton>
-                </Tooltip>
-                {record.popupFn()}
-                <br />
-                Punkt {index + 1} von {positions.length}
-              </Popup>
-            </Marker>
-          )
-      )}
+      {positions
+        .filter(([pLat, pLng]) => pLat && pLng)
+        .map(
+          (p, index) =>
+            (record.alwaysShowMarker === 'true' ||
+              showMarkers ||
+              index === 0 ||
+              index === positions.length - 1) && (
+              <Marker
+                key={index}
+                position={p}
+                title={record.titleFn()}
+                icon={record.icon()}
+                draggable
+                autoPan={false}
+                eventHandlers={{
+                  dragend: (event) => {
+                    updateFirecallPositions(
+                      firecallId,
+                      (event.target as L.Marker)?.getLatLng(),
+                      record.data(),
+                      index
+                    );
+                  },
+                }}
+              >
+                <Popup>
+                  <Tooltip title="Linie bearbeiten">
+                    <IconButton
+                      sx={{ marginLeft: 'auto', float: 'right' }}
+                      onClick={() => selectItem(record)}
+                    >
+                      <EditIcon />
+                    </IconButton>
+                  </Tooltip>
+                  <Tooltip title="Punkt entfernen">
+                    <IconButton
+                      sx={{ marginLeft: 'auto', float: 'right' }}
+                      onClick={() =>
+                        deleteFirecallPosition(firecallId, record, index)
+                      }
+                    >
+                      <DeleteIcon />
+                    </IconButton>
+                  </Tooltip>
+                  {record.popupFn()}
+                  <br />
+                  Punkt {index + 1} von {positions.length}
+                </Popup>
+              </Marker>
+            )
+        )}
       <Polyline
-        positions={positions}
+        positions={positions.filter(([pLat, pLng]) => 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
@@ -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<FirecallItem>();
@@ -43,7 +55,7 @@ export default function FirecallItemsLayer({ layer }: FirecallLayerOptions) {
       {records.map(
         (record) => (
           <React.Fragment key={record.id}>
-            {getItemInstance(record).renderMarker(setFirecallItem)}
+            <>{renderMarker(record, setFirecallItem)}</>
           </React.Fragment>
         )
         // <FirecallItemMarker