homeflowjs 0.10.25 → 0.11.0

package/.eslintrc.js

@@ -15,6 +15,7 @@ module.exports = {
     btoa: 'readonly',
     localStorage: 'readonly',
     google: 'readonly',
+    IntersectionObserver: 'readonly',
   },
   parser: 'babel-eslint',
   parserOptions: {

package/__tests__/property-results.test.jsx

@@ -9,6 +9,17 @@ import { Router } from 'react-router-dom';
 import PropertyResults from 'properties/property-results/property-results.component';
 import { properties } from './__mocks__/property-results.mock';
 
+beforeEach(() => {
+  // IntersectionObserver isn't available in test environment
+  const mockIntersectionObserver = jest.fn();
+  mockIntersectionObserver.mockReturnValue({
+    observe: () => null,
+    unobserve: () => null,
+    disconnect: () => null,
+  });
+  window.IntersectionObserver = mockIntersectionObserver;
+});
+
 describe('Property Results', () => {
   const initialState = {
     properties: {

package/articles/load-more-button.component.jsx

@@ -10,7 +10,7 @@ const LoadMoreButton = ({
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(false);
   const hasNextPage = useSelector((state) => state.articles?.pagination?.has_next_page);
-  const storeArticles = useSelector((state) => state.articles.articles) || [];
+  const storeArticles = useSelector((state) => state.articles.articles || []);
   const dispatch = useDispatch();
   const loadNextArticlesPage = () => dispatch(loadNextPage());
 

package/hooks/index.js

@@ -1,9 +1,11 @@
 import useDefaultSort from './use-default-sort.hook';
 import useGeolocate from './use-geolocate';
 import useOutsideClick from './use-outside-click';
+import { useOnScreen } from './use-on-screen';
 
 export {
   useDefaultSort,
   useGeolocate,
   useOutsideClick,
+  useOnScreen,
 };

package/hooks/use-on-screen.js

@@ -0,0 +1,22 @@
+import { useEffect, useState, useRef } from 'react';
+
+export function useOnScreen(ref) {
+  const [isOnScreen, setIsOnScreen] = useState(false);
+  const observerRef = useRef(null);
+
+  useEffect(() => {
+    observerRef.current = new IntersectionObserver(([entry]) => {
+      setIsOnScreen(entry.isIntersecting);
+    });
+  }, []);
+
+  useEffect(() => {
+    observerRef.current.observe(ref.current);
+
+    return () => {
+      observerRef.current.disconnect();
+    };
+  }, [ref]);
+
+  return isOnScreen;
+}

package/package.json

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

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

@@ -2,8 +2,7 @@ import React, { useEffect } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 
-import { handleScroll, propertiesByPage } from '../property-utils/property-utils';
-import { uniqueKey } from '../../utils';
+import { handleScroll, propertiesByPage, updatePageInURL } from '../property-utils/property-utils';
 
 const ConditionalWrapper = ({ condition, wrapper, children }) => (
   condition ? wrapper(children) : children
@@ -27,7 +26,27 @@ const PropertiesDisplay = ({
     return function cleanUp() {
       window.removeEventListener('scroll', onScroll);
     };
-  });
+  }, []);
+
+  useEffect(() => {
+    const pageMarkers = document.querySelectorAll('[data-page-marker]');
+
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting && entry.target?.dataset?.pageMarker) {
+          updatePageInURL(parseInt(entry.target.dataset.pageMarker, 10));
+        }
+      });
+    });
+
+    pageMarkers.forEach((marker) => {
+      observer.observe(marker);
+    });
+
+    return function cleanUp() {
+      observer.disconnect();
+    };
+  }, [properties]);
 
   if (!properties.length) {
     return (
@@ -44,8 +63,7 @@ const PropertiesDisplay = ({
       wrapper={(children) => (
         <div
           data-result-page={page[0].resultPage}
-          key={uniqueKey()}
-          className={`clearfix results-page--${displayType}`}
+          className={`results-page results-page--${displayType}`}
         >
           {children}
         </div>
@@ -65,7 +83,12 @@ const PropertiesDisplay = ({
           );
         }
         return (
-          <Item key={property.property_id} property={property} {...other} />
+          <Item
+            key={property.property_id}
+            property={property}
+            data-page-marker={!addWrapper && index === 0 ? page[0].resultPage : null}
+            {...other}
+          />
         );
       })}
     </ConditionalWrapper>

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

@@ -22,10 +22,29 @@ const infiniteScroll = () => {
   return true;
 };
 
+export const updatePageInURL = (currentPage) => {
+  const { pathname, hash } = window.location;
+
+  let newPath;
+
+  if (currentPage === 1 && !pathname.includes('page-')) return null;
+
+  if (currentPage === 1) {
+    newPath = pathname.replace(/page-./, '');
+  } else if (pathname.includes('page-')) {
+    newPath = pathname.replace(/page-./, `page-${currentPage}`);
+  } else {
+    newPath = pathname[pathname.length - 1] === '/' ? pathname : `${pathname}/`;
+    newPath = `${newPath}page-${currentPage}`;
+  }
+
+  return history.replaceState(null, '', `${newPath}${hash}`);
+};
+
 // calculates which page we've scrolled to and updates the URL
 export const handleScroll = (infinite) => {
-  // TODO: Only do this if the theme has infinite scroll enabled
   if (infinite) infiniteScroll();
+
   // get the current top of view scroll position
   const currentPosition = document.documentElement.scrollTop;
   document.querySelectorAll('[data-result-page]').forEach((resultPage) => {
@@ -38,22 +57,8 @@ export const handleScroll = (infinite) => {
     // if top of current view is between the top and bottom of the page div, we're on that page
     if (pageTop <= currentPosition && pageTop + (rect.bottom - rect.top) > currentPosition) {
       const currentPage = parseInt(resultPage.dataset.resultPage, 10);
-      const { pathname, hash } = window.location;
-
-      let newPath;
 
-      if (currentPage === 1 && !pathname.includes('page-')) return null;
-
-      if (currentPage === 1) {
-        newPath = pathname.replace(/page-./, '');
-      } else if (pathname.includes('page-')) {
-        newPath = pathname.replace(/page-./, `page-${currentPage}`);
-      } else {
-        newPath = pathname[pathname.length - 1] === '/' ? pathname : `${pathname}/`;
-        newPath = `${newPath}page-${currentPage}`;
-      }
-
-      history.replaceState(null, '', `${newPath}${hash}`);
+      updatePageInURL(currentPage);
     }
   });
 };
@@ -75,4 +80,4 @@ export const propertiesByPage = (properties) => {
   }
 
   return properties2d;
-}
+};