homeflowjs 0.13.12 → 0.13.14

package/hooks/index.js

@@ -2,10 +2,12 @@ import useDefaultSort from './use-default-sort.hook';
 import useGeolocate from './use-geolocate';
 import useOutsideClick from './use-outside-click';
 import { useOnScreen } from './use-on-screen';
+import usePropertyInfiniteScroll from './use-property-inifinite-scroll';
 
 export {
   useDefaultSort,
   useGeolocate,
   useOutsideClick,
   useOnScreen,
+  usePropertyInfiniteScroll,
 };

package/hooks/use-property-inifinite-scroll.js

@@ -0,0 +1,45 @@
+import { useEffect } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+
+import { loadNext } from '../actions/properties.actions';
+import { addSearchToLocalStorage } from '../app/user-history';
+
+const usePropertyInfiniteScroll = (targetRef, options = {}) => {
+  const pagination = useSelector((state) => state.properties?.pagination);
+  const loadingProperties = useSelector((state) => state.app.loading?.properties);
+  const currentSearch = useSelector((state) => state.search?.currentSearch);
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    let observer;
+
+    if (pagination.has_next_page) {
+      observer = new IntersectionObserver(
+        (entries) => {
+          if (entries[0].isIntersecting) {
+            dispatch(loadNext())
+              .then(() => {
+                addSearchToLocalStorage(currentSearch);
+              });
+          }
+        },
+        options,
+      );
+
+      if (targetRef.current) {
+        observer.observe(targetRef.current);
+      }
+    }
+
+
+    return () => {
+      if (targetRef.current) {
+        observer.unobserve(targetRef.current);
+      }
+    };
+  }, [targetRef]);
+
+  return { loadingProperties, hasNextPage: pagination.has_next_page };
+};
+
+export default usePropertyInfiniteScroll;

package/package.json

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

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

@@ -1,8 +1,9 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 
-import { handleScroll, propertiesByPage, updatePageInURL } from '../property-utils/property-utils';
+import { propertiesByPage, updatePageInURL } from '../property-utils/property-utils';
+import { usePropertyInfiniteScroll } from '../../hooks';
 
 const ConditionalWrapper = ({ condition, wrapper, children }) => (
   condition ? wrapper(children) : children
@@ -13,21 +14,13 @@ const PropertiesDisplay = ({
   Item,
   displayType,
   infiniteScroll,
+  InfiniteScrollLoader,
   inserts,
   noResultsMessage,
   ...other
 }) => {
-  const onScroll = () => {
-    handleScroll(infiniteScroll);
-  };
-
-  useEffect(() => {
-    window.addEventListener('scroll', onScroll);
-
-    return function cleanUp() {
-      window.removeEventListener('scroll', onScroll);
-    };
-  }, []);
+  const infiniteScrollRef = useRef();
+  const { loadingProperties, hasNextPage } = usePropertyInfiniteScroll(infiniteScrollRef);
 
   useEffect(() => {
     const pageMarkers = document.querySelectorAll('[data-page-marker]');
@@ -49,7 +42,7 @@ const PropertiesDisplay = ({
     };
   }, [properties]);
 
-  if (!properties.length) {
+  if (!properties?.length) {
     return noResultsMessage;
   }
 
@@ -94,9 +87,17 @@ const PropertiesDisplay = ({
   ));
 
   return (
-    <div className={`hf-property-results hf-property-results__${displayType}`}>
-      {items}
-    </div>
+    <>
+      <div className={`hf-property-results hf-property-results__${displayType}`}>
+        {items}
+      </div>
+      {infiniteScroll && hasNextPage && (
+        <div ref={infiniteScrollRef} />
+      )}
+      {infiniteScroll && InfiniteScrollLoader && hasNextPage && loadingProperties && (
+        <InfiniteScrollLoader />
+      )}
+    </>
   );
 };
 
@@ -105,12 +106,14 @@ PropertiesDisplay.propTypes = {
   Item: PropTypes.elementType.isRequired,
   displayType: PropTypes.string.isRequired,
   infiniteScroll: PropTypes.bool.isRequired,
+  InfiniteScrollLoader: PropTypes.func,
   inserts: PropTypes.array,
   noResultsMessage: PropTypes.node,
 };
 
 PropertiesDisplay.defaultProps = {
   inserts: null,
+  InfiniteScrollLoader: null,
   noResultsMessage: <p>There were no properties matching your search.</p>,
 };
 

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

@@ -52,6 +52,7 @@ export default class DraggableMap {
   }
 
   init() {
+    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');

package/properties/properties-map/geonames-map.js

@@ -48,6 +48,13 @@ export default class GeonamesMap extends DraggableMap {
     const prevProperties = store.getState().properties.properties;
 
     this.unsubscribeFromGeonamesChanges = store.subscribe(() => {
+      const zoomLevel = this.map.getZoom();
+      /*
+       * Unsubscribe if the user has zoomed from the initial position as this
+       * was causing the map to zoom back to it's inital position
+       */
+      if (window.initialZoomLevel && window.initialZoomLevel !== zoomLevel) return this.unsubscribeFromGeonamesChanges();
+
       const { geonames, properties } = store.getState().properties
 
       if (properties?.length) this.geonamesInit();
@@ -78,7 +85,14 @@ export default class GeonamesMap extends DraggableMap {
      * If for some reason the markers have not rendered after a few seconds
      * render them so we don't have an empty map
      */
-    setTimeout(() => {
+    const geoNamesTimer = setTimeout(() => {
+      const zoomLevel = this.map.getZoom();
+      /*
+       * Cancel timer if the user has zoomed from the initial position as this
+       * was causing the map to zoom back to it's inital position
+       */
+      if (window.initialZoomLevel && window.initialZoomLevel !== zoomLevel) return cancelGeonamesTimer();
+
       if (!this.markersInitialized) {
         const { geonames, properties } = store.getState().properties
         if (!properties && !geonames?.length) {
@@ -93,6 +107,10 @@ export default class GeonamesMap extends DraggableMap {
         this.setToMarkeredBounds();
       }
     }, 5000);
+
+    function cancelGeonamesTimer() {
+      clearTimeout(geoNamesTimer);
+    }
   }
 
   setMarkerTypeforZoomLevel() {
@@ -172,6 +190,7 @@ export default class GeonamesMap extends DraggableMap {
 
     this.setMarkers();
     this.setToMarkeredBounds();
+    if (!window.initialZoomLevel) window.initialZoomLevel = this.map.getZoom();
 
     const zoomLevel = this.map.getZoom();
 

package/properties/property-results/property-results.component.jsx

@@ -24,6 +24,7 @@ const PropertyResults = ({
   MapItem,
   defaultView,
   infiniteScroll,
+  infiniteScrollLoader,
   noMap,
   inserts,
   noResultsMessage,
@@ -36,6 +37,7 @@ const PropertyResults = ({
           Item={ListItem}
           displayType="list"
           infiniteScroll={infiniteScroll}
+          InfiniteScrollLoader={infiniteScrollLoader}
           inserts={inserts}
           noResultsMessage={noResultsMessage}
           {...other}
@@ -47,6 +49,7 @@ const PropertyResults = ({
           Item={GridItem}
           displayType="grid"
           infiniteScroll={infiniteScroll}
+          InfiniteScrollLoader={infiniteScrollLoader}
           inserts={inserts}
           noResultsMessage={noResultsMessage}
           {...other}
@@ -60,6 +63,7 @@ const PropertyResults = ({
             displayType="map"
             infiniteScroll={infiniteScroll}
             inserts={inserts}
+            InfiniteScrollLoader={infiniteScrollLoader}
             noResultsMessage={noResultsMessage}
             {...other}
           />
@@ -74,6 +78,7 @@ const PropertyResults = ({
             Item={GridItem}
             displayType="grid"
             infiniteScroll={infiniteScroll}
+            InfiniteScrollLoader={infiniteScrollLoader}
             inserts={inserts}
             noResultsMessage={noResultsMessage}
             {...other}
@@ -85,6 +90,7 @@ const PropertyResults = ({
             Item={ListItem}
             displayType="list"
             infiniteScroll={infiniteScroll}
+            InfiniteScrollLoader={infiniteScrollLoader}
             inserts={inserts}
             noResultsMessage={noResultsMessage}
             {...other}
@@ -101,6 +107,7 @@ PropertyResults.propTypes = {
   MapItem: PropTypes.elementType,
   defaultView: PropTypes.string,
   infiniteScroll: PropTypes.bool,
+  infiniteScrollLoader: PropTypes.elementType,
   noMap: PropTypes.bool,
   inserts: PropTypes.array,
 };
@@ -111,6 +118,7 @@ PropertyResults.defaultProps = {
   MapItem: null,
   defaultView: 'list',
   infiniteScroll: false,
+  infiniteScrollLoader: null,
   noMap: false,
   inserts: null,
 };