feat(connectToggleRefinement): implement canRefine & count

[samouss]

Summary

This PR adds canRefine & count on the provided props of the connectToggleRefinement connector. I didn't implement the count on the widget because it will be a breaking change only in the connector.

The count object has the following shape (see below). When the currentRefinement is false (unchecked) the user can pick the unchecked attribute. It displays the number of results that match the value provided to the Toggle widget. Once it's checked the count displays the total number of results (compute from the facet values).

type Count = {
  checked: number | null;
  unchecked: number | null;
};

Changes:

• the computation of the SearchParameters (conjunctiveFacet -> disjunctiveFacet)
• the computation of the providedProps (adds canRefine & count)
• adds the noRefinement class on the Toggle root element

[algobot]

Deploy preview for react-instantsearch ready!

Built with commit b279620

https://deploy-preview-1588--react-instantsearch.netlify.com

[francoischalifour]

refines → refine

[francoischalifour]

These two variable names are confusing.

[samouss]

Any suggestions? I didn't find something else.

[francoischalifour]

When I deal with both singular and plural variable names, I tend to go for allFacetValues and facetValue. WDYT?

[samouss]

To be honest I don't see a huge benefit, I'm used to the plural singular form like the original one. But I get your point.

[francoischalifour]

When I came across these two lines I thought you were referring to the same variable. The benefit is just to avoid this confusion. This is subjective though.

[samouss]

Yep I've renamed it.

[VincentCtr]

@samouss it seems that this PR is causing a crash when we use ToggleRefinement and change the index used by InstantSearch widget

app.js:sourcemap:406316 Error: **FacetName** is not a retrieved facet.
    at SearchResults../node_modules/algoliasearch-helper/src/SearchResults/index.js.SearchResults.getFacetValues (app.js:sourcemap:55188)
    at Connector.getProvidedProps (app.js:sourcemap:281799)
    at Connector.getProvidedProps (app.js:sourcemap:282134)
    at new Connector (app.js:sourcemap:281975)
    at constructClassInstance (app.js:sourcemap:250944)
    at updateClassComponent (app.js:sourcemap:252666)
    at beginWork (app.js:sourcemap:253265)
    at performUnitOfWork (app.js:sourcemap:255591)
    at workLoop (app.js:sourcemap:255629)
    at renderRoot (app.js:sourcemap:255708)

I spent the whole day trying to figure out what happen and finally came back to 5.2.3

[samouss]

Hi @VincentCtr, sorry about that. I may found out why it happens, the index you are switching on does have the facet that you provide to the Toggle? If you have an example of the issue it would be awesome, because I didn't manage to reproduce it. We provide a template to avoid the boilerplate. I've create a PR to solve the issue.

[VincentCtr]

Hi @samouss, thank you for this very quick fix !

[samouss]

The PR has been merged and released (v5.3.1), let me know if you still have any issues.