prod

2 files changed, 65 insertions, 85 deletions

diff --git a/src/index.css b/src/index.css
index 8f861f0..57ac450 100644
--- a/src/index.css
+++ b/src/index.css
@@ -10,7 +10,7 @@
 
 #map {
   height: 100%;
-  height: 100dvh;
+  height: calc(100dvh - (64px + 288px));
   width: 100%;
 }
 
@@ -84,25 +84,3 @@ body {
   stroke-miterlimit: 10;
   stroke-dasharray: 4, 3;
 }
-
-/* header {
-  background: rgb(38, 38, 38);
-  background: linear-gradient(
-    180deg,
-    rgba(38, 38, 38, 1) 0%,
-    rgba(38, 38, 38, 0.7665660014005602) 51%,
-    rgba(38, 38, 38, 0) 100%
-  );
-} */
-
-/* body {
-  color: #646c78;
-  background-color: #222e3e;
-} */
-/* 
-.container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding-left: 15px;
-  padding-right: 15px;
-} */
diff --git a/src/refactor.js b/src/main.js
index c708bed..1466b3f 100644
--- a/src/refactor.js
+++ b/src/main.js
@@ -3,16 +3,13 @@ const ALGOLIA_KEY = '9fb3db0222f7b5aef0e2b30791ee6201';
 const INDEX_NAME = 'pubfinder';
 const client = algoliasearch('YSWWVAX5RB', ALGOLIA_KEY);
 const $ = document.querySelector.bind(document);
-const algolia_params = {
-  hitsPerPage: 1000,
-};
 
 const dataController = (function () {
   const initialRectBounds = {
-    north: 51.525241,
-    south: 51.488855,
-    east: -0.09138,
-    west: -0.122212,
+    north: 51.522899,
+    south: 51.484821,
+    east: -0.07766,
+    west: -0.138968,
   };
 
   const maxMapSpace = {
@@ -23,11 +20,12 @@ const dataController = (function () {
   };
 
   const initialPolygonBounds = [
-    { lat: 51.528125, lng: -0.104853 },
-    { lat: 51.519405, lng: -0.089005 },
-    { lat: 51.508742, lng: -0.108198 },
-    { lat: 51.507389, lng: -0.132242 },
-    { lat: 51.522659, lng: -0.134998 },
+    { lat: 51.522786, lng: -0.077603 },
+    { lat: 51.525376, lng: -0.108023 },
+    { lat: 51.520791, lng: -0.138718 },
+    { lat: 51.506604, lng: -0.151214 },
+    { lat: 51.485288, lng: -0.106803 },
+    { lat: 51.493989, lng: -0.085187 },
   ];
 
   const centralPosition = { lat: 51.508616, lng: -0.125319 };
@@ -37,7 +35,7 @@ const dataController = (function () {
     centralPosition,
     maxMapSpace,
     initialPolygonBounds,
-    getSearchResults: async function (query = '', shape = '', bounds = []) {
+    getSearchResults: async function (query = '', shape = '', bounds = [], hitsToGet) {
       let geoParam;
       if (shape === 'rectangle') {
         geoParam = {
@@ -58,7 +56,7 @@ const dataController = (function () {
         indexName: INDEX_NAME,
         searchParams: {
           query,
-          ...algolia_params,
+          hitsPerPage: hitsToGet,
           ...geoParam,
           attributesToRetrieve: ['_geoloc', 'name', 'address', 'postcode'],
         },
@@ -221,18 +219,18 @@ const controller = (function (dataCTRL, uiCTRL) {
   const DOM = uiCTRL.getDOMStrings();
   const rectBounds = dataCTRL.initialRectBounds;
   const centralPoint = dataCTRL.centralPosition;
-  const mapBounds = dataCTRL.maxMapSpace; // This is rectangle bounds
-  const initialPolygonBounds = dataCTRL.initialPolygonBounds; // Polygon bound
+  const mapBounds = dataCTRL.maxMapSpace; // Rectangle bounds
+  const initialPolygonBounds = dataCTRL.initialPolygonBounds; // Polygon bounds
 
   const initialSetup = async function () {
     await uiCTRL.initMap(rectBounds, centralPoint, mapBounds, initialPolygonBounds, 'rectangle', 12);
 
-    const searchResults = await dataCTRL.getSearchResults('', 'rectangle', [
-      rectBounds.north,
-      rectBounds.east,
-      rectBounds.south,
-      rectBounds.west,
-    ]);
+    const searchResults = await dataCTRL.getSearchResults(
+      '',
+      'rectangle',
+      [rectBounds.north, rectBounds.east, rectBounds.south, rectBounds.west],
+      1000
+    );
     await uiCTRL.embedSearchResults(searchResults.hits);
     uiCTRL.updateHitsList(searchResults.hits);
   };
@@ -251,7 +249,8 @@ const controller = (function (dataCTRL, uiCTRL) {
           const searchResults = await dataCTRL.getSearchResults(
             dataCTRL.getCurrentQuery(),
             'rectangle',
-            newAlgoliaBounds
+            newAlgoliaBounds,
+            1000
           );
           await uiCTRL.embedSearchResults(searchResults.hits);
           uiCTRL.updateHitsList(searchResults.hits);
@@ -270,7 +269,7 @@ const controller = (function (dataCTRL, uiCTRL) {
         debounceTimer = setTimeout(async () => {
           const points = uiCTRL.getShapeBounds();
 
-          const searchResults = await dataCTRL.getSearchResults(dataCTRL.getCurrentQuery(), 'polygon', points);
+          const searchResults = await dataCTRL.getSearchResults(dataCTRL.getCurrentQuery(), 'polygon', points, 1000);
           await uiCTRL.embedSearchResults(searchResults.hits);
           uiCTRL.updateHitsList(searchResults.hits);
         }, 300);
@@ -283,15 +282,15 @@ const controller = (function (dataCTRL, uiCTRL) {
     }
   };
 
-  const setupShapeSelectListeners = async function () {
+  const setupEventListeners = async function () {
     $(DOM.selectRect).addEventListener('click', async () => {
       await uiCTRL.initMap(rectBounds, centralPoint, mapBounds, initialPolygonBounds, 'rectangle', 12);
-      const searchResults = await dataCTRL.getSearchResults(dataCTRL.getCurrentQuery(), 'rectangle', [
-        rectBounds.north,
-        rectBounds.east,
-        rectBounds.south,
-        rectBounds.west,
-      ]);
+      const searchResults = await dataCTRL.getSearchResults(
+        dataCTRL.getCurrentQuery(),
+        'rectangle',
+        [rectBounds.north, rectBounds.east, rectBounds.south, rectBounds.west],
+        1000
+      );
       await uiCTRL.embedSearchResults(searchResults.hits);
       uiCTRL.updateHitsList(searchResults.hits);
       await setupMapListeners();
@@ -303,49 +302,52 @@ const controller = (function (dataCTRL, uiCTRL) {
       const searchResults = await dataCTRL.getSearchResults(
         dataCTRL.getCurrentQuery(),
         'polygon',
-        translatedPolyBounds
+        translatedPolyBounds,
+        1000
       );
       await uiCTRL.embedSearchResults(searchResults.hits);
       uiCTRL.updateHitsList(searchResults.hits);
       await setupMapListeners();
     });
 
-    $(DOM.ip).addEventListener('click', async () => {
-      $(DOM.ipLoader).classList.replace('hidden', 'inline-flex');
-      navigator.geolocation.getCurrentPosition(async (pos) => {
-        const position = { lat: pos.coords.latitude, lng: pos.coords.longitude };
-        await uiCTRL.initMap('', position, rectBounds, '', 'ip', 10);
-        const searchResults = await dataCTRL.getSearchResults(
-          dataCTRL.getCurrentQuery(),
-          'ip',
-          `${pos.coords.latitude}, ${pos.coords.longitude}`
-        );
-        await uiCTRL.embedSearchResults(searchResults.hits);
-        uiCTRL.updateHitsList(searchResults.hits);
-        $(DOM.ipLoader).classList.replace('inline-flex', 'hidden');
-      });
-    }),
-      $(DOM.searchBar).addEventListener('input', async (e) => {
-        const q = dataCTRL.getCurrentQuery();
-        if (q > 0 && q < 3) return;
-        const bounds = uiCTRL.getShapeBounds();
-        const activeShape = uiCTRL.getActiveShape();
-        const searchResults = await dataCTRL.getSearchResults(
-          q,
-          activeShape instanceof google.maps.Polygon ? 'polygon' : 'rectangle',
-          bounds
-        );
-        uiCTRL.removeMarkers();
-        await uiCTRL.embedSearchResults(searchResults.hits);
-        uiCTRL.updateHitsList(searchResults.hits);
-      });
+    // $(DOM.ip).addEventListener('click', async () => {
+    //   $(DOM.ipLoader).classList.replace('hidden', 'inline-flex');
+    //   navigator.geolocation.getCurrentPosition(async (pos) => {
+    //     const position = { lat: pos.coords.latitude, lng: pos.coords.longitude };
+    //     await uiCTRL.initMap('', centralPoint, position, '', 'ip', 8);
+    //     const searchResults = await dataCTRL.getSearchResults(
+    //       dataCTRL.getCurrentQuery(),
+    //       'ip',
+    //       `${pos.coords.latitude}, ${pos.coords.longitude}`,
+    //       20
+    //     );
+    //     await uiCTRL.embedSearchResults(searchResults.hits);
+    //     uiCTRL.updateHitsList(searchResults.hits);
+    //     $(DOM.ipLoader).classList.replace('inline-flex', 'hidden');
+    //   });
+    // }),
+    $(DOM.searchBar).addEventListener('input', async (e) => {
+      const q = dataCTRL.getCurrentQuery();
+      if (q > 0 && q < 3) return;
+      const bounds = uiCTRL.getShapeBounds();
+      const activeShape = uiCTRL.getActiveShape();
+      const searchResults = await dataCTRL.getSearchResults(
+        q,
+        activeShape instanceof google.maps.Polygon ? 'polygon' : 'rectangle',
+        bounds,
+        1000
+      );
+      uiCTRL.removeMarkers();
+      await uiCTRL.embedSearchResults(searchResults.hits);
+      uiCTRL.updateHitsList(searchResults.hits);
+    });
   };
 
   return {
     init: async function () {
       await initialSetup();
       await setupMapListeners();
-      await setupShapeSelectListeners();
+      await setupEventListeners();
     },
   };
 })(dataController, interfaceController);