homeflowjs 0.13.29 → 0.13.31

package/actions/properties.actions.js

@@ -155,7 +155,9 @@ export const loadPage = (payload) => (dispatch, getState) => {
           { ...property, resultPage: newSearch.page }
         ));
         newProperties = [...addedProperties, ...newProperties];
+        dispatch(setSearch(newSearch));
         dispatch(setProperties(newProperties));
+        dispatch(setPagination(json.pagination));
         dispatch(setLoading({ properties: false }));
       }
     });

package/hooks/index.js

@@ -4,6 +4,7 @@ import useOutsideClick from './use-outside-click';
 import { useOnScreen } from './use-on-screen';
 import usePropertyInfiniteScroll from './use-property-inifinite-scroll';
 import useLoadBranches from './use-load-branches';
+import useLoadPreviousProperties from './use-load-previous-properties';
 
 export {
   useDefaultSort,
@@ -12,4 +13,5 @@ export {
   useOnScreen,
   usePropertyInfiniteScroll,
   useLoadBranches,
+  useLoadPreviousProperties,
 };

package/hooks/use-load-previous-properties.jsx

@@ -0,0 +1,49 @@
+import { useState, useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { loadPage } from '../actions/properties.actions';
+import { addSearchToLocalStorage } from '../app/user-history';
+import { updatePageInURL } from '../properties/property-utils/property-utils';
+
+const useLoadPreviousProperties = () => {
+  const loadingProperties = useSelector((state) => state.app.loading?.properties);
+  const currentSearch = useSelector((state) => state.search?.currentSearch);
+  const [currentTopPage, setCurrentTopPage] = useState();
+  const dispatch = useDispatch();
+
+  const findInitialTopPage = () => {
+    const pathSegments = window.location.pathname.split('/');
+    const pageSegment = pathSegments.find((segment) => segment.match(/page-\d+/));
+    if (!pageSegment) return null;
+
+    const pageNumber = pageSegment.match(/\d+/);
+
+    if (pageNumber) {
+      return parseInt(pageNumber, 10);
+    }
+  };
+
+  useEffect(() => {
+    setCurrentTopPage(findInitialTopPage());
+  }, []);
+
+  const loadPreviousProperties = () => {
+    const currentFirstPage = Number(document.querySelector('[data-page-marker]').dataset?.pageMarker);
+    if (currentFirstPage > 1) {
+      dispatch(loadPage(currentFirstPage - 1))
+        .then(() => {
+          addSearchToLocalStorage(currentSearch);
+          updatePageInURL(currentFirstPage - 1);
+          setCurrentTopPage(currentFirstPage - 1);
+        });
+    }
+  };
+
+  return {
+    loadPreviousProperties,
+    hasPreviousPage: currentTopPage && currentTopPage !== 1,
+    loadingProperties,
+  };
+};
+
+export default useLoadPreviousProperties;

package/package.json

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

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

@@ -1,9 +1,9 @@
 import React, { useEffect, useRef } from 'react';
-import { connect } from 'react-redux';
+import { connect, useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 
 import { propertiesByPage, updatePageInURL } from '../property-utils/property-utils';
-import { usePropertyInfiniteScroll } from '../../hooks';
+import { usePropertyInfiniteScroll, useLoadPreviousProperties } from '../../hooks';
 
 const ConditionalWrapper = ({ condition, wrapper, children }) => (
   condition ? wrapper(children) : children
@@ -17,10 +17,21 @@ const PropertiesDisplay = ({
   InfiniteScrollLoader,
   inserts,
   noResultsMessage,
+  includePreviousBtn,
+  previousBtnClasses,
   ...other
 }) => {
+  const propertiesPagination = useSelector((state) => state.properties?.pagination);
   const infiniteScrollRef = useRef();
-  const { loadingProperties, hasNextPage } = usePropertyInfiniteScroll(infiniteScrollRef);
+  const {
+    loadingProperties: loadingNextProperties,
+    hasNextPage,
+  } = usePropertyInfiniteScroll(infiniteScrollRef);
+  const {
+    loadPreviousProperties,
+    hasPreviousPage,
+    loadingProperties: loadingPreviousProperties,
+  } = useLoadPreviousProperties();
 
   useEffect(() => {
     const pageMarkers = document.querySelectorAll('[data-page-marker]');
@@ -48,7 +59,18 @@ const PropertiesDisplay = ({
 
   const addWrapper = displayType === 'list';
 
-  const items = propertiesByPage(properties).map((page, i) => (
+  const showPreviousBtn = includePreviousBtn && hasPreviousPage && !loadingPreviousProperties;
+  const showPreviousLoader = includePreviousBtn
+    && InfiniteScrollLoader
+    && hasPreviousPage
+    && loadingPreviousProperties;
+  const showScrollRef = infiniteScroll && hasNextPage;
+  const showScrollLoader = infiniteScroll
+    && InfiniteScrollLoader
+    && hasNextPage
+    && loadingNextProperties;
+
+  const items = propertiesByPage(properties, propertiesPagination).map((page, i) => (
     <ConditionalWrapper
       key={i}
       condition={addWrapper}
@@ -88,13 +110,25 @@ const PropertiesDisplay = ({
 
   return (
     <>
+      {showPreviousBtn && (
+        <button
+          type="button"
+          onClick={loadPreviousProperties}
+          className={previousBtnClasses}
+        >
+          Load Previous
+        </button>
+      )}
+      {showPreviousLoader && (
+        <InfiniteScrollLoader />
+      )}
       <div className={`hf-property-results hf-property-results__${displayType}`}>
         {items}
       </div>
-      {infiniteScroll && hasNextPage && (
+      {showScrollRef && (
         <div ref={infiniteScrollRef} />
       )}
-      {infiniteScroll && InfiniteScrollLoader && hasNextPage && loadingProperties && (
+      {showScrollLoader && (
         <InfiniteScrollLoader />
       )}
     </>

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

@@ -661,6 +661,8 @@ export default class DraggableMap {
 
           if (json.properties) {
             this.setSearchResponse(json);
+          } else {
+            store.dispatch(setProperties([]));
           }
       })
   }

package/properties/property-utils/property-utils.js

@@ -30,9 +30,9 @@ export const updatePageInURL = (currentPage) => {
   if (currentPage === 1 && !pathname.includes('page-')) return null;
 
   if (currentPage === 1) {
-    newPath = pathname.replace(/page-./, '');
+    newPath = pathname.replace(/page-\d+/, '');
   } else if (pathname.includes('page-')) {
-    newPath = pathname.replace(/page-./, `page-${currentPage}`);
+    newPath = pathname.replace(/page-\d+/, `page-${currentPage}`);
   } else {
     newPath = pathname[pathname.length - 1] === '/' ? pathname : `${pathname}/`;
     newPath = `${newPath}page-${currentPage}`;
@@ -63,13 +63,15 @@ export const handleScroll = (infinite) => {
   });
 };
 
-export const propertiesByPage = (properties) => {
+export const propertiesByPage = (properties, pagination) => {
   // sort properties per-page into 2d array
   const properties2d = [];
 
   for (let i = 0; i < properties.length; i++) {
     const property = properties[i];
-    if (!property.resultPage) property.resultPage = 1;
+    if (!property.resultPage) {
+      property.resultPage = pagination?.current_page ? pagination.current_page : 1;
+    }
 
     if (!properties2d[property.resultPage - 1]) {
       properties2d[property.resultPage - 1] = [property];