chore(react/collections/geomap): get markers to show up

apps/client/src/widgets/collections/geomap/index.tsx

@@ -4,10 +4,13 @@ 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 } from "preact/hooks";
+import { useEffect, useRef, useState } from "preact/hooks";
+import Marker, { MarkerProps } from "./marker";
+import froca from "../../../services/froca";
 
 const DEFAULT_COORDINATES: [number, number] = [3.878638227135724, 446.6630455551659];
 const DEFAULT_ZOOM = 2;
+export const LOCATION_ATTRIBUTE = "geolocation";
 
 interface MapData {
     view?: {
@@ -16,14 +19,36 @@ interface MapData {
     };
 }
 
-export default function GeoView({ note, viewConfig, saveConfig }: ViewModeProps<MapData>) {
+export default function GeoView({ note, noteIds, viewConfig, saveConfig }: ViewModeProps<MapData>) {
     const [ layerName ] = useNoteLabel(note, "map:style");
+    const [ markers, setMarkers ] = useState<MarkerProps[]>([]);
     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 ]);
+
     return (
         <div className="geo-view">
             <Map
@@ -35,7 +60,9 @@ export default function GeoView({ note, viewConfig, saveConfig }: ViewModeProps<
                     viewConfig.view = { center: coordinates, zoom };
                     spacedUpdate.scheduleUpdate();
                 }}
-            />
+            >
+                {markers.map(marker => <Marker {...marker} />)}
+            </Map>
         </div>
     );
 }