feat(hooks): introduce useSortBy (#3190)

* feat(hooks): introduce `useSortBy`

* chore(examples): add useSortBy in hooks example

Co-authored-by: François Chalifour <francoischalifour@users.noreply.github.com>

examples/hooks/App.css

@@ -16,6 +16,34 @@ body {
   margin: 0 auto;
 }
 
+.Container {
+  display: grid;
+  align-items: flex-start;
+  grid-template-columns: 200px 1fr;
+  gap: .5rem;
+}
+
+.Search {
+  display: grid;
+  gap: .5rem;
+}
+
+.Search-header {
+  display: grid;
+  align-items: flex-start;
+  grid-template-columns: 1fr auto;
+  gap: .5rem;
+}
+
+.Hit-label {
+  flex: 1;
+  margin-right: 1rem;
+}
+
+.Hit-price {
+  color: lightslategray;
+}
+
 .Pagination {
   padding: 1rem 0;
   margin: 0 auto;

examples/hooks/App.tsx

@@ -9,6 +9,7 @@ import {
   Pagination,
   RefinementList,
   SearchBox,
+  SortBy,
 } from './components';
 
 import './App.css';
@@ -21,16 +22,21 @@ const searchClient = algoliasearch(
 type HitProps = {
   hit: AlgoliaHit<{
     name: string;
+    price: number;
   }>;
 };
 
 function Hit({ hit }: HitProps) {
   return (
-    <span
-      dangerouslySetInnerHTML={{
-        __html: (hit._highlightResult as any).name.value,
-      }}
-    />
+    <>
+      <span
+        className="Hit-label"
+        dangerouslySetInnerHTML={{
+          __html: (hit._highlightResult as any).name.value,
+        }}
+      />
+      <span className="Hit-price">${hit.price}</span>
+    </>
   );
 }
 
@@ -39,14 +45,7 @@ export function App() {
     <InstantSearch searchClient={searchClient} indexName="instant_search">
       <Configure hitsPerPage={15} />
 
-      <div
-        style={{
-          display: 'grid',
-          alignItems: 'flex-start',
-          gridTemplateColumns: '200px 1fr',
-          gap: '0.5rem',
-        }}
-      >
+      <div className="Container">
         <div>
           <RefinementList
             attribute="brand"
@@ -55,8 +54,17 @@ export function App() {
             showMore={true}
           />
         </div>
-        <div style={{ display: 'grid', gap: '.5rem' }}>
-          <SearchBox placeholder="Search" />
+        <div className="Search">
+          <div className="Search-header">
+            <SearchBox placeholder="Search" />
+            <SortBy
+              items={[
+                { label: 'Relevance', value: 'instant_search' },
+                { label: 'Price (asc)', value: 'instant_search_price_asc' },
+                { label: 'Price (desc)', value: 'instant_search_price_desc' },
+              ]}
+            />
+          </div>
           <Hits hitComponent={Hit} />
           <Pagination className="Pagination" />
         </div>

examples/hooks/components/SortBy.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import { useSortBy, UseSortByProps } from 'react-instantsearch-hooks';
+
+export type SortByProps = React.ComponentProps<'div'> & UseSortByProps;
+export function SortBy(props: SortByProps) {
+  const { currentRefinement, options, refine } = useSortBy(props);
+
+  return (
+    <div className="ais-SortBy">
+      <select
+        className="ais-SortBy-select"
+        onChange={(event) => refine(event.target.value)}
+        defaultValue={currentRefinement}
+      >
+        {options.map(({ label, value }) => (
+          <option className="ais-SortBy-option" key={value} value={value}>
+            {label}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}

examples/hooks/components/index.ts

@@ -3,3 +3,4 @@ export * from './Hits';
 export * from './Pagination';
 export * from './RefinementList';
 export * from './SearchBox';
+export * from './SortBy';

packages/react-instantsearch-hooks/src/__tests__/useSortBy.test.tsx

@@ -0,0 +1,36 @@
+import { renderHook } from '@testing-library/react-hooks';
+
+import { createInstantSearchTestWrapper } from '../../../../test/utils';
+import { useSortBy } from '../useSortBy';
+
+const items = [
+  { label: 'Featured', value: 'indexName' },
+  { label: 'Price (asc)', value: 'indexName_price_asc' },
+  { label: 'Price (desc)', value: 'indexName_price_desc' },
+];
+
+describe('useSortBy', () => {
+  test('returns the connector render state', async () => {
+    const wrapper = createInstantSearchTestWrapper();
+    const { result, waitForNextUpdate } = renderHook(
+      () => useSortBy({ items }),
+      { wrapper }
+    );
+
+    expect(result.current).toEqual({
+      currentRefinement: 'indexName',
+      options: items,
+      refine: expect.any(Function),
+      hasNoResults: expect.any(Boolean),
+    });
+
+    await waitForNextUpdate();
+
+    expect(result.current).toEqual({
+      currentRefinement: 'indexName',
+      options: items,
+      refine: expect.any(Function),
+      hasNoResults: expect.any(Boolean),
+    });
+  });
+});

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

@@ -7,3 +7,4 @@ export * from './useHits';
 export * from './usePagination';
 export * from './useRefinementList';
 export * from './useSearchBox';
+export * from './useSortBy';

packages/react-instantsearch-hooks/src/useSortBy.ts

@@ -0,0 +1,17 @@
+import connectSortBy from 'instantsearch.js/es/connectors/sort-by/connectSortBy';
+
+import { useConnector } from './useConnector';
+
+import type {
+  SortByConnectorParams,
+  SortByWidgetDescription,
+} from 'instantsearch.js/es/connectors/sort-by/connectSortBy';
+
+export type UseSortByProps = SortByConnectorParams;
+
+export function useSortBy(props: UseSortByProps) {
+  return useConnector<SortByConnectorParams, SortByWidgetDescription>(
+    connectSortBy,
+    props
+  );
+}