feat(autocomplete): indices prop for React component

Author: aymeric-giraudet

packages/react-instantsearch-core/src/components/AutocompleteWrapper.tsx

@@ -1,5 +1,4 @@
 export { default as version } from './version';
-export * from './components/AutocompleteWrapper';
 export * from './components/Configure';
 export * from './components/DynamicWidgets';
 export * from './components/Index';
@@ -31,7 +30,6 @@ export * from './connectors/useStats';
 export * from './connectors/useToggleRefinement';
 export * from './connectors/useTrendingItems';
 export * from './connectors/useLookingSimilar';
-export * from './hooks/useAutocomplete';
 export * from './hooks/useConnector';
 export * from './hooks/useInstantSearch';
 export * from './lib/wrapPromiseWithState';

packages/react-instantsearch-core/src/hooks/useAutocomplete.ts

@@ -1,19 +1,30 @@
 import React from 'react';
-import {
-  EXPERIMENTAL_AutocompleteWrapper as AutocompleteWrapper,
-  EXPERIMENTAL_useAutocomplete as useAutocomplete,
-} from 'react-instantsearch-core';
+import { Index } from 'react-instantsearch-core';
 
-export function EXPERIMENTAL_Autocomplete() {
-  return (
-    <AutocompleteWrapper>
-      <AutocompleteInner />
-    </AutocompleteWrapper>
-  );
-}
+import { Hits, SearchBox } from '../widgets';
+
+import type { BaseHit, Hit } from 'instantsearch.js';
 
-function AutocompleteInner() {
-  useAutocomplete();
+type IndexConfig<TItem extends Hit<BaseHit> = Hit<BaseHit>> = {
+  indexName: string;
+  getQuery?: (item: TItem) => string;
+  getURL?: (item: TItem) => string;
+  itemComponent: React.ComponentType<TItem> | React.ComponentType<any>;
+};
 
-  return null;
+export type AutocompleteProps = {
+  indices: IndexConfig[];
+};
+
+export function EXPERIMENTAL_Autocomplete({ indices }: AutocompleteProps) {
+  return (
+    <Index EXPERIMENTAL_isolated>
+      <SearchBox />
+      {indices.map((index) => (
+        <Index key={index.indexName} indexName={index.indexName}>
+          <Hits hitComponent={({ hit }) => <index.itemComponent {...hit} />} />
+        </Index>
+      ))}
+    </Index>
+  );
 }

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

@@ -0,0 +1,59 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import {
+  createMultiSearchResponse,
+  createSearchClient,
+  createSingleSearchResponse,
+} from '@instantsearch/mocks';
+import { InstantSearchTestWrapper } from '@instantsearch/testutils';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+
+import { EXPERIMENTAL_Autocomplete } from '../Autocomplete';
+
+describe('Autocomplete', () => {
+  function createMockedSearchClient() {
+    return createSearchClient({
+      // @ts-expect-error - doesn't properly handle multi index, expects all responses to be of the same type
+      search: jest.fn(() =>
+        Promise.resolve(
+          createMultiSearchResponse(
+            createSingleSearchResponse({
+              hits: [{ objectID: '1', name: 'Item 1' }],
+            }),
+            // @ts-expect-error - ignore second response type
+            createSingleSearchResponse({
+              hits: [{ objectID: '2', query: 'hello' }],
+            })
+          )
+        )
+      ),
+    });
+  }
+
+  test('should render a searchbox and indices with hits', async () => {
+    const searchClient = createMockedSearchClient();
+    render(
+      <InstantSearchTestWrapper searchClient={searchClient}>
+        <EXPERIMENTAL_Autocomplete
+          indices={[
+            {
+              indexName: 'indexName',
+              itemComponent: (props: { name: string }) => props.name,
+            },
+            {
+              indexName: 'indexName2',
+              itemComponent: (props: { query: string }) => props.query,
+            },
+          ]}
+        />
+      </InstantSearchTestWrapper>
+    );
+
+    expect(await screen.findByText('Item 1')).toBeInTheDocument();
+    expect(await screen.findByText('hello')).toBeInTheDocument();
+    expect(screen.getByRole('searchbox')).toBeInTheDocument();
+  });
+});