homeflowjs 1.0.54 → 1.0.55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "homeflowjs",
-  "version": "1.0.54",
+  "version": "1.0.55",
   "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;