fix(recommend): fix sendEvent function passing to Recommend components

algolia · Jan 16, 2025 · 96a4572 · 96a4572
1 parent d3e46fe
commit 96a4572
Show file tree

Hide file tree

Showing 14 changed files with 111 additions and 26 deletions.
diff --git a/examples/js/getting-started/src/app.js b/examples/js/getting-started/src/app.js
@@ -31,8 +31,15 @@ search.addWidgets([
   hits({
     container: '#hits',
     templates: {
-      item: (hit, { html, components }) => html`
-        <article>
+      item: (hit, { html, components, sendEvent }) => html`
+        <article
+          onclick="${(event) => {
+            event.stopPropagation();
+            event.preventDefault();
+            // sendEvent is always defined !!
+            sendEvent('click', hit, 'some event');
+          }}"
+        >
           <h1>
             <a href="/products.html?pid=${hit.objectID}"
               >${components.Highlight({ hit, attribute: 'name' })}</a
@@ -60,8 +67,16 @@ search.addWidgets([
     container: '#trending',
     limit: 6,
     templates: {
-      item: (item, { html }) => html`
-        <div>
+      item: (item, { html, sendEvent }) => html`
+        <div
+          onclick="${(event) => {
+            event.stopPropagation();
+            event.preventDefault();
+            if (sendEvent) {
+              sendEvent('click', item, 'some event');
+            }
+          }}"
+        >
           <article>
             <div>
               <img src="${item.image}" />

diff --git a/examples/react/getting-started/src/App.tsx b/examples/react/getting-started/src/App.tsx
@@ -19,6 +19,12 @@ import 'instantsearch.css/themes/satellite.css';
 
 import './App.css';
 
+type Record = {
+  image: string;
+  name: string;
+  description: string;
+};
+
 const searchClient = algoliasearch(
   'latency',
   '6be0576ff61c053d5f9a3225e2a90f76'
@@ -55,14 +61,37 @@ export function App() {
 
             <div className="search-panel__results">
               <SearchBox placeholder="" className="searchbox" />
-              <Hits hitComponent={HitComponent} />
+              <Hits<Record>
+                hitComponent={({ hit, sendEvent }) => {
+                  return (
+                    <div
+                      onClick={() => sendEvent('click', hit, 'product_clicked')}
+                    >
+                      <HitComponent hit={hit} />
+                    </div>
+                  );
+                }}
+              />
 
               <div className="pagination">
                 <Pagination />
               </div>
               <div>
-                <TrendingItems
-                  itemComponent={ItemComponent}
+                <TrendingItems<Record>
+                  queryParameters={{
+                    clickAnalytics: true,
+                  }}
+                  itemComponent={({ item, sendEvent }) => {
+                    return (
+                      <div
+                        onClick={() =>
+                          sendEvent('click', item, 'product_clicked')
+                        }
+                      >
+                        <ItemComponent item={item} />
+                      </div>
+                    );
+                  }}
                   limit={6}
                   layoutComponent={Carousel}
                 />
@@ -75,13 +104,7 @@ export function App() {
   );
 }
 
-type HitType = Hit<{
-  image: string;
-  name: string;
-  description: string;
-}>;
-
-function HitComponent({ hit }: { hit: HitType }) {
+function HitComponent({ hit }: { hit: Hit<Record> }) {
   return (
     <article>
       <h1>
@@ -97,7 +120,7 @@ function HitComponent({ hit }: { hit: HitType }) {
   );
 }
 
-function ItemComponent({ item }: { item: Hit }) {
+function ItemComponent({ item }: { item: Hit<Record> }) {
   return (
     <div>
       <article>

diff --git a/packages/instantsearch-ui-components/src/components/Carousel.tsx b/packages/instantsearch-ui-components/src/components/Carousel.tsx
@@ -245,7 +245,7 @@ export function createCarouselComponent({ createElement, Fragment }: Renderer) {
                 sendEvent('click:internal', item, 'Item Clicked');
               }}
             >
-              <ItemComponent item={item} />
+              <ItemComponent item={item} sendEvent={sendEvent} />
             </li>
           ))}
         </ol>

diff --git a/...es/instantsearch-ui-components/src/components/__tests__/FrequentlyBoughtTogether.test.tsx b/...es/instantsearch-ui-components/src/components/__tests__/FrequentlyBoughtTogether.test.tsx
@@ -155,6 +155,7 @@ describe('FrequentlyBoughtTogether', () => {
                     item={item}
                     onClick={jest.fn()}
                     onAuxClick={jest.fn()}
+                    sendEvent={jest.fn()}
                   />
                 </li>
               ))}

diff --git a/packages/instantsearch-ui-components/src/components/__tests__/LookingSimilar.test.tsx b/packages/instantsearch-ui-components/src/components/__tests__/LookingSimilar.test.tsx
@@ -155,6 +155,7 @@ describe('LookingSimilar', () => {
                     item={item}
                     onClick={jest.fn()}
                     onAuxClick={jest.fn()}
+                    sendEvent={jest.fn()}
                   />
                 </li>
               ))}

diff --git a/packages/instantsearch-ui-components/src/components/__tests__/RelatedProducts.test.tsx b/packages/instantsearch-ui-components/src/components/__tests__/RelatedProducts.test.tsx
@@ -155,6 +155,7 @@ describe('RelatedProducts', () => {
                     item={item}
                     onClick={jest.fn()}
                     onAuxClick={jest.fn()}
+                    sendEvent={jest.fn()}
                   />
                 </li>
               ))}

diff --git a/packages/instantsearch-ui-components/src/components/__tests__/TrendingItems.test.tsx b/packages/instantsearch-ui-components/src/components/__tests__/TrendingItems.test.tsx
@@ -155,6 +155,7 @@ describe('TrendingItems', () => {
                     item={item}
                     onClick={jest.fn()}
                     onAuxClick={jest.fn()}
+                    sendEvent={jest.fn()}
                   />
                 </li>
               ))}

diff --git a/packages/instantsearch-ui-components/src/components/recommend-shared/List.tsx b/packages/instantsearch-ui-components/src/components/recommend-shared/List.tsx
@@ -32,7 +32,7 @@ export function createListComponent({ createElement }: Renderer) {
                 sendEvent('click:internal', item, 'Item Clicked');
               }}
             >
-              <ItemComponent item={item} />
+              <ItemComponent item={item} sendEvent={sendEvent} />
             </li>
           ))}
         </ol>

diff --git a/packages/instantsearch-ui-components/src/types/Recommend.ts b/packages/instantsearch-ui-components/src/types/Recommend.ts
@@ -93,6 +93,7 @@ export type RecordWithObjectID<TObject = Record<string, unknown>> = TObject & {
 
 export type RecommendItemComponentProps<TObject> = {
   item: TObject;
+  sendEvent: SendEventForHits;
   onClick?: () => void;
   onAuxClick?: () => void;
 };

diff --git a/packages/instantsearch-ui-components/src/types/shared.ts b/packages/instantsearch-ui-components/src/types/shared.ts
@@ -1,2 +1,12 @@
 // Should be imported from a shared package in the future
-export type SendEventForHits = (...props: unknown[]) => void;
+
+import type { RecordWithObjectID } from './Recommend';
+
+type BuiltInSendEventForHits = (
+  eventType: string,
+  hits: RecordWithObjectID<any> | Array<RecordWithObjectID<any>>,
+  eventName?: string,
+  additionalData?: Record<string, any>
+) => void;
+type CustomSendEventForHits = (customPayload: any) => void;
+export type SendEventForHits = BuiltInSendEventForHits & CustomSendEventForHits;
diff --git a/packages/react-instantsearch/src/widgets/FrequentlyBoughtTogether.tsx b/packages/react-instantsearch/src/widgets/FrequentlyBoughtTogether.tsx
@@ -1,5 +1,5 @@
 import { createFrequentlyBoughtTogetherComponent } from 'instantsearch-ui-components';
-import React, { createElement, Fragment } from 'react';
+import React, { createElement, Fragment, useMemo } from 'react';
 import {
   useFrequentlyBoughtTogether,
   useInstantSearch,
@@ -77,9 +77,17 @@ export function FrequentlyBoughtTogether<THit extends BaseHit = BaseHit>({
         })
     : undefined;
 
+  const _itemComponent: typeof itemComponent = useMemo(
+    () =>
+      itemComponent
+        ? (itemProps) => itemComponent({ ...itemProps, sendEvent })
+        : undefined,
+    [itemComponent, sendEvent]
+  );
+
   const uiProps: UiProps<THit> = {
     items: items as Array<Hit<THit>>,
-    itemComponent,
+    itemComponent: _itemComponent,
     headerComponent,
     emptyComponent,
     layout,

diff --git a/packages/react-instantsearch/src/widgets/LookingSimilar.tsx b/packages/react-instantsearch/src/widgets/LookingSimilar.tsx
@@ -1,5 +1,5 @@
 import { createLookingSimilarComponent } from 'instantsearch-ui-components';
-import React, { createElement, Fragment } from 'react';
+import React, { createElement, Fragment, useMemo } from 'react';
 import { useLookingSimilar, useInstantSearch } from 'react-instantsearch-core';
 
 import type {
@@ -75,9 +75,17 @@ export function LookingSimilar<THit extends BaseHit = BaseHit>({
         })
     : undefined;
 
+  const _itemComponent: typeof itemComponent = useMemo(
+    () =>
+      itemComponent
+        ? (itemProps) => itemComponent({ ...itemProps, sendEvent })
+        : undefined,
+    [itemComponent, sendEvent]
+  );
+
   const uiProps: UiProps<THit> = {
     items: items as Array<Hit<THit>>,
-    itemComponent,
+    itemComponent: _itemComponent,
     headerComponent,
     emptyComponent,
     layout,

diff --git a/packages/react-instantsearch/src/widgets/RelatedProducts.tsx b/packages/react-instantsearch/src/widgets/RelatedProducts.tsx
@@ -1,5 +1,5 @@
 import { createRelatedProductsComponent } from 'instantsearch-ui-components';
-import React, { createElement, Fragment } from 'react';
+import React, { createElement, Fragment, useMemo } from 'react';
 import { useInstantSearch, useRelatedProducts } from 'react-instantsearch-core';
 
 import type {
@@ -75,9 +75,17 @@ export function RelatedProducts<TItem extends BaseHit = BaseHit>({
         })
     : undefined;
 
+  const _itemComponent: typeof itemComponent = useMemo(
+    () =>
+      itemComponent
+        ? (itemProps) => itemComponent({ ...itemProps, sendEvent })
+        : undefined,
+    [itemComponent, sendEvent]
+  );
+
   const uiProps: UiProps<TItem> = {
     items: items as Array<Hit<TItem>>,
-    itemComponent,
+    itemComponent: _itemComponent,
     headerComponent,
     emptyComponent,
     layout,

diff --git a/packages/react-instantsearch/src/widgets/TrendingItems.tsx b/packages/react-instantsearch/src/widgets/TrendingItems.tsx
@@ -1,5 +1,5 @@
 import { createTrendingItemsComponent } from 'instantsearch-ui-components';
-import React, { createElement, Fragment } from 'react';
+import React, { createElement, Fragment, useMemo } from 'react';
 import { useInstantSearch, useTrendingItems } from 'react-instantsearch-core';
 
 import type {
@@ -79,9 +79,17 @@ export function TrendingItems<TItem extends BaseHit = BaseHit>({
         })
     : undefined;
 
+  const _itemComponent: typeof itemComponent = useMemo(
+    () =>
+      itemComponent
+        ? (itemProps) => itemComponent({ ...itemProps, sendEvent })
+        : undefined,
+    [itemComponent, sendEvent]
+  );
+
   const uiProps: UiProps<TItem> = {
     items: items as Array<Hit<TItem>>,
-    itemComponent,
+    itemComponent: _itemComponent,
     headerComponent,
     emptyComponent,
     layout,
-Original file line number
+Diff line change
@@ Expand Up @@
                     sendEvent('click:internal', item, 'Item Clicked');
                   }}
                 >
-                  <ItemComponent item={item} />
+                  <ItemComponent item={item} sendEvent={sendEvent} />
                 </li>
               ))}
             </ol>
@@ Expand Down @@