📦 NEW: MVC progress

2 files changed, 71 insertions, 33 deletions

diff --git a/data/script.py b/data/script.py
index 138435f..e7e37e1 100644
--- a/data/script.py
+++ b/data/script.py
@@ -1,5 +1,4 @@
 api_key="499c19189bmsh1de144300936427p134bd5jsnbdcec35e8f65"
-
 import urllib.parse
 import requests
 import json
@@ -68,23 +67,3 @@ for borough in boroughs:
 
 with open("./data/pubs.json", "w") as f:
     f.write(json.dumps(final))
-
-# with open("./data/pubs.json", "r") as f:
-#     hello = json.load(f)
-#     print(hello[0])
-
-
-# from algoliasearch.search_client import SearchClient
-
-# client = SearchClient.create('YSWWVAX5RB', '31ce537df5b4594e34a03673e09cd662')
-# index = client.init_index('pubfinder')
-
-# with open("./data/pubs.json", "r+") as f:
-#     records = json.load(f)
-#     for record in records:
-#         if record.get("geoloc", {}).get("lat", None) is None:
-#             records.remove(record)
-#     f.write(json.dumps(records))
-
-
-
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);