Adding arbitrary query parameters in react-isntantsearch

I’d like to be able to add an arbitrary query along with any filters and search that my react-instantsearch app is producing, kind of like a VirtualWidget, but in no way should it override or interact with any other part of the app.

Perhaps better explained with my use case:

I have products with start dates and end dates, I’d like to guarantee that no search will ever return a hit with a start date < today’s date. However, I also need people to be able to use widgets to search by start and end date. So my query should end up looking like this pseudocode:

... where startDate >= today [and startDate = someDate]...

So if dates are selected by the user or not, the startDate is always filtered to get dates in the future.

If I add a VirtualWidget specifying this, it overrides my actual date picker widget since it’s working on the same part of the instantsearch query rather than the actual query sent to the server.

Hi @guy, reading this:

I believe this is something that you should solve at your date picker widget level, rather than trying to implement it with react-instantsearch. There’s no responsibility for RIS to try to override this.

What’s the calendar widget you are using nowadays? How do you connect it to RIS?

I’ve just spotted (undocumented?) searchParameters as a prop on InstantSearch ?

e.g.

<InstantSearch
        appId="XXX"
        apiKey="XXX"
        indexName="XXX"
        searchParameters={{ filters: `startDate >= ${moment().format('X')}` }}
      >...</InstantSearch>

Regards the datepicker widget, I’ve got react-datepicker working with start and end dates working via a custom connector that links the start date to my startDate field, and the end date to my endDate field.

I’ve also just managed to link up the min start date filter via that.

Hi, https://community.algolia.com/react-instantsearch/widgets/Configure.html supersedes the usage of “searchParameters”.

I would advise you to provide max and min dates via the datepicker API: https://github.com/Hacker0x01/react-datepicker/blob/99d6879601595b1e11963ca0219789f9e0f6cf4a/docs/datepicker.md

They have a min and max possibilities that would make your UI clearer I believe.

Also you can handle any custom validators with their onChange events.

Let me know how it goes.

OK - I see that configure can do this as well - the documentation isn’t overly clear (to me anyway).

Regarding adding it to my datepicker, the issue isn’t wanting users to filter by dates > today, it’s to ensure that if there are no dates set, the results never show any hits where the start date is in the past.

The default on the date widget is to pick future dates only in any case.

So i could either add it to my Configure or I have this code in my custom date range connector. TBH, I think it makes more sense to have it in the configure object since it makes my date widget more portable.

  getSearchParameters(searchParameters, props, searchState) {
    const { attributeStartDate, attributeEndDate } = props;
    const { startDate, endDate } = getCurrentRefinement(props, searchState, this.context);
    if (attributeStartDate) {
      searchParameters = searchParameters.addDisjunctiveFacet(attributeStartDate);
      if (startDate) {
        searchParameters = searchParameters.addNumericRefinement(
          attributeStartDate,
          '=',
          startDate,
        );
      } else {
        // no start date is set, so ensure we only get future hits 
        searchParameters = searchParameters.addNumericRefinement(
          attributeStartDate,
          '>',
          moment().format('X'),
        );
      }
    }

    if (endDate && attributeEndDate) {
      searchParameters = searchParameters
        .addDisjunctiveFacet(attributeEndDate)
        .addNumericRefinement(attributeEndDate, '=', endDate);
    }
    return searchParameters;
  },

p.s. when I said react-datepicker I meant https://github.com/airbnb/react-dates/ - my bad