homeflowjs 0.10.24 → 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/branches/branches-map/branches-map.component.jsx

@@ -13,9 +13,20 @@ import ReactLeafletGoogleLayer from 'react-leaflet-google-layer';
 import 'leaflet/dist/leaflet.css';
 
 const BranchesMap = ({
-  CustomPopup, google, gmapsKey, iconConfig, fallbackLatLng, scrollWheelZoom
+  CustomPopup,
+  google,
+  gmapsKey,
+  iconConfig,
+  fallbackLatLng,
+  scrollWheelZoom,
+  markerClickHandler,
+  displayPopup,
+  selectedBranch, 
+  branches: branchesProp,
 }) => {
-  let branches = Homeflow.get('branches');
+  let branches = !!branchesProp.length
+    ? branchesProp
+    : Homeflow.get('branches');
   let showMarkers = true;
 
   // If no branches found use fallback lat, long and set showMarkers to false
@@ -30,17 +41,20 @@ const BranchesMap = ({
     shadowUrl: '/assets/marker-shadow.png',
   };
 
-  let icon = L.icon(iconConfig || defaultIconConfig);
+  
 
   const bounds = latLngBounds([branches[0].lat, branches[0].lng]);
 
   const markers = branches.map((branch) => {
     bounds.extend([branch.lat, branch.lng]);
+    let icon = L.icon(iconConfig || defaultIconConfig);
     // check if branch object have mapIcon payload, example:
     // mapIcon: {
     //   iconUrl: 'specific-path.png' || 'data:image/svg+xml;utf8,<svg></svg>',
     //   iconSize: [149, 66],
     // }
+    if (branch.branchID === selectedBranch.branchID && 'mapIcon' in selectedBranch) icon = L.icon(selectedBranch.mapIcon);
+
     if ('mapIcon' in branch) icon = L.icon(branch.mapIcon);
     // check if branch object have mapDivIcon payload, example:
     // mapDivIcon: {
@@ -49,35 +63,55 @@ const BranchesMap = ({
     // }
     if ('mapDivIcon' in branch) icon = L.divIcon(branch.mapDivIcon);
 
+    if (displayPopup) {
+      return (
+        <Marker
+          position={[branch.lat, branch.lng]}
+          icon={icon}
+          key={branch?.branch_id || branch?.branchID}
+          eventHandlers={{
+            click: () => markerClickHandler(branch),
+          }}
+        >
+          {CustomPopup ? (
+            <Popup>
+              <CustomPopup branch={branch} />
+            </Popup>
+          ) : (
+            <Popup>
+              <div className="hfjs-branch-marker-popup">
+                <h2>{branch.name}</h2>
+                <p>{branch.address}</p>
+
+                {branch.sales_enabled && (
+                  <a href={`${branch.branch_url}/sales`}>
+                    View all properties for sale &gt;
+                  </a>
+                )}
+
+                <br />
+
+                {branch.lettings_enabled && (
+                  <a href={`${branch.branch_url}/lettings`}>
+                    View all properties to let &gt;
+                  </a>
+                )}
+              </div>
+            </Popup>
+          )}
+        </Marker>
+      );
+    }
+
     return (
       <Marker
         position={[branch.lat, branch.lng]}
         icon={icon}
-        key={branch.branch_id}
-      >
-        {CustomPopup ? (
-          <Popup>
-            <CustomPopup branch={branch} />
-          </Popup>
-        ) : (
-          <Popup>
-            <div className="hfjs-branch-marker-popup">
-              <h2>{branch.name}</h2>
-              <p>{branch.address}</p>
-
-              {branch.sales_enabled && (
-                <a href={`${branch.branch_url}/sales`}>View all properties for sale &gt;</a>
-              )}
-
-              <br />
-
-              {branch.lettings_enabled && (
-                <a href={`${branch.branch_url}/lettings`}>View all properties to let &gt;</a>
-              )}
-            </div>
-          </Popup>
-        )}
-      </Marker>
+        key={branch?.branch_id || branch?.branchID}
+        eventHandlers={{
+          click: () => markerClickHandler(branch),
+        }}
+      />
     );
   });
 
@@ -112,6 +146,10 @@ BranchesMap.propTypes = {
   iconConfig: PropTypes.object,
   fallbackLatLng: PropTypes.object,
   scrollWheelZoom: PropTypes.bool,
+  markerClickHandler: PropTypes.func,
+  displayPopup : PropTypes.bool,
+  selectedBranch: PropTypes.object,
+  branches: PropTypes.arrayOf(PropTypes.object)
 };
 
 BranchesMap.defaultProps = {
@@ -121,6 +159,10 @@ BranchesMap.defaultProps = {
   iconConfig: null,
   fallbackLatLng: { lat: 51.509865, lng: -0.118092 },
   scrollWheelZoom: false,
+  markerClickHandler: () => {},
+  displayPopup: true,
+  selectedBranch: {},
+  branches: []
 };
 
 const mapStateToProps = (state) => ({

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.24",
+  "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;
-}
+};