homeflowjs 1.0.54 → 1.0.56

package/package.json

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

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

@@ -5,52 +5,126 @@ import PropTypes from 'prop-types';
 import { loadNext } from '../../actions/properties.actions';
 import DefaultLoader from '../../shared/loader.component';
 import { addSearchToLocalStorage } from '../../app/user-history';
+import { Link } from 'react-router-dom';
 
 const LoadMoreButton = (props) => {
   const dispatch = useDispatch();
   const currentSearch = useSelector((state) => state.search?.currentSearch);
   const pagination = useSelector((state) => state.properties?.pagination);
 
+  if (!pagination.has_next_page) return null;
+
   const {
+    isRouterLink,
     children,
     Loader,
+    isHidden,
     ...otherProps
   } = props;
 
   const [loading, setLoading] = useState(false);
+  const [targetURL, setTargetURL] = useState(window.location.href);
 
-  if (!pagination.has_next_page) return null;
+  // Updating the url for the link to follow the next page,
+  // replacing the page with current page with the next page value
+  // to avoid duplicated pages in url pattern such as page-2/page-3.
+  const updatePageLink = (url) => {
+    if (url.includes('page-')) {
+      return url.replace(/page-\d+/, `page-${pagination.current_page + 1}`);
+    } else {
+      // Fix for the page-2 when the url does not have a value for page-1
+      return url + (url.endsWith('/') ? '' : '/') + `page-${pagination.current_page + 1}`;
+    }
+  }
+
+  const handleClick = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    e.currentTarget.blur();
+    setLoading(true);
+    dispatch(loadNext())
+      .then(() => {
+        setLoading(false);
+        const pageNumber = currentSearch?.page ? currentSearch?.page + 1 : 2;
+        const searchToLocal = { ...currentSearch, page: pageNumber };
+        addSearchToLocalStorage(searchToLocal);
+      })
+      .then(() => {
+        // Add set timeout, waiting target url to set location.href.
+        // By doing that we avoid links have wrong page numbers
+        // e.g. when you are on page-2, the url updates first and then change it for following page
+        setTimeout(() => {
+          setTargetURL(window.location.href);
+        }, 200);
+      })
+    return false;
+  }
+
+  {/* Load More Button component uses Link from react-router-dom to avoid navigating pages for themes using the component inside a react router wrapper. */}
+  const RouterLinkComponent = () => {
+    return (
+      <Link 
+        onClick={(e) => handleClick(e)}
+        to={{ pathname: `page-${pagination.current_page + 1}` }}
+        {...otherProps}
+      >
+        {children}
+      </Link>
+    )
+  }
+
+  const LinkComponent = () => {
+    return (
+      <a
+        onClick={(e) => handleClick(e)}
+        href={updatePageLink(targetURL)}
+        {...otherProps}
+      >
+        {children}
+      </a>
+    )
+  };
+
+  {/* Hidden link for themes using InfiniteScroll: allows Googlebot to discover the Next page link for indexing, while users trigger infinite scroll without actual navigation. */}
+  const HiddenLinkComponent = () => {
+    return (
+      <a
+        style={{ display: 'none' }}
+        href={updatePageLink(targetURL)}
+      >
+        Next
+      </a>
+    );
+  };
+
+  const renderComponent = () => {
+    if (loading) return <Loader height="24px" />;
+
+    if (isHidden) {
+      return <HiddenLinkComponent />;
+    }
+    
+    if (isRouterLink) {
+      return <RouterLinkComponent />;
+    }
+    
+    return <LinkComponent />;
+  };
 
-  if (loading) return <Loader height="24px" />;
-
-  return (
-    <button
-      type="button"
-      onClick={(e) => {
-        e.currentTarget.blur();
-        setLoading(true);
-        dispatch(loadNext())
-          .then(() => {
-            setLoading(false);
-            const pageNumber = currentSearch?.page ? currentSearch?.page + 1 : 2;
-            const searchToLocal = {...currentSearch, page: pageNumber };
-            addSearchToLocalStorage(searchToLocal);
-          });
-      }}
-      {...otherProps}
-    >
-      {children}
-    </button>
-  );
+  return renderComponent();
 };
 
 LoadMoreButton.propTypes = {
   children: PropTypes.node.isRequired,
   Loader: PropTypes.elementType,
+  isHidden: PropTypes.bool,
+  isRouterLink: PropTypes.bool,
 };
 
 LoadMoreButton.defaultProps = {
   Loader: DefaultLoader,
+  isHidden: false,
+  isRouterLink: false,
 };
 
 export default LoadMoreButton;

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

@@ -22,6 +22,15 @@ const PropertiesDisplay = ({
   ...other
 }) => {
   if (!properties?.length) {
+    if (inserts.length > 0) {
+      return (
+        <>
+          {noResultsMessage}
+          {inserts[0]?.component}
+        </>
+      );
+    }
+
     return noResultsMessage;
   }
 
@@ -73,25 +82,22 @@ const PropertiesDisplay = ({
     && loadingNextProperties;
 
   const insertsAvailable = Array.isArray(inserts) && inserts.length > 0;
-  const insertsFrequency =
-    insertsAvailable && inserts[0]?.frequency > 0 ? inserts[0].frequency : null;
-  
+  const insertsFrequency = insertsAvailable && inserts[0]?.frequency > 0
+    ? inserts[0].frequency
+    : null;
+
   const { propertiesInsertsMap, insertablePropertiesIDList } = useMemo(() => {
     const propertiesLength = properties.length;
-    const validInserts = insertsAvailable
-      ? inserts.filter(({ index }) => index >= 0 && index < propertiesLength)
-      : null;
-    if (validInserts) {
-      const propertiesInsertsMap = new Map();
-      for (const insert of validInserts) {
-        const property = properties[insert.index];
-        propertiesInsertsMap.set(property.property_id, insert);
-      };
-      const insertablePropertiesIDList = Array.from(propertiesInsertsMap.keys());
-
-      return { propertiesInsertsMap, insertablePropertiesIDList };
-    }
-    return {};
+    const propertiesInsertsMap = new Map();
+
+    inserts.forEach((insert) => {
+      const property = properties[insert.index - 1] || properties[propertiesLength - 1];
+      propertiesInsertsMap.set(property.property_id, insert);
+    });
+
+    const insertablePropertiesIDList = Array.from(propertiesInsertsMap.keys());
+
+    return { propertiesInsertsMap, insertablePropertiesIDList };
   }, [properties]);
 
   const handleListElementClick = (id = null) => {
@@ -140,8 +146,8 @@ const PropertiesDisplay = ({
           if (findResult) {
             return (
               <React.Fragment key={property.property_id}>
-                {findResult.component}
                 <Item property={property} onClick={() => visitPropertyUpdate(property.property_id)} {...other} />
+                {findResult.component}
               </React.Fragment>
             );
           }
@@ -199,7 +205,7 @@ PropertiesDisplay.propTypes = {
 };
 
 PropertiesDisplay.defaultProps = {
-  inserts: null,
+  inserts: [],
   InfiniteScrollLoader: null,
   includePreviousBtn: false,
   noResultsMessage: <p>There were no properties matching your search.</p>,

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

@@ -120,7 +120,7 @@ PropertyResults.defaultProps = {
   infiniteScroll: false,
   infiniteScrollLoader: null,
   noMap: false,
-  inserts: null,
+  inserts: [],
 };
 
 export default PropertyResults;