From 642433994dca1cb53660a078955030863018993f Mon Sep 17 00:00:00 2001
From: Adrien <me@adrien.run>
Date: Sun, 25 Feb 2024 12:40:53 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Replace=20onMount=20hook?=
 =?UTF-8?q?=20by=20the=20use=20of=20a=20signal=20to=20set=20the=20Map=20ta?=
 =?UTF-8?q?rget?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/stopsSearchMenu/map.tsx | 96 +++++++++++++---------------
 1 file changed, 45 insertions(+), 51 deletions(-)

diff --git a/frontend/src/stopsSearchMenu/map.tsx b/frontend/src/stopsSearchMenu/map.tsx
index 2fd8869..068d2f4 100644
--- a/frontend/src/stopsSearchMenu/map.tsx
+++ b/frontend/src/stopsSearchMenu/map.tsx
@@ -41,57 +41,13 @@ export const Map: ParentComponent<{}> = () => {
     // TODO: Set padding according to the marker design.
     const fitPointsPadding = [50, 50, 50, 50];
 
-    let mapDiv: HTMLDivElement | undefined;
     let popup: StopPopup | undefined = undefined;
 
+    const [mapRef, setMapRef] = createSignal<HTMLDivElement>();
+
     const stopVectorSource = new OlVectorSource({ features: [] });
     const stopVectorLayer = new OlVectorLayer({ source: stopVectorSource });
 
-    let overlay: OlOverlay | undefined = undefined;
-    let map: OlMap | undefined = undefined;
-
-    const displayedFeatures: Record<number, OlFeature> = {};
-
-    const buildMap = (div: HTMLDivElement): void => {
-        overlay = new OlOverlay({
-            element: popup,
-            autoPan: {
-                animation: {
-                    duration: 250,
-                },
-            },
-        });
-        map = new OlMap({
-            target: div,
-            controls: [], // remove controls
-            view: new OlView({
-                center: mapCenter,
-                zoom: 10,
-            }),
-            layers: [
-                new OlTileLayer({
-                    source: new OlOSM(),
-                }),
-                stopVectorLayer,
-            ],
-            overlays: [overlay],
-        });
-        console.log("map=", map);
-        map.on('singleclick', onClickedMap);
-    }
-
-    const onClickedMap = async (event): Promise<void> => {
-        const features = await stopVectorLayer.getFeatures(event.pixel);
-        // Handle only the first feature
-        if (features.length > 0) {
-            await onClickedFeature(features[0]);
-        }
-        else {
-            setPopupDisplayed(false);
-            setSelectedMapStop(undefined);
-        }
-    }
-
     const onClickedFeature = async (feature: OlFeatureLike): Promise<void> => {
         const stopId: number = feature.getId();
         const stop = getStop(stopId);
@@ -109,10 +65,48 @@ export const Map: ParentComponent<{}> = () => {
         }
     }
 
-    onMount(() => {
-        buildMap(mapDiv);
-    })
-        ;
+    const onClickedMap = async (event): Promise<void> => {
+        const features = await stopVectorLayer.getFeatures(event.pixel);
+        // Handle only the first feature
+        if (features.length > 0) {
+            await onClickedFeature(features[0]);
+        }
+        else {
+            setPopupDisplayed(false);
+            setSelectedMapStop(undefined);
+        }
+    }
+
+    const displayedFeatures: Record<number, OlFeature> = {};
+
+    const overlay = new OlOverlay({
+        element: popup,
+        autoPan: {
+            animation: {
+                duration: 250,
+            },
+        },
+    });
+    const map = new OlMap({
+        target: "map",
+        controls: [], // remove controls
+        view: new OlView({
+            center: mapCenter,
+            zoom: 10,
+        }),
+        layers: [
+            new OlTileLayer({
+                source: new OlOSM(),
+            }),
+            stopVectorLayer,
+        ],
+        overlays: [overlay],
+    });
+    map.on('singleclick', onClickedMap);
+
+    createEffect(() => {
+        map.setTarget(mapRef());
+    });
 
     // Filling the map with stops shape
     createEffect(() => {
@@ -211,7 +205,7 @@ export const Map: ParentComponent<{}> = () => {
     }
 
     return <>
-        <div ref={mapDiv!} class="map">
+        <div ref={setMapRef!} class="map">
             <StopPopup ref={popup!} stop={selectedMapStop()} show={isPopupDisplayed()} />
         </div>
         <For each={getFoundStops()}>{(stop) => <MapStop stop={stop} selected={selectedMapStop()} />}</For>