Merge pull request #43 from BuildFire/fix/intro-search

fix(intro search): handle user position in the intro search

Author: mas-iota

src/control/content/js/listView/index.js

@@ -8,12 +8,7 @@ import PinnedLocationsList from "./pinnedLocationsList";
 import Location from "../../../../entities/Location";
 import loadAreaRadiusMap from "./introMap";
 import state from "../../state";
-
-const SearchLocationsModes = {
-  All: "All",
-  UserPosition: "UserPosition",
-  AreaRadius: "AreaRadius",
-};
+import constants from "../../../../widget/js/constants";
 
 const listViewSection = document.querySelector("#main");
 
@@ -55,7 +50,7 @@ window.onSortLocationsChanged = (sorting) => {
 
 window.onShowLocationsModeChanged = (showMode) => {
   const areaRadiusOptionsContainer = document.querySelector("#areaRadiusOptionsContainer");
-  if (showMode === SearchLocationsModes.AreaRadius) {
+  if (showMode === constants.SearchLocationsModes.AreaRadius) {
     areaRadiusOptionsContainer?.classList?.remove('hidden');
   } else {
     areaRadiusOptionsContainer?.classList?.add('hidden');

src/widget/css/main.css

@@ -46,6 +46,7 @@ section#categories.overlay {
   border: 0;
   overflow: visible;
   background-color: transparent;
+  height: 2.5rem;
 }
 .search-field.mdc-text-field .mdc-text-field__input {
   font-size: 13px;
@@ -100,6 +101,8 @@ section#categories.overlay {
   margin-left: -15px;
   margin-right: -15px;
   margin-top: 18px;
+  height: 32px;
+  line-height: 32px;
 }
 .header-qf .mdc-chip {
   border-radius: 8px;

src/widget/js/constants/index.js

@@ -16,4 +16,10 @@ const getMapStyle = (name) => {
 
 const getDefaultLocation = () => ({ lat: 32.7182625, lng: -117.1601157 });
 
-export default { getMapStyle, getDefaultLocation };
+const SearchLocationsModes = {
+  All: "All",
+  UserPosition: "UserPosition",
+  AreaRadius: "AreaRadius",
+};
+
+export default { getMapStyle, getDefaultLocation, SearchLocationsModes };

src/widget/js/util/ui.js

@@ -39,27 +39,16 @@ export const adjustMapHeight = () => {
   const {
     design,
     filter,
-    sorting,
-    bookmarks
   } = state.settings;
   const mainMapContainer = document.querySelector('#mainMapContainer');
-  const mapCenterBtn = document.querySelector('#mapCenterBtn');
 
-  let baseMapHeight = 164;
-  let baseCenterBtnBottom = 120;
+  let baseMapHeight = 210;
 
-  if (!design.hideQuickFilter || filter.allowFilterByArea) {
-    baseMapHeight += 46;
-    baseCenterBtnBottom -= 10;
-  }
-
-  if (sorting.hideSorting && filter.hidePriceFilter && filter.hideOpeningHoursFilter && (!bookmarks.enabled || !bookmarks.allowForFilters)) {
-    baseMapHeight -= 36;
-    baseCenterBtnBottom -= 30;
+  if (design.hideQuickFilter && !filter.allowFilterByArea) {
+    baseMapHeight = 160;
   }
 
   mainMapContainer.style.height = `calc(100vh - ${baseMapHeight}px)`;
-  mapCenterBtn.style.bottom = `${baseCenterBtnBottom}px`;
 };
 
 export const navigateTo = (template) => {

src/widget/services/search/introSearchService.js

@@ -2,52 +2,53 @@
 import { buildOpenNowCriteria, buildSearchCriteria } from "./shared";
 import state from "../../js/state";
 import WidgetController from "../../widget.controller";
-
-const SearchLocationsModes = {
-  All: "All",
-  UserPosition: "UserPosition",
-  AreaRadius: "AreaRadius",
-};
+import constants from "../../js/constants";
 
 const IntroSearchService = {
-  _setupNearPipelines(query) {
-    const pipelines = [];
-
-    const $geoNear = {
-      near: { type: "Point", coordinates: [state.currentLocation.lng, state.currentLocation.lat] },
-      key: "_buildfire.geo",
-      maxDistance: 100000,
-      distanceField: "distance",
-      query: { ...query }
-    };
-    pipelines.push({ $geoNear });
-
-    if (state.searchCriteria.sort) {
-      const $sort = {};
-      $sort[state.introSort.sortBy] = state.introSort.order;
-      pipelines.push({ $sort });
+  _getUserCoordinates() {
+    const coordinates = [];
+    if (state.userPosition && state.userPosition.latitude && state.userPosition.longitude) {
+      coordinates.push(state.userPosition.longitude);
+      coordinates.push(state.userPosition.latitude);
+    } else {
+      const defaultPosition = constants.getDefaultLocation();
+      coordinates.push(defaultPosition.lng);
+      coordinates.push(defaultPosition.lat);
     }
-
-    return pipelines;
+  
+    return coordinates;
   },
 
-  _setupAreaRadiusPipelines(query) {
+  _setUpIntroGeoQuery(query) {
     const pipelines = [];
+    let centerSphere, radius;
+
+    if (state.settings.introductoryListView.searchOptions?.mode === constants.SearchLocationsModes.AreaRadius) {
+      centerSphere = [
+        state.settings.introductoryListView.searchOptions?.areaRadiusOptions?.lng || 1,
+        state.settings.introductoryListView.searchOptions?.areaRadiusOptions?.lat || 1,
+      ];
+      const _radiusMiles = state.settings.introductoryListView.searchOptions?.areaRadiusOptions?.radius || 1;
+      radius = _radiusMiles / 3963.2; // convert miles to radians
+    } else {
+      centerSphere = IntroSearchService._getUserCoordinates();
+      radius = 100 / 6378.1; // 100 km in radians
+    }
 
-    const lng = state.settings.introductoryListView.searchOptions?.areaRadiusOptions?.lng || 1;
-    const lat = state.settings.introductoryListView.searchOptions?.areaRadiusOptions?.lat || 1;
-    const radius = state.settings.introductoryListView.searchOptions?.areaRadiusOptions?.radius || 1;
+    if (state.currentLocation) { // this is for user search by location name
+      centerSphere = [state.currentLocation.lng, state.currentLocation.lat];
+    }
 
-    const $geoNear = {
-      near: { type: "Point", coordinates: [state.currentLocation.lng, state.currentLocation.lat] },
+    const $geoNear = { // near user position to calculate distance for each location
+      near: { type: "Point", coordinates: IntroSearchService._getUserCoordinates() },
       key: "_buildfire.geo",
       distanceField: "distance",
       query: { ...query }
     };
     const $match = {
       "_buildfire.geo": {
-        $geoWithin: {
-          $centerSphere: [[lng, lat], radius / 3963.2] // convert miles to radians
+        $geoWithin: { // find locations within a specific area
+          $centerSphere: [centerSphere, radius]
         }
       }
     };
@@ -91,19 +92,16 @@ const IntroSearchService = {
     const query = buildSearchCriteria();
     let pipelines;
 
-    if (state.settings.introductoryListView.searchOptions?.mode === SearchLocationsModes.All) {
+    if (state.settings.introductoryListView.searchOptions?.mode === constants.SearchLocationsModes.All && !state.currentLocation) {
       if (!state.fetchingAllNearReached) {
-        pipelines = this._setupNearPipelines(query);
+        pipelines = this._setUpIntroGeoQuery(query);
       } else {
         pipelines = this._setupOtherLocationsPipelines(query);
       }
-    } else if (state.settings.introductoryListView.searchOptions?.mode === SearchLocationsModes.AreaRadius) {
-      state.fetchingAllNearReached = true;
-      pipelines = this._setupAreaRadiusPipelines(query);
     } else {
       // the default search mode is UserPosition
       state.fetchingAllNearReached = true;
-      pipelines = this._setupNearPipelines(query);
+      pipelines = this._setUpIntroGeoQuery(query);
     }
 
     return pipelines;
@@ -125,7 +123,7 @@ const IntroSearchService = {
         state.fetchingNextPage = false;
         state.fetchingEndReached = aggregateLocations.length < state.searchCriteria.pageSize && state.fetchingAllNearReached;
 
-        if (aggregateLocations.length < state.searchCriteria.pageSize && !state.fetchingAllNearReached && state.settings.introductoryListView.searchOptions?.mode === SearchLocationsModes.All) {
+        if (aggregateLocations.length < state.searchCriteria.pageSize && !state.fetchingAllNearReached && state.settings.introductoryListView.searchOptions?.mode === constants.SearchLocationsModes.All) {
           state.fetchingAllNearReached = true;
           state.searchCriteria.page = 0;
           state.printOtherLocationMessage = true;

src/widget/services/search/mapSearchService.js

@@ -3,15 +3,32 @@ import WidgetController from '../../widget.controller';
 import mapSearchControl from '../../js/map/search-control';
 import state from "../../js/state";
 import { buildOpenNowCriteria, buildSearchCriteria } from './shared';
+import constants from '../../js/constants';
 
 const MapSearchService = {
+  getMapCenterPoint() {
+    let centerPoint = null;
+    if (state.settings.map.initialArea && state.settings.map.initialAreaCoordinates.lat && state.settings.map.initialAreaCoordinates.lng) {
+      centerPoint = { ...state.settings.map.initialAreaCoordinates };
+    } else if (state.userPosition) {
+      centerPoint = {
+        lat: state.userPosition.latitude,
+        lng: state.userPosition.longitude
+      };
+    } else {
+      centerPoint = constants.getDefaultLocation();
+    }
+
+    return centerPoint;
+  },
 
   _getNearestLocation() {
     const pipelines = [];
     const query = buildSearchCriteria();
+    const centerPoint = this.getMapCenterPoint();
 
     const $geoNear = {
-      near: { type: "Point", coordinates: [state.currentLocation.lng, state.currentLocation.lat] },
+      near: { type: "Point", coordinates: [centerPoint.lng, centerPoint.lat] },
       key: "_buildfire.geo",
       distanceField: "distance",
       query: { ...query },
@@ -35,6 +52,7 @@ const MapSearchService = {
       const pipelines = [];
       const query = buildSearchCriteria();
       const { mapBounds } = state.maps.map;
+      const centerPoint = this.getMapCenterPoint();
 
       if (!mapBounds || !Array.isArray(mapBounds)) {
         return resolve({});
@@ -60,8 +78,8 @@ const MapSearchService = {
       if (state.searchCriteria.sort) {
         if (state.searchCriteria.sort.sortBy === 'distance' && state.userPosition && state.userPosition.latitude && state.userPosition.longitude) {
           const centerMapPoint = state.maps.map.getCenter();
-          const lat1 = Math.abs(state.currentLocation.lat);
-          const lng1 = Math.abs(state.currentLocation.lng);
+          const lat1 = Math.abs(centerPoint.lat);
+          const lng1 = Math.abs(centerPoint.lng);
           const lat2 = Math.abs(centerMapPoint.lat());
           const lng2 = Math.abs(centerMapPoint.lng());
           if (Math.abs(lat1 - lat2) >= Math.abs(lng1 - lng2)) {