1 files changed, 0 insertions, 353 deletions
diff --git a/src/refactor.js b/src/refactor.js
deleted file mode 100644
index c708bed..0000000
--- a/src/refactor.js
+++ /dev/null
@@ -1,353 +0,0 @@
-import { algoliasearch } from 'algoliasearch';
-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,
-  };
-
-  const maxMapSpace = {
-    north: 51.74,
-    south: 51.27,
-    west: -0.51,
-    east: 0.23,
-  };
-
-  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 },
-  ];
-
-  const centralPosition = { lat: 51.508616, lng: -0.125319 };
-
-  return {
-    initialRectBounds,
-    centralPosition,
-    maxMapSpace,
-    initialPolygonBounds,
-    getSearchResults: async function (query = '', shape = '', bounds = []) {
-      let geoParam;
-      if (shape === 'rectangle') {
-        geoParam = {
-          insideBoundingBox: [bounds],
-        };
-      } else if (shape === 'polygon') {
-        geoParam = {
-          insidePolygon: [bounds],
-        };
-      } else {
-        geoParam = {
-          aroundLatLng: bounds,
-          // aroundRadius: 1000,
-        };
-      }
-
-      const res = await client.searchSingleIndex({
-        indexName: INDEX_NAME,
-        searchParams: {
-          query,
-          ...algolia_params,
-          ...geoParam,
-          attributesToRetrieve: ['_geoloc', 'name', 'address', 'postcode'],
-        },
-      });
-      return res;
-    },
-    getCurrentQuery: function () {
-      return document.querySelector('#searchbar').value;
-    },
-  };
-})();
-
-const interfaceController = (function () {
-  let markers = [];
-  let shape;
-  let map;
-  const DOMStrings = {
-    selectRect: '.select--rectangle',
-    selectPoly: '.select--polygon',
-    ip: '.select--ip',
-    ipLoader: '.ip-loader',
-    hits: '#hits',
-    searchBar: '#searchbar',
-    pubCount: '.pub-count',
-  };
-
-  const generateMap = async function (bounds, position, maxSpace, initialPolygonBounds, currentShape, zoom = 12) {
-    const { Map, Polygon, Rectangle } = await google.maps.importLibrary('maps');
-    map = new Map(document.getElementById('map'), {
-      zoom,
-      center: position,
-      mapId: 'pub_map',
-      colorScheme: 'DARK',
-      restriction: {
-        latLngBounds: maxSpace,
-        strictBounds: true,
-      },
-    });
-
-    if (currentShape === 'rectangle') {
-      shape = new Rectangle({
-        bounds: bounds,
-        editable: true,
-        draggable: true,
-        strokeWeight: 2,
-        strokeOpacity: 0.8,
-        strokeColor: '#D97706',
-        fillColor: '#D97706',
-        fillOpacity: 0.35,
-      });
-      shape.setMap(map);
-    } else if (currentShape === 'polygon') {
-      shape = new Polygon({
-        paths: initialPolygonBounds,
-        strokeColor: '#D97706',
-        strokeOpacity: 0.8,
-        strokeWeight: 2,
-        fillColor: '#D97706',
-        fillOpacity: 0.35,
-        editable: true,
-        draggable: true,
-        geodesic: true,
-      });
-      shape.setMap(map);
-    }
-  };
-
-  return {
-    handleShapeSelect: function (e) {},
-    initMap: generateMap,
-    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);
-      });
-    },
-    updateHitsList: function (hits) {
-      $(DOMStrings.hits).innerHTML = '';
-      let html = ``;
-      if (hits.length > 0) {
-        const slicedArr = hits.slice(0, 20);
-        html += `<ul class="flex flex-col gap-2">`;
-        for (const pub of slicedArr) {
-          html += `<li class="relative bg-[#373737] rounded-lg p-4">
-          <h3 class="font-medium mb-2">${pub.name}</h3>
-          <h4 class="text-sm">${pub.address}, ${pub.postcode}</h4>
-           <a href="https://www.google.co.uk/maps/place/Ye+Old+White+Horse/" class="absolute block top-4 right-4" target="_blank">
-          <svg width="20px" height="20px" viewBox="0 0 24 24" fill="none" >
-          <path d="M5 12V6C5 5.44772 5.44772 5 6 5H18C18.5523 5 19 5.44772 19 6V18C19 18.5523 18.5523 19 18 19H12M8.11111 12H12M12 12V15.8889M12 12L5 19" stroke="#D97706" stroke-linecap="round" stroke-linejoin="round" />
-          </svg>
-          </a>
-          </li>`;
-        }
-        html += `</ul>`;
-      } else {
-        html = `<div class="text-center mt-5">There are no results to show, try refinfing your search</div>`;
-      }
-
-      $(DOMStrings.hits).insertAdjacentHTML('beforeend', html);
-      $(DOMStrings.pubCount).innerHTML = `${hits.length > 0 ? 'Showing ' + hits.length + ' pubs' : 'No pubs'}`;
-    },
-    handleBoundChange: function () {
-      const { south, west, north, east } = shape.getBounds()?.toJSON();
-      return [north, east, south, west];
-    },
-    getActiveShape: function () {
-      return shape;
-    },
-    getShapeBounds: function () {
-      if (shape instanceof google.maps.Polygon) {
-        const paths = shape.getPaths();
-        let points = [];
-
-        paths.forEach((path) => {
-          path.forEach((latLng) => {
-            const lat = latLng.lat();
-            const lng = latLng.lng();
-            points.push(lat, lng);
-          });
-        });
-        return points;
-      } else {
-        const { south, west, north, east } = shape.getBounds()?.toJSON();
-        return [north, east, south, west];
-      }
-    },
-    removeMarkers: function () {
-      for (let i = 0; i < markers.length; i++) {
-        markers[i].setMap(null);
-      }
-    },
-    getDOMStrings: function () {
-      return DOMStrings;
-    },
-  };
-})();
-
-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 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,
-    ]);
-    await uiCTRL.embedSearchResults(searchResults.hits);
-    uiCTRL.updateHitsList(searchResults.hits);
-  };
-
-  const setupMapListeners = async function () {
-    const shape = uiCTRL.getActiveShape();
-    if (shape instanceof google.maps.Rectangle) {
-      let debounceTimer;
-
-      shape.addListener('bounds_changed', () => {
-        uiCTRL.removeMarkers();
-        clearTimeout(debounceTimer);
-
-        debounceTimer = setTimeout(async () => {
-          const newAlgoliaBounds = uiCTRL.handleBoundChange();
-          const searchResults = await dataCTRL.getSearchResults(
-            dataCTRL.getCurrentQuery(),
-            'rectangle',
-            newAlgoliaBounds
-          );
-          await uiCTRL.embedSearchResults(searchResults.hits);
-          uiCTRL.updateHitsList(searchResults.hits);
-        }, 200);
-      });
-    }
-
-    if (shape instanceof google.maps.Polygon) {
-      let debounceTimer;
-      const paths = shape.getPaths();
-
-      const handlePathDrag = async function () {
-        uiCTRL.removeMarkers();
-        clearTimeout(debounceTimer);
-
-        debounceTimer = setTimeout(async () => {
-          const points = uiCTRL.getShapeBounds();
-
-          const searchResults = await dataCTRL.getSearchResults(dataCTRL.getCurrentQuery(), 'polygon', points);
-          await uiCTRL.embedSearchResults(searchResults.hits);
-          uiCTRL.updateHitsList(searchResults.hits);
-        }, 300);
-      };
-
-      paths.forEach((path) => {
-        path.addListener('set_at', handlePathDrag);
-        path.addListener('insert_at', handlePathDrag);
-      });
-    }
-  };
-
-  const setupShapeSelectListeners = 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,
-      ]);
-      await uiCTRL.embedSearchResults(searchResults.hits);
-      uiCTRL.updateHitsList(searchResults.hits);
-      await setupMapListeners();
-    });
-
-    $(DOM.selectPoly).addEventListener('click', async () => {
-      await uiCTRL.initMap(rectBounds, centralPoint, mapBounds, initialPolygonBounds, 'polygon', 12);
-      const translatedPolyBounds = initialPolygonBounds.flatMap(({ lat, lng }) => [lat, lng]);
-      const searchResults = await dataCTRL.getSearchResults(
-        dataCTRL.getCurrentQuery(),
-        'polygon',
-        translatedPolyBounds
-      );
-      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);
-      });
-  };
-
-  return {
-    init: async function () {
-      await initialSetup();
-      await setupMapListeners();
-      await setupShapeSelectListeners();
-    },
-  };
-})(dataController, interfaceController);
-
-controller.init();