From 3382ccc7bfe25fab3f716e776068ad2d84812ec6 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 4 Sep 2025 15:58:50 +0300
Subject: [PATCH] refactor(react/collections/geomap): use different mechanism
 for markers

---
 .../src/widgets/collections/geomap/index.tsx  | 37 +++++++------------
 1 file changed, 13 insertions(+), 24 deletions(-)

diff --git a/apps/client/src/widgets/collections/geomap/index.tsx b/apps/client/src/widgets/collections/geomap/index.tsx
index a966cb6d5..09d4b7760 100644
--- a/apps/client/src/widgets/collections/geomap/index.tsx
+++ b/apps/client/src/widgets/collections/geomap/index.tsx
@@ -4,9 +4,10 @@ import { ViewModeProps } from "../interface";
 import { useNoteLabel, useSpacedUpdate } from "../../react/hooks";
 import { DEFAULT_MAP_LAYER_NAME } from "./map_layer";
 import { LatLng } from "leaflet";
-import { useEffect, useRef, useState } from "preact/hooks";
-import Marker, { MarkerProps } from "./marker";
+import { useEffect, useState } from "preact/hooks";
+import Marker from "./marker";
 import froca from "../../../services/froca";
+import FNote from "../../../entities/fnote";
 
 const DEFAULT_COORDINATES: [number, number] = [3.878638227135724, 446.6630455551659];
 const DEFAULT_ZOOM = 2;
@@ -21,33 +22,14 @@ interface MapData {
 
 export default function GeoView({ note, noteIds, viewConfig, saveConfig }: ViewModeProps<MapData>) {
     const [ layerName ] = useNoteLabel(note, "map:style");
-    const [ markers, setMarkers ] = useState<MarkerProps[]>([]);
+    const [ notes, setNotes ] = useState<FNote[]>([]);
     const spacedUpdate = useSpacedUpdate(() => {
         if (viewConfig) {
             saveConfig(viewConfig);
         }
     }, 5000);
 
-    async function refreshMarkers() {
-        const notes = await froca.getNotes(noteIds);
-        const markers: MarkerProps[] = [];
-        for (const childNote of notes) {
-            const latLng = childNote.getAttributeValue("label", LOCATION_ATTRIBUTE);
-            if (!latLng) continue;
-
-            const [lat, lng] = latLng.split(",", 2).map((el) => parseFloat(el));
-            markers.push({
-                coordinates: [lat, lng]
-            })
-        }
-
-        console.log("Built ", markers);
-        setMarkers(markers);
-    }
-
-    useEffect(() => {
-        refreshMarkers();
-    }, [ note ]);
+    useEffect(() => { froca.getNotes(noteIds).then(setNotes) }, [ noteIds ]);
 
     return (
         <div className="geo-view">
@@ -61,8 +43,15 @@ export default function GeoView({ note, noteIds, viewConfig, saveConfig }: ViewM
                     spacedUpdate.scheduleUpdate();
                 }}
             >
-                {markers.map(marker => <Marker {...marker} />)}
+                {notes.map(note => <NoteMarker note={note} />)}
             </Map>
         </div>
     );
 }
+
+function NoteMarker({ note }: { note: FNote }) {
+    const [ location ] = useNoteLabel(note, LOCATION_ATTRIBUTE);
+    const latLng = location?.split(",", 2).map((el) => parseFloat(el)) as [ number, number ] | undefined;
+
+    return latLng && <Marker coordinates={latLng} />
+}