feat(currentRefinements): support multiple indices

[francoischalifour]

Description

This implements multi-index context in CurrentRefinements leveraging scopedResults (#3964).

A CurrentRefinements widget now displays the refinements coming from its siblings and its children.

Internal changes

The index now calls the render hook with an enhanced scopedResults containing the helper for this index. This is needed to call refine on each item coming from the CurrentRefinements. Otherwise, calling setState on the helper doesn't change the correct helper state (and thus breaks).

The new structure is:

interface ScopedResult {
  indexId: string;
  results: SearchResults;
  helper: Helper;
}

A new property indexName is added to the CurrentRefinements items. This property is given to the renderer. This indexName can be used to display the index where the attribute is coming from, or compute a node key for component-based flavors (e.g. React). The new structure is:

 type Item = {
+  indexName: string;
   attribute: string;
   label: string;
   refinements: ItemRefinement[];
   refine(refinement: ItemRefinement): void;
 };

Example

search.addWidgets([
  // Displays both the refinements for `index1` and `index2`
  instantsearch.widgets.currentRefinements({
    container,
  }),

  instantsearch.widgets
    .index({
      indexName: 'index1',
    })
    .addWidgets([
      instantsearch.widgets.refinementList({
        container,
        attribute: 'brand',
      }),
    ]),

  instantsearch.widgets
    .index({
      indexName: 'index2',
    })
    .addWidgets([
      instantsearch.widgets.refinementList({
        container,
        attribute: 'locations',
      }),
    ]),
]);

Preview

See story →

[eunjae-lee]

looks good to me

[Haroenv]

looks good