Address comments

Author: mocca102

src/hooks/useCioAutocomplete.ts

@@ -1,7 +1,13 @@
 import { useMemo, useState } from 'react';
 import useCioClient from './useCioClient';
 import useDownShift from './useDownShift';
-import { CioAutocompleteProps, CioClientConfig, Section, UserDefinedSection } from '../types';
+import {
+  CioAutocompleteProps,
+  CioClientConfig,
+  Section,
+  UserDefinedSection,
+  HTMLPropsWithCioDataAttributes,
+} from '../types';
 import usePrevious from './usePrevious';
 import {
   getItemPosition,
@@ -165,23 +171,17 @@ const useCioAutocomplete = (options: UseCioAutocompleteOptions) => {
     }),
     getSectionProps: (section: Section) => {
       const sectionName = section?.displayName || section?.identifier;
-      let attributes: React.DetailedHTMLProps<React.HTMLAttributes<any>, any> = {
+      const attributes: HTMLPropsWithCioDataAttributes = {
         className: `${sectionName} cio-section`,
         ref: section.ref,
         role: 'none',
-      };
-
-      const cnstrcDataAttributes = {
-        'data-cnstrc-recommendations': true,
         'data-cnstrc-section': section.data[0]?.section,
-        'data-cnstrc-recommendations-pod-id': section.identifier,
       };
 
+      // Add data attributes for recommendations
       if (section.type === 'recommendations') {
-        attributes = {
-          ...attributes,
-          ...cnstrcDataAttributes,
-        };
+        attributes['data-cnstrc-recommendations'] = true;
+        attributes['data-cnstrc-recommendations-pod-id'] = section.identifier;
       }
       return attributes;
     },

src/hooks/useDownShift.ts

@@ -46,8 +46,10 @@ const useDownShift: UseDownShift = ({ setQuery, items, onSubmit, cioClient, prev
                 section: selectedItem.section,
                 resultId: selectedItem.result_id,
               });
-              // Other Select tracking
-            } else {
+              // Select tracking for all other Constructor sections:
+              // (ie: Search Suggestions, Products, Custom Cio sections, etc)
+              // This does not apply to custom user defined sections that aren't part of Constructor index
+            } else if (selectedItem.result_id) {
               cioClient?.tracker.trackAutocompleteSelect(selectedItem.value, {
                 originalQuery: previousQuery,
                 section: selectedItem.section,

src/hooks/useRecommendationsObserver.ts

@@ -3,11 +3,23 @@ import { Nullable } from '@constructor-io/constructorio-client-javascript/lib/ty
 import ConstructorIO from '@constructor-io/constructorio-client-javascript';
 import { Section } from '../types';
 
+/**
+ * Custom hook that observes the visibility of recommendation sections and calls trackRecommendationView event.
+ * This is done by using the IntersectionObserver API to observe the visibility of each recommendation section.
+ * That is done by passing the ref of each recommendation section to the IntersectionObserver.
+ * The refs are either passed by the user in section config or generated by the library by default.
+ * Either way the refs are stored in the sections array.
+ *
+ * @param menuIsOpen - A boolean indicating whether the menu is open.
+ * @param sections - An array of sections to observe.
+ * @param constructorIO - An instance of the ConstructorIO client.
+ * @param trackRecommendationView - A callback function to track the recommendation view event.
+ */
 function useRecommendationsObserver(
   menuIsOpen: boolean,
   sections: Section[],
   constructorIO: Nullable<ConstructorIO>,
-  callback: (
+  trackRecommendationView: (
     target: HTMLElement,
     sections: Section[],
     constructorIO: Nullable<ConstructorIO>
@@ -19,21 +31,20 @@ function useRecommendationsObserver(
     .map((section) => section.ref);
 
   useEffect(() => {
-    const observer = new IntersectionObserver(
-      (entries) => {
-        // For each section, check if it's intersecting
-        entries.forEach((entry) => {
-          if (entry.isIntersecting) {
-            // Call the callback, which will be trackRecommendationView in our case
-            callback(entry.target as HTMLElement, sections, constructorIO);
-          }
-        });
-      },
-      {
-        root: null,
-        threshold: 0.1,
-      }
-    );
+    const intersectionObserverOptions = {
+      // Root element is the bounding target for the observer to observe. If null, then the document viewport is used.
+      root: null,
+      // 0.1 indicate the callback should be called when that proportion of the target is visible (e.g., 10% visible).
+      threshold: 0.1,
+    };
+    const observer = new IntersectionObserver((entries) => {
+      // For each section, check if it's intersecting
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          trackRecommendationView(entry.target as HTMLElement, sections, constructorIO);
+        }
+      });
+    }, intersectionObserverOptions);
 
     // Observe each section
     refs.forEach((ref) => {

src/hooks/useSections.ts

@@ -17,15 +17,7 @@ export default function useSections(
   const zeroStateActiveSections = !query.length && zeroStateSections;
 
   // Define All Sections
-  const [activeSections, setActiveSections] = useState<UserDefinedSection[]>(
-    zeroStateActiveSections ? zeroStateSections : sections
-  );
-
-  useEffect(() => {
-    setActiveSections(zeroStateActiveSections ? zeroStateSections : sections);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [zeroStateActiveSections]);
-
+  const activeSections = zeroStateActiveSections ? zeroStateSections : sections;
   const sectionsRefs = useRef<RefObject<HTMLLIElement>[]>(activeSections.map(() => createRef()));
   const [activeSectionsWithData, setActiveSectionsWithData] = useState<Section[]>([]);
   const autocompleteSections = useMemo(
@@ -62,16 +54,6 @@ export default function useSections(
     );
   }, [autocompleteResults, recommendationsResults, activeSections]);
 
-  // Reset sections
-  useEffect(() => {
-    if (
-      (sections && !Array.isArray(sections)) ||
-      (zeroStateSections && !Array.isArray(zeroStateSections))
-    ) {
-      setActiveSections([]);
-    }
-  }, [sections, zeroStateSections]);
-
   return {
     activeSections,
     activeSectionsWithData,

src/types.ts

@@ -117,3 +117,10 @@ export type InGroupSuggestion = SearchSuggestion & {
   groupId: string;
   groupName: string;
 };
+
+export type HTMLPropsWithCioDataAttributes<T = any> = React.DetailedHTMLProps<
+  React.HTMLAttributes<T>,
+  T
+> & {
+  [key: `data-cnstrc-${string}`]: any;
+};

src/utils.ts

@@ -170,10 +170,10 @@ export const getActiveSectionsWithData = (
         data: sectionData,
       };
 
-      if (sectionConfig.type === 'recommendations') {
-        // If user provided a ref in config, use it. Otherwise, use the ref from our refs array
-        section.ref = sectionConfig.ref || sectionsRefs.current[index];
-      }
+      // If user provided a ref in `sectionConfig`, use it. Otherwise, use the ref from our library generated refs array
+      const userDefinedSectionRef = sectionConfig.ref;
+      const libraryGeneratedSectionRef = sectionsRefs.current[index];
+      section.ref = userDefinedSectionRef || libraryGeneratedSectionRef;
 
       activeSectionsWithData.push(section);
     }