feat(insights): implement sendEvent in all the connectors (3/4)

src/components/InfiniteHits/InfiniteHits.tsx

@@ -6,6 +6,7 @@ import Template from '../Template/Template';
 import { SearchResults } from 'algoliasearch-helper';
 import { Hits } from '../../types';
 import { InfiniteHitsTemplates } from '../../widgets/infinite-hits/infinite-hits';
+import { SendEventForHits, BindEventForHits } from '../../lib/utils';
 
 type InfiniteHitsCSSClasses = {
   root: string;
@@ -31,11 +32,14 @@ type InfiniteHitsProps = {
   };
   isFirstPage: boolean;
   isLastPage: boolean;
+  sendEvent: SendEventForHits;
+  bindEvent: BindEventForHits;
 };
 
 const InfiniteHits = ({
   results,
   hits,
+  bindEvent,
   hasShowPrevious,
   showPrevious,
   showMore,
@@ -86,6 +90,7 @@ const InfiniteHits = ({
               ...hit,
               __hitIndex: position,
             }}
+            bindEvent={bindEvent}
           />
         ))}
       </ol>

src/components/InfiniteHits/__tests__/InfiniteHits-test.tsx

@@ -18,6 +18,9 @@ describe('InfiniteHits', () => {
     disabledLoadMore: 'disabledLoadMore',
   };
 
+  const sendEvent = () => {};
+  const bindEvent = () => '';
+
   describe('markup', () => {
     it('should render <InfiniteHits /> on first page', () => {
       const hits: Hits = [
@@ -50,6 +53,8 @@ describe('InfiniteHits', () => {
           },
         },
         cssClasses,
+        sendEvent,
+        bindEvent,
       };
 
       const { container } = render(<InfiniteHits {...props} />);
@@ -88,6 +93,8 @@ describe('InfiniteHits', () => {
           },
         },
         cssClasses,
+        sendEvent,
+        bindEvent,
       };
 
       const { container } = render(<InfiniteHits {...props} />);
@@ -115,6 +122,8 @@ describe('InfiniteHits', () => {
           },
         },
         cssClasses,
+        sendEvent,
+        bindEvent,
       };
 
       const { container } = render(<InfiniteHits {...props} />);
@@ -142,6 +151,8 @@ describe('InfiniteHits', () => {
           },
         },
         cssClasses,
+        sendEvent,
+        bindEvent,
       };
 
       const { container } = render(<InfiniteHits {...props} />);
@@ -180,6 +191,8 @@ describe('InfiniteHits', () => {
           },
         },
         cssClasses,
+        sendEvent,
+        bindEvent,
       };
 
       const { container } = render(<InfiniteHits {...props} />);
@@ -223,6 +236,8 @@ describe('InfiniteHits', () => {
           },
         },
         cssClasses,
+        sendEvent,
+        bindEvent,
       };
 
       const { container } = render(<InfiniteHits {...props} />);

src/connectors/autocomplete/connectAutocomplete.ts

@@ -3,6 +3,8 @@ import escapeHits, { TAG_PLACEHOLDER } from '../../lib/escape-highlight';
 import {
   checkRendering,
   createDocumentationMessageGenerator,
+  createSendEventForHits,
+  SendEventForHits,
   noop,
   warning,
 } from '../../lib/utils';
@@ -46,6 +48,11 @@ export type AutocompleteRendererOptions = {
      * The full results object from the Algolia API.
      */
     results: SearchResults;
+
+    /**
+     * Send event to insights middleware
+     */
+    sendEvent: SendEventForHits;
   }>;
 
   /**
@@ -127,11 +134,20 @@ search.addWidgets([
             ? escapeHits(scopedResult.results.hits)
             : scopedResult.results.hits;
 
+          const sendEvent = createSendEventForHits({
+            instantSearchInstance,
+            index: scopedResult.results.index,
+            widgetType: 'ais.autocomplete',
+          });
+
+          sendEvent('view', scopedResult.results.hits);
+
           return {
             indexId: scopedResult.indexId,
             indexName: scopedResult.results.index,
             hits: scopedResult.results.hits,
             results: scopedResult.results,
+            sendEvent,
           };
         });
 

src/connectors/breadcrumb/connectBreadcrumb.ts

@@ -2,6 +2,8 @@ import {
   checkRendering,
   warning,
   createDocumentationMessageGenerator,
+  createSendEventForFacet,
+  SendEventForFacet,
   isEqual,
   noop,
 } from '../../lib/utils';
@@ -69,6 +71,11 @@ export type BreadcrumbRendererOptions = {
    * True if refinement can be applied.
    */
   canRefine: boolean;
+
+  /**
+   * Send event to insights middleware
+   */
+  sendEvent: SendEventForFacet;
 };
 
 export type BreadcrumbConnector = Connector<
@@ -104,11 +111,19 @@ const connectBreadcrumb: BreadcrumbConnector = function connectBreadcrumb(
     }
 
     const [hierarchicalFacetName] = attributes;
+    let sendEvent;
 
     return {
       $$type: 'ais.breadcrumb',
 
       init({ createURL, helper, instantSearchInstance }) {
+        sendEvent = createSendEventForFacet({
+          instantSearchInstance,
+          helper,
+          attribute: hierarchicalFacetName,
+          widgetType: 'ais.breadcrumb',
+        });
+
         connectorState.createURL = facetValue => {
           if (!facetValue) {
             const breadcrumb = helper.getHierarchicalFacetBreadcrumb(
@@ -137,11 +152,13 @@ const connectBreadcrumb: BreadcrumbConnector = function connectBreadcrumb(
               hierarchicalFacetName
             );
             if (breadcrumb.length > 0) {
+              sendEvent('click', breadcrumb[0]);
               helper
                 .toggleRefinement(hierarchicalFacetName, breadcrumb[0])
                 .search();
             }
           } else {
+            sendEvent('click', facetValue);
             helper.toggleRefinement(hierarchicalFacetName, facetValue).search();
           }
         };
@@ -153,6 +170,7 @@ const connectBreadcrumb: BreadcrumbConnector = function connectBreadcrumb(
             instantSearchInstance,
             items: [],
             refine: connectorState.refine,
+            sendEvent,
             widgetParams,
           },
           true
@@ -176,6 +194,7 @@ const connectBreadcrumb: BreadcrumbConnector = function connectBreadcrumb(
             instantSearchInstance,
             items,
             refine: connectorState.refine,
+            sendEvent,
             widgetParams,
           },
           false