homeflowjs 0.12.12 → 0.12.13

package/actions/properties.actions.js

@@ -26,6 +26,8 @@ export const setPropertyLinksAsync = () => (dispatch) => {
   fetch(searchURL)
     .then((response) => response.json())
     .then(({ properties }) => {
+      if (!properties) return;
+
       const index = properties.findIndex((prop) => prop.property_id === Homeflow.get('property').property_id);
       // if there is a next and previous property in page, set those
       if (properties[index + 1] && properties[index - 1]) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "homeflowjs",
-  "version": "0.12.12",
+  "version": "0.12.13",
   "sideEffects": [
     "modal/**/*",
     "user/default-profile/**/*",

package/properties/properties-map/draggable-map.js

@@ -29,8 +29,8 @@ export default class DraggableMap {
       this.selectedMarker = null;
       store.subscribe(() => {
         const newSelectedMarker = store.getState().properties.selectedMarker;
-        const newSelectedPropertyID = newSelectedMarker ? newSelectedMarker.property.property_id : null;
-        const stateSelectedPropertyID = this.selectedMarker ? this.selectedMarker.property.property_id : null;
+        const newSelectedPropertyID = this.markerPropertyIdOrGeonameId(newSelectedMarker);
+        const stateSelectedPropertyID = this.markerPropertyIdOrGeonameId(this.selectedMarker);
 
         if (newSelectedPropertyID !== stateSelectedPropertyID) {
           this.activateMarker(newSelectedMarker);
@@ -75,7 +75,7 @@ export default class DraggableMap {
     // }
 
     this.generateMap();
-    if (!Homeflow.get('free_text_search') && !Homeflow.get('breadcrumbs_map')) {
+    if (!Homeflow.get('free_text_search')) {
       this.map.on('zoomend', () => (this.onMapDrag()));
     }
     this.map.on('dragend', () => (this.onMapDrag()));
@@ -97,6 +97,12 @@ export default class DraggableMap {
     }
     this.selectedMarker = marker;
     if (this.selectedMarker) this.selectedMarker.setIcon(this.generateMarkerIcon(marker.property));
+
+    if (marker.property.geoname_id && marker.property.viewport) {
+      this.bounds = this.getViewportBounds(marker.property.viewport);
+      this.map.fitBounds(this.bounds, Homeflow.get('custom_map_bounds_padding'));
+      this.onMapDrag();
+    }
   }
 
   generateMarkerIcon(property) {
@@ -331,8 +337,9 @@ export default class DraggableMap {
     }
   }
 
-  getViewportBounds() {
-    return [...this.viewport[0].filter((coords, index) => index === 0 || index === 2).map(coords => [...coords.toReversed()])];
+  getViewportBounds(viewport) {
+    viewport = viewport || this.viewport;
+    return [...viewport[0].filter((coords, index) => index === 0 || index === 2).map(coords => [...coords.toReversed()])];
   }
 
   getTopRightMarkerCoordinates() {
@@ -453,49 +460,57 @@ export default class DraggableMap {
 
 
   onMapDrag() {
-    if (!Homeflow.get('disable_draggable_map')) {
-      let url;
-      const bounds = this.getSearchableBounds();
-      const has_expanded = this.getSearch().expandedPolygon;
-      if (this.mapLoadedTimes === 1 || has_expanded ) {
-        url = `/search.ljson?${buildQueryString(this.getSearch())}/view-${bounds.toBBoxString()}&count=50`;
-      } else {
-        // unset place
-        // Leaving this commented as it may be needed
-        // It is causing issues as the place state is never reset after the request
-        // so the place is just empty
-        // Not sure it has to be set to null for the request to work
-        // store.dispatch(setPlace(null));
-        const newSearch = this.getSearch();
-        url = `/search.ljson?${buildQueryString(newSearch)}/view-${bounds.toBBoxString()}&count=50`;
-      }
-      if (Homeflow.get('get_geo_features')) {
-        const geo_url = Homeflow.get('root_url') + `geo_features.ljson?${Ctesius.getSearch().toGetParams(false)}/view-${bounds.toBBoxString()}&count=50`;
-        $.get(geo_url, (res, status, xhr) => {
-          this._running_update = false;
-          if (this.geo_marker_layer != null) { this.map.removeLayer(this.geo_marker_layer); }
-          return this.addGeoMarkers(res);
-        });
-      }
-      if (Homeflow.get('map_branch_id') != null) {
-        url = url + "&branch_id=" + Homeflow.get('map_branch_id');
-      }
-      Homeflow.kickEvent('before_draggable_map_updated');
-      return fetch(url)
-              .then((response) => response.json())
-              .then(json => {
-                Homeflow.kickEvent('draggable_map_updated', json);
-                store.dispatch(setProperties(json.properties))
-                this._running_update = false;
+    if (Homeflow.get('disable_draggable_map') || this.drawableMapInitialized) return;
 
-                this.properties = json.properties;
-                // TODO: figure out what 'tile view' is
-                // if (this.tile_view != null) {
-                //   this.tile_view = new Ctesius.Views.Tiles({ collection: this.collection });
-                // }
-                return this.setMarkers();
-              });
+    let url;
+    const bounds = this.getSearchableBounds();
+    const has_expanded = this.getSearch().expandedPolygon;
+    if (this.mapLoadedTimes === 1 || has_expanded ) {
+      url = `/search.ljson?${buildQueryString(this.getSearch())}/view-${bounds.toBBoxString()}&count=50`;
+    } else {
+      // unset place
+      // Leaving this commented as it may be needed
+      // It is causing issues as the place state is never reset after the request
+      // so the place is just empty
+      // Not sure it has to be set to null for the request to work
+      // store.dispatch(setPlace(null));
+      const newSearch = this.getSearch();
+      url = `/search.ljson?${buildQueryString(newSearch)}/view-${bounds.toBBoxString()}&count=50`;
+    }
+    if (Homeflow.get('get_geo_features')) {
+      const geo_url = Homeflow.get('root_url') + `geo_features.ljson?${Ctesius.getSearch().toGetParams(false)}/view-${bounds.toBBoxString()}&count=50`;
+      $.get(geo_url, (res, status, xhr) => {
+        this._running_update = false;
+        if (this.geo_marker_layer != null) { this.map.removeLayer(this.geo_marker_layer); }
+        return this.addGeoMarkers(res);
+      });
+    }
+    if (Homeflow.get('map_branch_id') != null) {
+      url = url + "&branch_id=" + Homeflow.get('map_branch_id');
     }
+    Homeflow.kickEvent('before_draggable_map_updated');
+    url = url + '&zoom_level=' + this.map.getZoom();
+
+    return fetch(url)
+            .then((response) => response.json())
+            .then(json => {
+              Homeflow.kickEvent('draggable_map_updated', json);
+              store.dispatch(setProperties(json.properties))
+              this._running_update = false;
+
+              if (json.breadcrumbs) {
+                this.breadcrumbs = this.concatenateDistinctObjects('geoname_id', this.breadcrumbs, json.breadcrumbs);
+                this.properties = [];
+              } else if (json.properties) {
+                this.properties = this.concatenateDistinctObjects('property_id', this.properties, json.properties);
+                this.breadcrumbs = [];
+              }
+              // TODO: figure out what 'tile view' is
+              // if (this.tile_view != null) {
+              //   this.tile_view = new Ctesius.Views.Tiles({ collection: this.collection });
+              // }
+              return this.setMarkers();
+            });
   }
 
   // this method was copied directly from transpiled ES5 from the browser as it's the only
@@ -708,21 +723,9 @@ export default class DraggableMap {
     return new L.LatLng(y, x);
   }
 
-  propertiesOrBreadcrumbs() {
-    const breadcrumbs = this.breadcrumbs;
-    const properties = this.properties;
-    if (breadcrumbs && breadcrumbs.length) {
-      return breadcrumbs;
-    } else if (breadcrumbs && !breadcrumbs.length) {
-      return properties;
-    } else if (properties !== null && !Homeflow.get('breadcrumbs_map')) {
-      return properties;
-    } else {
-      return null;
-    }
-  }
-
   handleBreadcrumbsInit() {
+    if (this.breadcrumbsInitialized) return;
+
     const { properties: { breadcrumbs } } = store.getState();
 
     if (breadcrumbs && this.breadcrumbs !== breadcrumbs) {
@@ -730,5 +733,19 @@ export default class DraggableMap {
       this.setMarkers();
       this.setToMarkeredBounds();
     }
+
+    this.breadcrumbsInitialized = true;
+  }
+
+  concatenateDistinctObjects(key, array, otherArray) {
+    return [...new Map((array || []).concat(otherArray || []).map((object) => [object[key], object])).values()];
+  }
+
+  markerPropertyIdOrGeonameId(marker) {
+    if (!marker) return null;
+    if (marker?.property?.property_id) return marker.property.property_id;
+    if (marker?.property?.geoname_id) return marker.property.geoname_id;
+
+    return null;
   }
 }

package/properties/properties-map/drawable-map.js

@@ -146,11 +146,6 @@ export default class DrawableMap extends DraggableMap {
       if (!this.first) { return this.onMapDrag(); }
     });
 
-    this.map.on('dragend', () => {
-      return this.onMapDrag();
-    });
-
-
     this.map.on("draw:drawstart", e => {
       this.first = false;
       this.map.removeLayer(this.marker_layer);