homeflowjs 1.0.12 → 1.0.14

package/actions/properties.actions.js

@@ -129,12 +129,25 @@ export const setPagination = (payload) => ({
 
 export const postPropertyView = (payload) => () => {
   const domain = location.hostname;
+  const { sendAsFormData } = Homeflow.get('propertyViewsOptions') ?? {};
+  const data = { property_id: payload, domain };
+
+  let contentType; 
+  let body;
+  if (sendAsFormData) {
+    contentType = 'application/x-www-form-urlencoded; charset=UTF-8'; 
+    body = JSON_to_URLEncoded(data);
+  } else {
+    contentType = 'application/json'
+    body = JSON.stringify(data);
+  }
+
   fetch('/property_views',
     {
       method: 'POST',
       mode: 'no-cors',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ property_id: payload, domain }),
+      headers: { 'Content-Type': contentType },
+      body,
     });
 };
 

package/package.json

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

package/properties/properties-display/properties-display.component.jsx

@@ -21,6 +21,10 @@ const PropertiesDisplay = ({
   previousBtnClasses,
   ...other
 }) => {
+  if (!properties?.length) {
+    return noResultsMessage;
+  }
+
   const propertiesPagination = useSelector((state) => state.properties?.pagination);
   const infiniteScrollRef = useRef();
   const {
@@ -53,10 +57,6 @@ const PropertiesDisplay = ({
     };
   }, [properties]);
 
-  if (!properties?.length) {
-    return noResultsMessage;
-  }
-
   const addWrapper = displayType === 'list';
 
   const showPreviousBtn = includePreviousBtn && hasPreviousPage && !loadingPreviousProperties;

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

@@ -18,7 +18,7 @@ const element = function (X, Y) {
 // TODO: subscribe to store for when properties change and refresh the map
 
 export default class DraggableMap {
-  constructor() {
+  constructor({ updateMapOnPropertiesLoadMore, dragWithoutUpdate } = {}) {
     this.updateURL = this.updateURL.bind(this);
     this.onPolygonDrawn = this.onPolygonDrawn.bind(this);
     this.init = this.init.bind(this);
@@ -31,9 +31,10 @@ export default class DraggableMap {
     this.removeOverlay = this.removeOverlay.bind(this);
     this.showOverlay = this.showOverlay.bind(this);
     this.hideOverlay = this.hideOverlay.bind(this);
+    this.updateMapOnPropertiesLoadMore = updateMapOnPropertiesLoadMore || false;
+    this.dragWithoutUpdate = dragWithoutUpdate || false;
     this.initOnMarkerClick();
   }
-
   initOnMarkerClick() {
     if (!Homeflow.get('select_marker_on_click')) return;
 
@@ -59,8 +60,26 @@ export default class DraggableMap {
     return store.getState().properties.properties;
   }
 
+  /*
+   * theme needs both Homeflow.kickEvent('performed_previous_infinite_scroll')
+   * and Homeflow.kickEvent('preformed_next_infinite_scroll')
+   * to kick the map updates
+  */
+  initMapUpdateOnPropertiesLoadMore() {
+    Homeflow.registerEvent('performed_previous_infinite_scroll', () => {
+      this.properties = this.getProperties();
+      this.setMarkers();
+    });
+
+    Homeflow.registerEvent('performed_next_infinite_scroll', () => {
+      this.properties = this.getProperties();
+      this.setMarkers();
+    })
+  }
+
   init() {
-    store.dispatch(setSearchField({ page: null }));
+    if (!this.updateMapOnPropertiesLoadMore) store.dispatch(setSearchField({ page: null }));
+
     //@setElement( $(Homeflow.get('small_map_element')))
     if (Homeflow.get('draggable_map_view') != null) {
       this.element = Homeflow.get('draggable_map_view');
@@ -81,6 +100,9 @@ export default class DraggableMap {
     }
     Homeflow.kickEvent('map_view_rendered', this);
     store.dispatch(setLoading({ propertiesMap: false }));
+
+    if (this.updateMapOnPropertiesLoadMore) this.initMapUpdateOnPropertiesLoadMore();
+
     if (Homeflow.get('draw_map_search_loader')) {
       this.drawSearchLoader = document.querySelector(`${Homeflow.get('draw_map_search_loader')}`);
     }
@@ -476,8 +498,12 @@ export default class DraggableMap {
 
 
   onMapDrag({ markerPlaceId } = { markerPlaceId: null }) {
+    // no drag allowed.
     if (Homeflow.get('disable_draggable_map') || this.drawableMapInitialized) return;
 
+    // drag map but no fetching properties within the new boundaries.
+    if(this.dragWithoutUpdate) return null;
+
     let url;
     const bounds = this.getSearchableBounds();
     const has_expanded = this.getSearch().expandedPolygon;

package/properties/properties-map/properties-map.component.jsx

@@ -16,7 +16,7 @@ import './marker_cluster.css';
 import './marker_cluster.default.css';
 
 // global callback to run when maps scripts are loaded
-window.initLegacyMap = (options) => {
+window.initLegacyMap = (options, updateMap, updateDragg) => {
   let map;
   if (Homeflow.get('geonames_map')) {
     map = new GeonamesMap();
@@ -25,7 +25,10 @@ window.initLegacyMap = (options) => {
     map = new DrawableMap();
     map.init();
   } else {
-    map = new DraggableMap();
+    map = new DraggableMap({
+      updateMapOnPropertiesLoadMore: updateMap,
+      dragWithoutUpdate: updateDragg,
+    });
     map.init();
   }
 
@@ -67,7 +70,9 @@ window.$ = () => ({
 // )
 // end
 
-const PropertiesMap = ({ leaflet, gmapKey, googleLayer, legacyMapOptions }) => {
+const PropertiesMap = ({
+  leaflet, gmapKey, googleLayer, legacyMapOptions, updateMapOnPropertiesLoadMore, dragWithoutUpdate
+}) => {
   const addLegacyMaps = () => {
     const needsGoogle = !leaflet || googleLayer;
 
@@ -84,7 +89,7 @@ const PropertiesMap = ({ leaflet, gmapKey, googleLayer, legacyMapOptions }) => {
       script.setAttribute('id', 'hfjs-legacy-maps');
       script.setAttribute(
         'onload',
-        `window.initLegacyMap(${legacyMapOptions ? JSON.stringify(legacyMapOptions) : ''})`,
+        `window.initLegacyMap(${legacyMapOptions ? JSON.stringify(legacyMapOptions) : null}, ${updateMapOnPropertiesLoadMore}, ${dragWithoutUpdate})`,
       );
       document.head.appendChild(script);
     } else {
@@ -108,6 +113,8 @@ PropertiesMap.propTypes = {
   gmapKey: PropTypes.string,
   leaflet: PropTypes.bool,
   googleLayer: PropTypes.bool,
+  updateMapOnPropertiesLoadMore: PropTypes.bool,
+  dragWithoutUpdate: PropTypes.bool,
   legacyMapOptions: PropTypes.shape({
     disableHandlersOnInit: PropTypes.bool,
     overlayText: PropTypes.string,
@@ -119,6 +126,8 @@ PropertiesMap.defaultProps = {
   leaflet: false,
   googleLayer: false,
   legacyMapOptions: null,
+  updateMapOnPropertiesLoadMore: false,
+  dragWithoutUpdate: false,
 };
 
 const mapStateToProps = (state) => ({