homeflowjs 1.0.75 → 1.0.77

package/hooks/use-scroll-to.hook.js

@@ -1,14 +1,13 @@
 import { useState, useEffect, useRef } from 'react';
-import { isFunction } from '../utils';
-import useIntersectionObserver from './use-intersection-observer';;
+import { isFunction, createMutationObserver } from '../utils';
+import useIntersectionObserver from './use-intersection-observer';
 
 const getTargetElementHelper = (target) => {
   // If target is chunk ID
   let targetElement;
   if (!isNaN(target)) {
-    targetElement = document.querySelector(
-      `[data-content-id="${target}"]`,
-    );
+    targetElement = document.querySelector(`[data-content-id="${target}"]`);
+    if (!targetElement) return;
   }
 
   // Check for ID or class name
@@ -16,11 +15,20 @@ const getTargetElementHelper = (target) => {
   if (!targetElement) targetElement = document.querySelector(`#${target}`);
 
   return targetElement;
-}
+};
+
+const scrollToTarget = (currentTarget = {}) => {
+  const {
+    hash,
+    targetElement,
+    scrollAmount = 0,
+    yOffset = 0,
+    additionalYOffset = 0,
+  } = currentTarget;
 
-const scrollToTarget = ({ targetElement, yOffset = 0, additionalYOffset = 0 } = {}, signal) => {
-  if(!targetElement) return;  
+  if (!targetElement) return;
 
+  // Calculate vertical offset
   let verticalOffset = 0;
   if (typeof yOffset === 'number') {
     verticalOffset = yOffset;
@@ -30,22 +38,33 @@ const scrollToTarget = ({ targetElement, yOffset = 0, additionalYOffset = 0 } =
       verticalOffset = value;
     }
   }
-  if(additionalYOffset) {
-    verticalOffset = verticalOffset + parseInt(additionalYOffset, 10);
+
+  if (additionalYOffset) {
+    verticalOffset += parseInt(additionalYOffset, 10);
   }
 
-  /**
-   * Scroll to the target element
-   * Note: when using getBoundingClientRect(), the position of the div will
-   * change whenever you scroll on the page. To get the absolute position of
-   * the element on the page, not relative to the window,we need to add the
-   * number of scrolled pixels to the element’s window location using scrollY:
-   */
-  const rect = targetElement.getBoundingClientRect();
+  // If verticalOffset is negative, add it instead of subtracting
+  const scrollTop = verticalOffset < 0 
+    ? scrollAmount + Math.abs(verticalOffset)
+    : scrollAmount - verticalOffset;
+
   window.scroll({
-    top: rect.top + window.scrollY + verticalOffset,
+    top: scrollTop,
+    behavior: 'smooth',
+  });
+
+  // Update the URL hash
+  if (hash) window.location.hash = hash;
+};
+
+/**
+ * This is used to continuously scroll to the bottom of page.
+ */
+const scrollToBottom = () => {
+  window.scroll({
+    top: document.body.scrollHeight,
+    left: 0,
     behavior: 'smooth',
-    ...(signal && { signal: signal }), // This is used to abort the scroll via a trigger in the useIntersectionObserver
   });
 };
 
@@ -55,86 +74,164 @@ const getURLParams = (hash) => {
   return { target, yOffsetFromURLParams: yOffset };
 };
 
+const getTarget = (hash) => {
+  // Try to get target from URL params
+  const { target, yOffsetFromURLParams } = getURLParams(hash);
+  if (!target) return { targetElement: null, yOffsetFromURLParams: null };
+
+  // Look for target element in DOM
+  const targetElement = getTargetElementHelper(target);
+  if (!targetElement) {
+    return { targetElement: null, yOffsetFromURLParams: null };
+  }
+
+  return { targetElement, yOffsetFromURLParams };
+};
+
+const handleScroll = ({ hash, observerRef, setCurrentTarget, ...options }) => {
+  const { targetElement, yOffsetFromURLParams } = getTarget(hash);
+
+  /**
+   * If no targetElement found, we need to navigate using the hash
+   * because the targetElement is on another page.
+   */
+  if (!targetElement) {
+    window.location.href = hash;
+    return;
+  }
+
+  const targetObj = {
+    targetElement,
+    ...(yOffsetFromURLParams ? { yOffset: parseInt(yOffsetFromURLParams, 10) } : {}),
+    hash, // Add hash to the target object so onIntersect can update the URL
+    ...options,
+  };
+
+  // Trigger scrollToTriggered callback if it exists
+  if (typeof options.scrollToTriggered === 'function') {
+    options.scrollToTriggered();
+  }
+
+  /**
+   * Check if we need to scroll up the page. If we need to
+   * scroll up, chances are the rest of the the page content
+   * is loaded so we don't need to automatically scroll down the
+   * page and the targetElementPositionTop should be accurate enough.
+   */
+  const targetElementPositionTop = targetElement.getBoundingClientRect().top;
+  if (
+    targetElementPositionTop + window.scrollY <
+    window.scrollY - window.innerHeight
+  ) {
+    targetObj.scrollAmount = targetElementPositionTop + window.scrollY;
+    scrollToTarget(targetObj);
+    setCurrentTarget(targetObj);
+    return;
+  }
+
+  // AUTO scroll down the page
+  scrollToBottom();
+  const observer = createMutationObserver((mutationsList, observer) => {
+    scrollToBottom();
+  });
+  observer.observe(document.body, { childList: true, subtree: true });
+
+  // Store observer in ref so it can be disconnected later
+  if (observerRef) {
+    observerRef.current = observer;
+  }
+
+  // Set current target so the intersectionObserver can use it
+  setCurrentTarget(targetObj);
+};
 
 /**
- * Custom hook that provides functionality to scroll to a specific target element
- * on the page, either based on URL hash parameters or click events to links with
- * href="#scroll-to?target=". It also handles layout shifts caused by lazy-loaded components
- * using an intersection observer to ensure accurate scrolling.
+ * useScrollTo
+ *
+ * A hook for handling smooth scrolling to elements on pages with lazy-loaded content.
+ * It can auto-scroll based on the URL hash on page load, or when an element with a specific
+ * href (e.g. `#/scroll-to?target=158827`) is clicked. The hook accounts for dynamic content
+ * loading that may shift the target element's position during scrolling.
  *
- * Features:
- * - Scrolls to a target element specified by a URL hash or click event.
- * - Supports additional vertical offsets (static or dynamic).
- * - Uses an AbortController to manage and stop scrolling when necessary.
- * - Resolves layout shift issues by re-calculating the target position using an intersection observer.
- * - Automatically attaches click event listeners to links with href="#scroll-to?target=", 
- *   target can either be a element id, class name or chunk id.
- * - Handles URL navigation with scroll-to hash parameters.
+ * The hook determines the initial position of the target element. If the element is above the
+ * current scroll position, it assumes the page is loaded and scrolls directly to the element.
+ * If the element is below, it auto-scrolls to the bottom of the page, then corrects the scroll
+ * position once the target is in view, ensuring the element is aligned at the top.
  *
- * @param {Object} options - Configuration options for scrolling behavior.
- * @param {number|function} [options.yOffset] - Vertical offset for scrolling. Can be a number or a function.
- * @param {number} [options.additionalYOffset] - Additional vertical offset for scrolling.
+ * Additional features:
+ * - Handles scroll offsets (static or dynamic).
+ * - Allows for a theme-specific offset (e.g., to account for navigation bar heights) via `additionalYOffset`.
+ * - Updates the URL hash after scrolling.
+ * - Supports callbacks for scroll start and completion.
+ * - Cleans up observers and event listeners automatically.
+ *
+ * @param {Object} [options] - Optional configuration object.
+ * @param {number|function} [options.yOffset] - A fixed offset (in px) or a function returning an offset, applied when scrolling to the target. Positive values scroll up from the target, negative values scroll down from the target.
+ * @param {number} [options.additionalYOffset] - An extra offset (in px) to account for theme-specific adjustments, such as navigation bar heights.
+ * @param {function} [options.scrollToTriggered] - Callback fired when a scroll-to event is triggered.
+ * @param {function} [options.scrollToComplete] - Callback fired when scrolling to the target is complete.
+ *
+ * @returns {void}
  */
-const useScrollTo = (options) => {
+const useScrollTo = (options = {}) => {
   const [currentTarget, setCurrentTarget] = useState(null);
-  const scrollAbortControllerRef = useRef(null);
-
-  const handleScrollTo = (hash) => {
-    const { target, yOffsetFromURLParams } = getURLParams(hash || window.location.hash);
-    if (!target) return;
-
-    const targetElement = getTargetElementHelper(target);
-    const targetObj = {
-      targetElement, 
-      additionalYOffset: yOffsetFromURLParams,
-      ...(hash && { hash }), // Add hash to the target object so onIntersect can update the URL
-      ...options,
-    }
+  const observerRef = useRef(null);
 
-    // Update state so that the intersection observer can pick it up
-    setCurrentTarget(targetObj);
+  useIntersectionObserver({
+    target: currentTarget?.targetElement,
+    onIntersect: () => {
+      // This will fire on first scroll
+      if (observerRef.current) {
+        // Kill observer that is handling the scrollToBottom;
+        observerRef.current.disconnect();
+        observerRef.current = null;
 
-    // AbortController to manage the scroll
-    const controller = new AbortController();
-    scrollAbortControllerRef.current = controller;
+        /**
+         * Kill current scroll
+         * (only way to do it because we can't currently
+         * attach an abortcontroller to scrollTo)
+         */
+        window.scrollTo({
+          top: window.scrollY,
+          left: 0,
+          behavior: 'auto',
+        });
 
-    // Scroll to the target element;
-    scrollToTarget({ ...targetObj }, controller.signal);
-  }
-  
-  /**
-   * How this useIntersectionObserver is being used:
-   * This fixes a bug with the scrollToTarget function 
-   * where the getBoundingClientRect() method returns
-   * a different value between scroll to's. This is caused
-   * because of layout shift with lazy loaded components
-   * while scrolling.
-   * 
-   * How it works:
-   * When the scrollToTarget is fired, the useIntersectionObserver 
-   * will check if the target element is in the viewport. If it is
-   * it stops the window.scroll method in the scrollToTarget function
-   * stopping the scroll. This is done by using the AbortController.
-   * Then it scrollToTarget again, this in turn gets the most up to date
-   * getBoundingClientRect() value and scrolls to the target element.
-   * 
-   */
-  useIntersectionObserver({ 
-    target: currentTarget?.targetElement, 
-    onIntersect: () => {
-      if (scrollAbortControllerRef.current) {
-        scrollAbortControllerRef.current.abort(); // Stop the scroll
-        scrollAbortControllerRef.current = null; // Reset the controller
-        scrollToTarget({ ...currentTarget }); // Fire the scrollToTarget function again
-        if (currentTarget?.hash) window.location.hash = currentTarget.hash; // Update the URL hash
+        // Get targets current position because it might have changed
+        const targetElementPositionTop =
+          currentTarget.targetElement.getBoundingClientRect().top;
+
+        /**
+         * The scrollAmount is the current scroll position, which
+         * will be near bottom of the page. Plus the current scroll
+         * position, which is at the top of the page.
+         */
+        const scrollAmount = targetElementPositionTop + window.scrollY;
+
+        // Update current target state (will need this to trigger the scroll correction)
+        setCurrentTarget({
+          ...currentTarget,
+          scrollAmount,
+        });
       }
-    }
+
+      // This will fire after the  scroll correction
+      if (currentTarget?.scrollCorrectionFired) {
+
+        // Trigger scrollToComplete callback if it exists
+        if (typeof currentTarget.scrollToComplete === 'function') {
+          currentTarget.scrollToComplete();
+        }
+
+        // Remove current target
+        setCurrentTarget(null);
+      }
+    },
   });
 
-  
-  // Handle onclick scroll to events
+  // Handles onclick scroll to events
   useEffect(() => {
-    const clickEventController = new AbortController()
+    const clickEventController = new AbortController();
     const scrollToEls = document.querySelectorAll(
       '[href*="#scroll-to"], [href*="#/scroll-to"]'
     );
@@ -143,29 +240,80 @@ const useScrollTo = (options) => {
       el.addEventListener(
         'click',
         (e) => {
-
-          /**
-           * Prevent default behavior, hash change is handled onIntersect,
-           * otherwise it will cause the scroll to be instant
-           */
           e.preventDefault();
-          handleScrollTo(e.currentTarget.getAttribute('href'));
+          const hash = e.currentTarget.getAttribute('href');
+          if (hash) {
+            handleScroll({
+              hash: hash,
+              observerRef,
+              setCurrentTarget,
+              ...options,
+            });
+          }
         },
         { signal: clickEventController.signal }
       );
     });
 
-    //On click element event listeners cleanup
     return () => {
-      clickEventController.abort()
-    }
+      clickEventController.abort();
+    };
   }, []);
 
-  // Handle when a user navigates to a URL with a scroll to hash
+  // Handles when a user navigates to a URL with a scroll to hash
   useEffect(() => {
-    handleScrollTo();
-  }, [])
+    const timeout = setTimeout(() => {
+      // Start scrolling
+      handleScroll({
+        hash: window.location.hash,
+        observerRef,
+        setCurrentTarget,
+        ...options,
+      });
+    }, 1000);
+
+    /**
+     * Clears observer after 5 seconds if whatever reason
+     * observerRef.current.disconnect() is never fired. Otherwise
+     * scrollToBottom will constantly fire if the scroll gets
+     * to the bottom of the page.
+     */
+    if (observerRef && observerRef.current) {
+      // Clear any previous timeout
+      if (observerRef.disconnectTimeout) {
+        clearTimeout(observerRef.disconnectTimeout);
+      }
+      observerRef.disconnectTimeout = setTimeout(() => {
+        if (observerRef.current) {
+          observerRef.current.disconnect();
+          observerRef.current = null;
+        }
+      }, 5000);
+    }
+
+    return () => {
+      clearTimeout(timeout);
+      // Disconnect observer on cleanup
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+      }
+      if (observerRef.disconnectTimeout) {
+        clearTimeout(observerRef.disconnectTimeout);
+        observerRef.disconnectTimeout = null;
+      }
+    };
+  }, []);
 
+  // Handles scroll correction
+  useEffect(() => {
+    if (currentTarget?.scrollAmount && !currentTarget?.scrollCorrectionFired) {
+      scrollToTarget(currentTarget);
+      setCurrentTarget({
+        ...currentTarget,
+        scrollCorrectionFired: true,
+      });
+    }
+  }, [currentTarget]);
 };
 
 export default useScrollTo;

package/package.json

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

package/search/save-search-button/save-search-button.component.jsx

@@ -18,6 +18,7 @@ const SaveSearchButton = (props) => {
     removeSavedSearchAsync,
     style,
     notificationMessage,
+    renderAsButton,
     showNotification,
   } = props;
 
@@ -42,6 +43,19 @@ const SaveSearchButton = (props) => {
     }
   };
 
+  if (renderAsButton) return (
+    <button
+      role="button"
+      onClick={toggleSearch}
+      className={`${className} ${savedSearch ? 'saved' : ''}`}
+      {...(style && {
+        style,
+      })}
+    >
+      {savedSearch ? SavedComponent : UnsavedComponent}
+    </button>
+  )
+
   return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/anchor-is-valid
     <a
@@ -56,6 +70,7 @@ const SaveSearchButton = (props) => {
 
 SaveSearchButton.propTypes = {
   search: PropTypes.object.isRequired,
+  renderAsButton: PropTypes.bool,
   className: PropTypes.string,
   savedSearches: PropTypes.array,
   UnsavedComponent: PropTypes.element.isRequired,
@@ -79,6 +94,7 @@ SaveSearchButton.defaultProps = {
   className: '',
   style: {},
   showNotification: false,
+  renderAsButton: false,
 };
 
 const mapStateToProps = (state) => ({

package/utils/index.js

@@ -157,3 +157,20 @@ export function JSON_to_URLEncoded(element,key,list){
 export function isFunction(functionToCheck) {
   return functionToCheck && Object.prototype.toString.call(functionToCheck) === '[object Function]';
 }
+
+/**
+ * Creates a MutationObserver that invokes the provided callback function
+ * whenever mutations are observed. The callback receives the list of mutations
+ * and the observer instance as arguments.
+ *
+ * @param {Function} callback - Function to be called when mutations are observed.
+ *   Receives (mutationsList: MutationRecord[], observer: MutationObserver).
+ * @returns {MutationObserver} The created MutationObserver instance.
+ */
+export function createMutationObserver(callback) {
+  return new MutationObserver((mutationsList, observer) => {
+    if (typeof callback === 'function') {
+      callback(mutationsList, observer);
+    }
+  });
+};