Filtering by multiple facets

In my app, my objects are a list of courses. Each course has a start date and a deadline to pay. I want a refinement widget that has options to filter by start date (i.e. in <2 weeks, in <3 weeks, etc.) and it filters courses if both the start date and deadline are within the filter.

How do I do this in React? Reading the docs, I don’t see a way to do this easily. In Filter by date | Algolia, it says I can do something like'query', { filters: 'NOT date_timestamp:1538352000 TO 1540944000' }).then(({ hits }) => { console.log(hits); });

to filter by date but what is index referring to here? In React InstantSearch hooks, I only have access to searchClient and the refine function.

In React you can do the equivalent by passing the the filters as part of a configuration object (Configure | React InstantSearch | Algolia) – but this tends to be for static criteria you want for all users. You can use this for deadline since the date will be constant.

For the start dates, I assume you’ll want the student to have some level of control.

If you want the user to input date ranges for courses, you’ll want to add this as a widget using a Date Range Picker (A better date-picking experience with the DateRangePicker component | Algolia Blog). If you want fixed ranges like you describe above, you’ll want to put them in a refinementList. I believe you have another post around the specifics of that pattern.

Thanks for the response! Can you describe the refinementList approach a little more. I don’t know if I fully understand. I thought that refinementLists show all the possible values for an attribute. There’s no way to bucket the values and there’s no way for the refine function to apply the values on two attributes.

Instead, are you suggesting that I need to restructure my object and send different attributes that can be used in the refinementList?


That’s right – one approach would be to literally inject those values as an additional attribute on your records and update them using a scheduled job.

Or maybe the ranges could just be a custom control that updates the state of the date range selector (i.e. clicking < 2weeks set the appropriate range for the date picker). That’s not an approach I’ve tried before, but it’s nice in that it doesn’t require an additional attribute.

So just to be clear, I can’t give users control to click on option in a refinementList that filters multiple attributes.

  • The refinementList approach requires that I inject an additional attribute like “< 2 weeks” and update that myself when the time passes
  • The date range selector only operates on one attribute

Is this accurate?

Yes, the out-of-the-box widgets have a 1:1 correlation to attributes. If you wanted a control that changed filtering for multiple attributes, you’d need a custom widget that controlled UI state or injected filters via the Configuration object as I described above.