feat(hooks): introduce useNumericMenu (#3237)

algolia · Dec 10, 2021 · e3056c9 · e3056c9
1 parent 177ec56
commit e3056c9
Show file tree

Hide file tree

Showing 7 changed files with 170 additions and 9 deletions.
diff --git a/examples/hooks/App.tsx b/examples/hooks/App.tsx
@@ -5,21 +5,22 @@ import { InstantSearch, DynamicWidgets } from 'react-instantsearch-hooks';
 
 import {
   Configure,
+  CurrentRefinements,
   HierarchicalMenu,
   Highlight,
   Hits,
+  HitsPerPage,
   InfiniteHits,
+  Menu,
+  NumericMenu,
   Pagination,
   Panel,
+  QueryRuleContext,
+  QueryRuleCustomData,
   RangeInput,
   RefinementList,
-  Menu,
   SearchBox,
   SortBy,
-  HitsPerPage,
-  QueryRuleContext,
-  QueryRuleCustomData,
-  CurrentRefinements,
 } from './components';
 import { Tab, Tabs } from './components/layout';
 
@@ -53,7 +54,7 @@ export function App() {
       indexName="instant_search"
       routing={true}
     >
-      <Configure hitsPerPage={15} />
+      <Configure ruleContexts={[]} />
 
       <div className="Container">
         <div>
@@ -82,6 +83,17 @@ export function App() {
             <Panel header="Price">
               <RangeInput attribute="price" />
             </Panel>
+            <Panel header="Price range">
+              <NumericMenu
+                attribute="price"
+                items={[
+                  { label: 'All' },
+                  { label: 'Less than $500', end: 500 },
+                  { label: 'Between $500 - $1000', start: 500, end: 1000 },
+                  { label: 'More than $1000', start: 1000 },
+                ]}
+              />
+            </Panel>
           </DynamicWidgets>
         </div>
         <div className="Search">
@@ -96,8 +108,8 @@ export function App() {
             />
             <HitsPerPage
               items={[
-                { label: '4 hits per page', value: 4, default: true },
-                { label: '8 hits per page', value: 8 },
+                { label: '20 hits per page', value: 20, default: true },
+                { label: '40 hits per page', value: 40 },
               ]}
             />
           </div>

diff --git a/examples/hooks/components/NumericMenu.tsx b/examples/hooks/components/NumericMenu.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { useNumericMenu, UseNumericMenuProps } from 'react-instantsearch-hooks';
+
+import { cx } from '../cx';
+
+export type NumericMenuProps = React.ComponentProps<'div'> &
+  UseNumericMenuProps;
+
+export function NumericMenu(props: NumericMenuProps) {
+  const { hasNoResults, items, refine } = useNumericMenu(props);
+
+  return (
+    <div
+      className={cx(
+        'ais-NumericMenu',
+        hasNoResults && 'ais-NumericMenu--noRefinement',
+        props.className
+      )}
+    >
+      <ul className="ais-NumericMenu-list">
+        {items.map((item) => (
+          <li
+            key={item.value}
+            className={cx(
+              'ais-NumericMenu-item',
+              item.isRefined && 'ais-NumericMenu-item--selected'
+            )}
+          >
+            <label className="ais-NumericMenu-label">
+              <input
+                className="ais-NumericMenu-radio"
+                type="radio"
+                checked={item.isRefined}
+                onChange={() => refine(item.value)}
+              />
+              <span className="ais-NumericMenu-labelText">{item.label}</span>
+            </label>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
diff --git a/examples/hooks/components/index.ts b/examples/hooks/components/index.ts
@@ -5,6 +5,7 @@ export * from './Highlight';
 export * from './Hits';
 export * from './InfiniteHits';
 export * from './Menu';
+export * from './NumericMenu';
 export * from './Pagination';
 export * from './HitsPerPage';
 export * from './Panel';

diff --git a/package.json b/package.json
@@ -158,7 +158,7 @@
     },
     {
       "path": "packages/react-instantsearch-hooks/dist/umd/ReactInstantSearchHooks.min.js",
-      "maxSize": "36 kB"
+      "maxSize": "37 kB"
     },
     {
       "path": "packages/react-instantsearch-dom/dist/umd/ReactInstantSearchDOM.min.js",

diff --git a/packages/react-instantsearch-hooks/src/__tests__/useNumericMenu.test.tsx b/packages/react-instantsearch-hooks/src/__tests__/useNumericMenu.test.tsx
@@ -0,0 +1,87 @@
+import { renderHook } from '@testing-library/react-hooks';
+
+import { createInstantSearchTestWrapper } from '../../../../test/utils';
+import { useNumericMenu } from '../useNumericMenu';
+
+describe('useNumericMenu', () => {
+  test('returns the connector render state', async () => {
+    const wrapper = createInstantSearchTestWrapper();
+    const { result, waitForNextUpdate } = renderHook(
+      () =>
+        useNumericMenu({
+          attribute: 'attribute',
+          items: [
+            { label: 'All' },
+            { label: 'Less than 500$', end: 500 },
+            { label: 'Between 500$ - 1000$', start: 500, end: 1000 },
+            { label: 'More than 1000$', start: 1000 },
+          ],
+        }),
+      {
+        wrapper,
+      }
+    );
+
+    // Initial render state from manual `getWidgetRenderState`
+    expect(result.current).toEqual({
+      createURL: expect.any(Function),
+      hasNoResults: true,
+      items: [
+        {
+          isRefined: true,
+          label: 'All',
+          value: '%7B%7D',
+        },
+        {
+          isRefined: false,
+          label: 'Less than 500$',
+          value: '%7B%22end%22:500%7D',
+        },
+        {
+          isRefined: false,
+          label: 'Between 500$ - 1000$',
+          value: '%7B%22start%22:500,%22end%22:1000%7D',
+        },
+        {
+          isRefined: false,
+          label: 'More than 1000$',
+          value: '%7B%22start%22:1000%7D',
+        },
+      ],
+      refine: expect.any(Function),
+      sendEvent: expect.any(Function),
+    });
+
+    await waitForNextUpdate();
+
+    // InstantSearch.js state from the `render` lifecycle step
+    expect(result.current).toEqual({
+      createURL: expect.any(Function),
+      hasNoResults: true,
+      items: [
+        {
+          isRefined: true,
+          label: 'All',
+          value: '%7B%7D',
+        },
+        {
+          isRefined: false,
+          label: 'Less than 500$',
+          value: '%7B%22end%22:500%7D',
+        },
+        {
+          isRefined: false,
+          label: 'Between 500$ - 1000$',
+          value: '%7B%22start%22:500,%22end%22:1000%7D',
+        },
+        {
+          isRefined: false,
+          label: 'More than 1000$',
+          value: '%7B%22start%22:1000%7D',
+        },
+      ],
+      refine: expect.any(Function),
+      sendEvent: expect.any(Function),
+    });
+  });
+});
diff --git a/packages/react-instantsearch-hooks/src/index.ts b/packages/react-instantsearch-hooks/src/index.ts
@@ -13,6 +13,7 @@ export * from './useHits';
 export * from './useHitsPerPage';
 export * from './useInfiniteHits';
 export * from './useMenu';
+export * from './useNumericMenu';
 export * from './usePagination';
 export * from './useQueryRules';
 export * from './useRange';

diff --git a/packages/react-instantsearch-hooks/src/useNumericMenu.ts b/packages/react-instantsearch-hooks/src/useNumericMenu.ts
@@ -0,0 +1,17 @@
+import connectNumericMenu from 'instantsearch.js/es/connectors/numeric-menu/connectNumericMenu';
+
+import { useConnector } from './useConnector';
+
+import type {
+  NumericMenuConnectorParams,
+  NumericMenuWidgetDescription,
+} from 'instantsearch.js/es/connectors/numeric-menu/connectNumericMenu';
+
+export type UseNumericMenuProps = NumericMenuConnectorParams;
+
+export function useNumericMenu(props: UseNumericMenuProps) {
+  return useConnector<NumericMenuConnectorParams, NumericMenuWidgetDescription>(
+    connectNumericMenu,
+    props
+  );
+}