From 6bd548cc22707ffe72feb21585019812c967d554 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 6 Sep 2025 14:22:05 +0300
Subject: [PATCH] refactor(react/touchbar): use more performant mechanism

---
 .../src/widgets/collections/geomap/index.tsx  | 29 ++++++++++++++-----
 1 file changed, 22 insertions(+), 7 deletions(-)

diff --git a/apps/client/src/widgets/collections/geomap/index.tsx b/apps/client/src/widgets/collections/geomap/index.tsx
index 7cce43ecd..fa0e7a54d 100644
--- a/apps/client/src/widgets/collections/geomap/index.tsx
+++ b/apps/client/src/widgets/collections/geomap/index.tsx
@@ -46,7 +46,7 @@ export default function GeoView({ note, noteIds, viewConfig, saveConfig }: ViewM
             saveConfig(viewConfig);
         }
     }, 5000);
-    const [ currentZoom, setCurrentZoom ] = useState<number>();
+    console.log("Repaint!");
 
     useEffect(() => { froca.getNotes(noteIds).then(setNotes) }, [ noteIds ]);
 
@@ -126,12 +126,11 @@ export default function GeoView({ note, noteIds, viewConfig, saveConfig }: ViewM
                 }}
                 onClick={onClick}
                 onContextMenu={onContextMenu}
-                onZoom={() => setCurrentZoom(apiRef.current?.getZoom())}
                 scale={hasScale}
             >
                 {notes.map(note => <NoteWrapper note={note} isReadOnly={isReadOnly} />)}
             </Map>
-            <GeoMapTouchBar zoom={currentZoom} map={apiRef.current} />
+            <GeoMapTouchBar map={apiRef.current} />
         </div>
     );
 }
@@ -245,15 +244,31 @@ function buildIcon(bxIconClass: string, colorClass?: string, title?: string, not
     });
 }
 
-function GeoMapTouchBar({ zoom, map }: { zoom: number | undefined, map: L.Map | null | undefined }) {
-    return map && (
+function GeoMapTouchBar({ map }: { map: L.Map | null | undefined }) {
+    const [ currentZoom, setCurrentZoom ] = useState<number>();
+
+    useEffect(() => {
+        if (!map) return;
+
+        function onZoomChanged() {
+            setCurrentZoom(map?.getZoom());
+        }
+
+        map.on("zoom", onZoomChanged);
+        return () => map.off("zoom", onZoomChanged);
+    }, [ map ]);
+
+    return map && currentZoom && (
         <TouchBar>
             <TouchBarSlider
                 label="Zoom"
-                value={zoom ?? map.getZoom()}
+                value={currentZoom}
                 minValue={map.getMinZoom()}
                 maxValue={map.getMaxZoom()}
-                onChange={(newValue) => map.setZoom(newValue)}
+                onChange={(newValue) => {
+                    setCurrentZoom(newValue);
+                    map.setZoom(newValue);
+                }}
             />
         </TouchBar>
     )