React-instantsearch: Error associating filters per each item

[Kikobeats]

Hello,

I'm trying to build a more mobile friendly way to apply filters.

The idea is, instead of have an aside with all filters to apply, each Hit show as Tags the filters that you can apply when you click on it.

In this case, my hit has:

{
  "condition": "New",
  "brand": "Gaastra",
  "model": "Cosmic"
}

So when I click in the brand Tag, the filter will be applied an the current hits will be refine with brand:Gaastra filter.

This make easy apply filter while you are navigating 😄

Implementation looks easy like:
https://gist.github.com/Haroenv/eb37d4c69df56ccbe6adec1877fdfc15

But internally something is not working and it throws warnings everywhere:

warning.js?07153df:35 Warning: flattenChildren(...): Encountered two children with the same key, `New`. Child keys must be unique; when two children share a key, only the first child will be used.
    in div (created by CurrentRefinements)
    in div (created by CurrentRefinements)
    in CurrentRefinements (created by Translatable(CurrentRefinements))
    in Translatable(CurrentRefinements) (created by AlgoliaCurrentRefinements(Translatable(CurrentRefinements)))
    in AlgoliaCurrentRefinements(Translatable(CurrentRefinements)) (at App.js:29)
    in div (created by InstantSearch)
    in InstantSearch (created by CreateInstantSearch)
    in CreateInstantSearch (created by CreateInstantSearchServer)
    in CreateInstantSearchServer (at App.js:15)
    in App (at index.js?entry:61)
    in div (created by styled.div)
    in styled.div (created by Provider)
    in ThemeProvider (created by Provider)
    in Provider (at index.js?entry:60)
    in div (at Layout.js:14)
    in Unknown (at index.js?entry:59)
    in _class (created by Container)
    in AppContainer (created by Container)
    in Container (created by App)
    in div (created by App)
    in App

I isolated the error into windtoday@v3-tags If you want to reproduce it.

[mthuret]

Hey @Kikobeats, that's funny because we are currently trying to build that experience with @Haroenv!

If I summarise what you're trying to do, you want to have a RefinementList on every Hit to refine the tags, right?

Currently mixing connectors within connectors is not really possible with React InstantSearch, especially when it means have N time the same widget on the same attributeName.

We're trying to make it work with another strategy and get back to you when stable :)

[Haroenv]

So as said, it's not possible to nest connectors like this, you'll have to pass around props.

https://codesandbox.io/s/7LD7EJ14r

What happens here is that every Hit has a component for the keywords. Once you click on a keyword, this event listener is called with its keyword. This then passes through to the Search component, where it is set in the state, and deduplicated.

This state is set as defaultRefinement for a connectRefinement that isn't visible. To be able to handle with updates from other components this component always renders null, but calls its refine function with currentRefinement or defaultRefinement, depending on which one is called.

This refine is then also passed down to the main component, in which it simply overwrites the state of the tags with the new state received from the RefinementList

If you have another, real RefinementList on the page which _is_ rendered, then you'll see warnings by react because of duplicate keys in CurrentRefinements, but this does not impact the actual app, because it's getting this key from both the real and your RefinementList. Technically you could do both the visible and invisible RefinementList in the same connector, but that would be hard to read

[Haroenv]

What still needs to be explained now is how to efficiently do it for multiple attributes

[mthuret]

And write the proper guide :)

[Haroenv]

I just made a new version that works with multiple attributes too: https://codesandbox.io/s/oY1klpZYB

[Kikobeats]

I did same purpose but different approach using filters fields at Configure:

https://github.com/windtoday/windtoday-app/commit/85b0954d2c513c0a07c3a00dd97d2549c089df4b

I think your approach is better, but probably too verbose; in my case I need to add like 7 o 8 VirtualRefinementList and states.

Could we isolate this into a HoC?

[Haroenv]

This kind of logic should live in user space IMO

[Haroenv]

I just edited that example, so that less is needed when you want to have a lot of attributes.

[Kikobeats]

It works like a charm, currently implemented at windtoday-next and working fine.

Thanks @Haroenv for your effort 😄

[Haroenv]

I’ll keep this open until the guide is merged