feat(recommend): introduce useRelatedProducts Hook (#6159)

bundlesize.config.json

@@ -22,7 +22,7 @@
     },
     {
       "path": "packages/react-instantsearch/dist/umd/ReactInstantSearch.min.js",
-      "maxSize": "59.5 kB"
+      "maxSize": "59.75 kB"
     },
     {
       "path": "packages/vue-instantsearch/vue2/umd/index.js",

packages/react-instantsearch-core/src/connectors/__tests__/useRelatedProducts.test.tsx

@@ -0,0 +1,24 @@
+import { createInstantSearchTestWrapper } from '@instantsearch/testutils';
+import { renderHook } from '@testing-library/react-hooks';
+
+import { useRelatedProducts } from '../useRelatedProducts';
+
+describe('useRelatedProducts', () => {
+  test('returns the connector render state', async () => {
+    const wrapper = createInstantSearchTestWrapper();
+    const { result, waitForNextUpdate } = renderHook(
+      () => useRelatedProducts({ objectIDs: ['1'] }),
+      {
+        wrapper,
+      }
+    );
+
+    // Initial render state from manual `getWidgetRenderState`
+    expect(result.current).toEqual({ recommendations: expect.any(Array) });
+
+    await waitForNextUpdate();
+
+    // InstantSearch.js state from the `render` lifecycle step
+    expect(result.current).toEqual({ recommendations: expect.any(Array) });
+  });
+});

packages/react-instantsearch-core/src/connectors/useRelatedProducts.ts

@@ -0,0 +1,28 @@
+import connectRelatedProducts from 'instantsearch.js/es/connectors/related-products/connectRelatedProducts';
+
+import { useConnector } from '../hooks/useConnector';
+
+import type { AdditionalWidgetProperties } from '../hooks/useConnector';
+import type { BaseHit } from 'instantsearch.js';
+import type {
+  RelatedProductsConnector,
+  RelatedProductsConnectorParams,
+  RelatedProductsWidgetDescription,
+} from 'instantsearch.js/es/connectors/related-products/connectRelatedProducts';
+
+export type UseRelatedProductsProps<THit extends BaseHit = BaseHit> =
+  RelatedProductsConnectorParams<THit>;
+
+export function useRelatedProducts<THit extends BaseHit = BaseHit>(
+  props: UseRelatedProductsProps<THit>,
+  additionalWidgetProperties?: AdditionalWidgetProperties
+) {
+  return useConnector<
+    RelatedProductsConnectorParams<THit>,
+    RelatedProductsWidgetDescription<THit>
+  >(
+    connectRelatedProducts as RelatedProductsConnector<THit>,
+    props,
+    additionalWidgetProperties
+  );
+}

packages/react-instantsearch-core/src/index.ts

@@ -22,6 +22,7 @@ export * from './connectors/usePoweredBy';
 export * from './connectors/useQueryRules';
 export * from './connectors/useRange';
 export * from './connectors/useRefinementList';
+export * from './connectors/useRelatedProducts';
 export * from './connectors/useSearchBox';
 export * from './connectors/useSortBy';
 export * from './connectors/useStats';

packages/react-instantsearch/src/__tests__/common-connectors.test.tsx

@@ -20,6 +20,7 @@ import {
   useConnector,
   useToggleRefinement,
   useCurrentRefinements,
+  useRelatedProducts,
 } from '..';
 
 import type {
@@ -32,6 +33,7 @@ import type {
   UsePaginationProps,
   UseRefinementListProps,
   UseToggleRefinementProps,
+  UseRelatedProductsProps,
 } from '..';
 import type { TestOptionsMap, TestSetupsMap } from '@instantsearch/tests';
 import type {
@@ -313,7 +315,28 @@ const testSetups: TestSetupsMap<TestSuites> = {
       </InstantSearch>
     );
   },
-  createRelatedProductsConnectorTests: () => {},
+  createRelatedProductsConnectorTests: ({
+    instantSearchOptions,
+    widgetParams,
+  }) => {
+    function CustomRelatedProducts(props: UseRelatedProductsProps) {
+      const { recommendations } = useRelatedProducts(props);
+
+      return (
+        <ul>
+          {recommendations.map((recommendation) => (
+            <li key={recommendation.objectID}>{recommendation.objectID}</li>
+          ))}
+        </ul>
+      );
+    }
+
+    render(
+      <InstantSearch {...instantSearchOptions}>
+        <CustomRelatedProducts {...widgetParams} />
+      </InstantSearch>
+    );
+  },
   createFrequentlyBoughtTogetherConnectorTests: () => {},
 };
 
@@ -334,12 +357,7 @@ const testOptions: TestOptionsMap<TestSuites> = {
   createNumericMenuConnectorTests: { act },
   createRatingMenuConnectorTests: { act },
   createToggleRefinementConnectorTests: { act },
-  createRelatedProductsConnectorTests: {
-    act,
-    skippedTests: {
-      options: true,
-    },
-  },
+  createRelatedProductsConnectorTests: { act },
   createFrequentlyBoughtTogetherConnectorTests: {
     act,
     skippedTests: {