React-instantsearch: Connecting UI Buttons

[taylorpreston]

Feature

I'm working on a react app where we use the UI pattern posted below in a search area that is not connected to Algolia.

We want to recreate this pattern ⬇️ in our algolia interface.

Currently these are the connected components we have on the page

• Hierarchal Menu
• Search Box
• Infinite Hits
  

I'm wondering if anyone has a suggestion for connector that would offer a soultion.
We have tried almost every connector that seems like it would work, but all the hits get blown away.

What we want

• Ability to map over current refinement to produce UI buttons
• Each button can be clicked resulting in that value being removed from the current fitler.

ALSO! Thanks for this awesome library! 😎

[tkrugg]

Hi @taylorpreston. Thank you for reaching out.
What you're describing looks a lot like the CurrentRefinements.

Here is an example using it https://community.algolia.com/react-instantsearch/storybook/?selectedKind=CurrentRefinements&selectedStory=with%20RefinementList&full=0&addons=1&stories=1&panelRight=1&addonPanel=storybooks%2Fstorybook-addon-knobs

Does this look like what you want?
Could you explain how you expect your users to add a new UI button to that list?

[taylorpreston]

Thanks, @tkrugg! I am using the connectCurrentRefinements which is working as expected, but now I am running into a different issue.

The items that are returned are hierarchical so, for example:

I filter on a category Human and then the subcategory Child.
The items prop that is returned has 1 item in it with the Human > Child*.

What I am attempting to do is split that single category into two UI buttons categories.

The first a button Human has an onClick={()=> refine(null)} that removes both category and subcategory.
The second button Human > Child has an onClick={()=> refine(item.value)} that removes just the subcategory.

When I click the category aka Human button I get an error.

raven.js:390 Uncaught TypeError: clear is not a function
    at eval (connectCurrentRefinements.js:69)
    at Array.reduce (<anonymous>)
    at Connector.refine (connectCurrentRefinements.js:68)
    at refine (createConnector.js:270)
    at onClick (index.js?d270:14)
    at HTMLUnknownElement.d (raven.js:386)
    at Object.ReactErrorUtils.invokeGuardedCallback (ReactErrorUtils.js:70)
    at executeDispatch (EventPluginUtils.js:85)
    at Object.executeDispatchesInOrder (EventPluginUtils.js:108)
    at executeDispatchesAndRelease (EventPluginHub.js:43)
    at executeDispatchesAndReleaseTopLevel (EventPluginHub.js:54)
    at Array.forEach (<anonymous>)
    at forEachAccumulated (forEachAccumulated.js:24)
    at Object.processEventQueue (EventPluginHub.js:257)
    at runEventQueueInBatch (ReactEventEmitterMixin.js:17)
    at Object.handleTopLevel [as _handleTopLevel] (ReactEventEmitterMixin.js:28)
    at handleTopLevelImpl (ReactEventListener.js:72)
    at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:140)
    at Object.batchedUpdates (ReactDefaultBatchingStrategy.js:62)
    at Object.batchedUpdates (ReactUpdates.js:97)
    at dispatchEvent (ReactEventListener.js:147)
    at HTMLDocument.d (raven.js:386)

I tried pealing through the source code to see what I could find, but couldn't find what I was looking for. If you have any ideas they would be greatly appreicated. :)

[Haroenv]

@taylorpreston, could you give a piece of code which reproduces this error? It will be significantly easier to research what's going on and what you are trying to do like that!

http://codesandbox.io/s/github/algolia/create-instantsearch-app/tree/templates/react-instantsearch

that's a template you can use!

[taylorpreston]

@Haroenv Thanks for sending me the template! 👍 https://codesandbox.io/s/k5vl75px9r

[tkrugg]

Hi @taylorpreston.
2 different points:

1. you're trying to use the currentRefinementList to build something that looks like breadcrumbs? This is not what I understood from your original post. Can you just confirm you want your hierarchy to translate into UI button?

2. I see one minor mistake. refine expects to be passed the item.value

onClick={() => refine(item.value)}

Does this help?

[Haroenv]

As said by @tkrugg, if you're actually trying to make a breadcrumb, we also have connectBreadcrumb, which might be closer to what you want to achieve, since it won't have the other refinements and will already be split as you expected

[samouss]

It's been a while since the last comment, I'll close the issue. Don't hesitate to create a new one if you still have an issue with the widget.