homeflowjs 0.11.5 → 0.11.7

package/actions/properties.actions.js

@@ -205,3 +205,8 @@ export const setSelectedMarker = (payload) => ({
   type: PropertiesActionTypes.SET_SELECTED_MARKER,
   payload,
 });
+
+export const setBreadcrumbs = (payload) => ({
+  type: PropertiesActionTypes.SET_BREADCRUMBS,
+  payload,
+});

package/actions/properties.types.js

@@ -8,6 +8,7 @@ const PropertiesActionTypes = {
   SET_PAGINATION: 'SET_PAGINATION',
   SET_PROPERTY_LINKS: 'SET_PROPERTY_LINKS',
   SET_SELECTED_MARKER: 'SET_SELECTED_MARKER',
+  SET_BREADCRUMBS: 'SET_BREADCRUMBS',
 };
 
 export default PropertiesActionTypes;

package/branches/branches-map/branches-map.component.jsx

@@ -23,6 +23,7 @@ const BranchesMap = ({
   displayPopup,
   selectedBranch, 
   branches: branchesProp,
+  MapContainerProps,
 }) => {
   let branches = !!branchesProp.length
     ? branchesProp
@@ -125,6 +126,7 @@ const BranchesMap = ({
       bounds={bounds}
       scrollWheelZoom={scrollWheelZoom}
       style={{ height: '100%' }}
+      {...MapContainerProps}
     >
       {google ? (
         <ReactLeafletGoogleLayer apiKey={gmapsKey} type="roadmap" />
@@ -149,7 +151,8 @@ BranchesMap.propTypes = {
   markerClickHandler: PropTypes.func,
   displayPopup : PropTypes.bool,
   selectedBranch: PropTypes.object,
-  branches: PropTypes.arrayOf(PropTypes.object)
+  branches: PropTypes.arrayOf(PropTypes.object),
+  MapContainerProps: PropTypes.object
 };
 
 BranchesMap.defaultProps = {
@@ -162,7 +165,8 @@ BranchesMap.defaultProps = {
   markerClickHandler: () => {},
   displayPopup: true,
   selectedBranch: {},
-  branches: []
+  branches: [],
+  MapContainerProps: {}
 };
 
 const mapStateToProps = (state) => ({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "homeflowjs",
-  "version": "0.11.5",
+  "version": "0.11.7",
   "description": "JavaScript toolkit for Homeflow themes",
   "main": "index.js",
   "scripts": {

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

@@ -23,6 +23,7 @@ export default class DraggableMap {
     this.render = this.render.bind(this);
     this.generateMap = this.generateMap.bind(this);
     this.properties = this.getProperties();
+    this.breadcrumbs = null;
     if (Homeflow.get('select_marker_on_click')) {
       this.selectedMarker = null;
       store.subscribe(() => {
@@ -35,6 +36,8 @@ export default class DraggableMap {
         }
       })
     }
+
+    if (Homeflow.get('breadcrumbs_map')) store.subscribe(() => this.handleBreadcrumbsInit());
   }
 
   getSearch() {
@@ -53,10 +56,7 @@ export default class DraggableMap {
       this.mapLoadedTimes = 1;
       this.render();
       this.buildPolygon();
-      const properties = this.properties;
-      if (properties != null) {
-        this.setMarkersFor(properties);
-      }
+      this.setMarkersFor(this.propertiesOrBreadcrumbs());
       if (this.noLocationfound) { this.setToMarkeredBounds(); }
       if (Homeflow.get('custom_map_zoom') !== null) {
         this.map.setZoom(Homeflow.get('custom_map_zoom'));
@@ -74,7 +74,9 @@ export default class DraggableMap {
     // }
 
     this.generateMap();
-    if (!Homeflow.get('free_text_search')) { this.map.on('zoomend', () => (this.onMapDrag())); }
+    if (!Homeflow.get('free_text_search') && !Homeflow.get('breadcrumbs_map')) {
+      this.map.on('zoomend', () => (this.onMapDrag()));
+    }
     this.map.on('dragend', () => (this.onMapDrag()));
     const _this = this;
 
@@ -120,7 +122,7 @@ export default class DraggableMap {
   }
 
   generateMarker(property) {
-    const marker = L.marker([property.lat, property.lng], { icon: this.generateMarkerIcon(property) });
+    const marker = L.marker([property.lat, property.lng], { icon: Homeflow.get('custom_property_pin')(property) });
 
     // add the property to marker attributes so they can be accessed on click
     marker.property = property;
@@ -242,12 +244,12 @@ export default class DraggableMap {
     }
   }
 
-  setMarkersFor(properties) {
+  setMarkersFor(propertiesOrBreadcrumbs) {
     let bounds;
     if (this.marker_layer != null) { this.map.removeLayer(this.marker_layer); }
-    if (!properties) { return null }
+    if (!propertiesOrBreadcrumbs) { return null }
 
-    if (Homeflow.get('pin_clustering')) {
+    if (Homeflow.get('pin_clustering') && !this.breadcrumbs?.length) {
       let radius = Homeflow.get('custom_clustering_radius');
       if (!radius) {
         radius = 10;
@@ -256,10 +258,10 @@ export default class DraggableMap {
     } else {
       this.marker_layer = L.featureGroup();
     }
-    const markers = properties.map((property) => {
-      if (property.property_id != null) {
-        if (property.lat !== 0 && property.lng !== 0) {
-          const m = this.generateMarker(property);
+    const markers = propertiesOrBreadcrumbs.map((propertyOrBreadcrumb) => {
+      if (propertyOrBreadcrumb.property_id != null || Homeflow.get('breadcrumbs_map')) {
+        if (propertyOrBreadcrumb.lat !== 0 && propertyOrBreadcrumb.lng !== 0) {
+          const m = this.generateMarker(propertyOrBreadcrumb);
           this.marker_layer.addLayer(m);
           return m;
         }
@@ -409,7 +411,7 @@ export default class DraggableMap {
                 // if (this.tile_view != null) {
                 //   this.tile_view = new Ctesius.Views.Tiles({ collection: this.collection });
                 // }
-                return this.setMarkersFor(this.properties);
+                return this.setMarkersFor(this.propertiesOrBreadcrumbs());
               });
     }
   }
@@ -573,7 +575,7 @@ export default class DraggableMap {
           //   this.tile_view = new Ctesius.Views.Tiles({ collection: this.collection });
           // }
 
-          return this.setMarkersFor(json.properties);
+          return this.setMarkersFor(this.propertiesOrBreadcrumbs());
       })
     // return $.get(url, (res, status, xhr) => {
     //   s.set('performed_data', res);
@@ -623,4 +625,27 @@ 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() {
+    const { properties: { breadcrumbs } } = store.getState();
+
+    if (breadcrumbs && this.breadcrumbs !== breadcrumbs) {
+      this.breadcrumbs = breadcrumbs;
+      this.setMarkersFor(breadcrumbs);
+    }
+  }
 }

package/reducers/properties.reducer.js

@@ -83,6 +83,12 @@ const propertiesReducer = (state = INITIAL_STATE, action) => {
         ...state,
         selectedMarker: action.payload,
       };
+    case 'SET_BREADCRUMBS': {
+      return {
+        ...state,
+        breadcrumbs: action.payload,
+      }
+    };
     default:
       return state;
   }

package/reducers/properties.reducer.test.js

@@ -59,4 +59,12 @@ describe('propertiesReducer', () => {
 
     expect(reducedState).toMatchObject(state);
   });
+
+  it('Sets breadcrumbs when it receives the SET_BREADCRUMBS action', () => {
+    const breadcrumbs = [{ geoname_id: '12345' }, { geoname_id: '45678' }];
+    const state = { properties: [] };
+    const reducedState = propertiesReducer(state, { type: 'SET_BREADCRUMBS', payload: breadcrumbs });
+
+    expect(reducedState.breadcrumbs).toEqual([{ geoname_id: '12345' }, { geoname_id: '45678' }]);
+  });
 });

package/search/location-input/location-input.component.jsx

@@ -17,6 +17,7 @@ class LocationInput extends Component {
     this.onLocationChange = this.onLocationChange.bind(this);
     // wait half a second after typing stops before fetching results
     this.debouncedLoadSuggestions = debounce(this.loadSuggestions, DEBOUNCE_DELAY);
+    this.abortContRef = React.createRef();
   }
 
   onLocationChange(event, { newValue }) {
@@ -31,8 +32,14 @@ class LocationInput extends Component {
   }
 
   getSuggestions(q) {
-    return fetch(`/places?term=${q}`)
-            .then(response => response.json());
+    if (this.abortContRef.current) this.abortContRef.current.abort();
+    this.abortContRef.current = new AbortController();
+    return fetch(`/places?term=${q}`, { signal: this.abortContRef.current.signal })
+            .then(response => response.json())
+            .catch(e => { 
+              if (e.code === 20) return;
+              console.error(e);
+            });
   }
 
   renderSuggestion(suggestion) {
@@ -51,7 +58,7 @@ class LocationInput extends Component {
     this.getSuggestions(value)
       .then((data) => {
         const suggestions = data ? (
-          data
+         data
             .filter((_item, index) => index < 15 )
             .map((item) => (
               { label: item[0], place: item[1] }

package/search/property-search/parse-fragment.js

@@ -41,6 +41,11 @@ export default (fragment) => {
       return;
     }
 
+    if (part.startsWith('gid-')) {
+      search.placeId = part.replace(/^gid-/, '');
+      return;
+    }
+
     if (orderParams.includes(part)) {
       search.sorted = part;
       return;

package/search/property-search/parse-fragment.test.js

@@ -37,4 +37,10 @@ describe('parseFragment', () => {
     // Have to use `Array []` to check equality here for some reason
     expect(parseFragment(fragment).tags).toEqual(Array ['house', 'flat']);
   });
+
+  it('turns gid-12345 into Place ID', () => {
+    const fragment = '/properties/sales/france/gid-12345/from-3-bed';
+
+    expect(parseFragment(fragment).placeId).toEqual('12345');
+  });
 });