From 244412bddc81c18879b47cf279159a69a516fa94 Mon Sep 17 00:00:00 2001
From: JeremyJamesL <jeremyluscombe@gmail.com>
Date: Sun, 8 Dec 2024 10:15:02 +0000
Subject: =?UTF-8?q?=F0=9F=93=A6=20NEW:=20MVC=20progress?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/refactor.js | 83 ++++++++++++++++++++++++++++++++++++++++++++++++---------
 1 file changed, 71 insertions(+), 12 deletions(-)

(limited to 'src')

diff --git a/src/refactor.js b/src/refactor.js
index 90c5c35..37a96a0 100644
--- a/src/refactor.js
+++ b/src/refactor.js
@@ -28,28 +28,28 @@ const dataController = (function () {
     londonBounds,
     centralPosition,
     maxMapSpace,
-    getSearchResults: async function () {
+    getSearchResults: async function (bounds) {
       const res = await client.searchSingleIndex({
         indexName: INDEX_NAME,
         searchParams: {
           ...algolia_params,
-          insideBoundingBox: [londonBounds],
+          insideBoundingBox: [bounds],
           attributesToRetrieve: ["_geoloc", "name"],
         },
       });
+      return res;
     },
   };
 })();
 
 const interfaceController = (function () {
   let markers = [];
+  let shape;
   let map;
   return {
     generateMap: async function (bounds, position, maxSpace) {
-      const { Map, Polygon, Rectangle, InfoWindow } =
-        await google.maps.importLibrary("maps");
-      const { AdvancedMarkerElement } = await google.maps.importLibrary(
-        "marker"
+      const { Map, Polygon, Rectangle } = await google.maps.importLibrary(
+        "maps"
       );
       map = new Map(document.getElementById("map"), {
         zoom: 4,
@@ -61,29 +61,88 @@ const interfaceController = (function () {
         },
       });
 
-      const rectangle = new Rectangle({
+      shape = new Rectangle({
         bounds: bounds,
         editable: true,
         draggable: true,
       });
 
-      rectangle.setMap(map);
+      shape.setMap(map);
+    },
+    embedSearchResults: async function (hits) {
+      const { AdvancedMarkerElement } = await google.maps.importLibrary(
+        "marker"
+      );
+      const { InfoWindow } = await google.maps.importLibrary("maps");
+
+      hits.forEach((hit) => {
+        const marker = new AdvancedMarkerElement({
+          map: map,
+          position: {
+            lat: hit._geoloc.lat,
+            lng: hit._geoloc.lng,
+          },
+        });
+
+        const window = new InfoWindow({
+          content: hit.name,
+        });
+
+        marker.addListener("click", function () {
+          window.open({
+            anchor: marker,
+            map,
+          });
+        });
+
+        markers.push(marker);
+      });
+    },
+    handleBoundChange: function () {
+      const { south, west, north, east } = shape.getBounds()?.toJSON();
+      return [north, east, south, west];
+    },
+    getActiveShape: function () {
+      return shape;
+    },
+    removeMarkers: function () {
+      for (let i = 0; i < markers.length; i++) {
+        markers[i].setMap(null);
+      }
     },
   };
 })();
 
 const controller = (function (dataCTRL, uiCTRL) {
-  const initialSetup = function () {
+  const initialSetup = async function () {
     const londonBounds = dataCTRL.londonBounds;
     const centralPoint = dataCTRL.centralPosition;
     const mapBounds = dataCTRL.maxMapSpace;
     uiCTRL.generateMap(londonBounds, centralPoint, mapBounds);
-    dataCTRL.getSearchResults();
+    const searchResults = await dataCTRL.getSearchResults([
+      londonBounds.north,
+      londonBounds.east,
+      londonBounds.south,
+      londonBounds.west,
+    ]);
+    await uiCTRL.embedSearchResults(searchResults.hits);
+  };
+
+  const setupEventListeners = function () {
+    const shape = uiCTRL.getActiveShape();
+    shape.addListener("bounds_changed", async () => {
+      uiCTRL.removeMarkers();
+      const newAlgoliaBounds = uiCTRL.handleBoundChange();
+
+      const searchResults = await dataCTRL.getSearchResults(newAlgoliaBounds);
+      await uiCTRL.embedSearchResults(searchResults.hits);
+    });
   };
 
   return {
-    init: function () {
-      initialSetup();
+    init: async function () {
+      await initialSetup();
+      setupEventListeners();
     },
   };
 })(dataController, interfaceController);
-- 
cgit v1.2.3