Custom connector, refine and/or custom states props

[felipepastor]

Hi,

We are developing a new app in house and decided to go for the hooks approach, we've already implemented the HOC in other project. But for hooks we are getting a few issues, I hope someone could give us a direction.
In the project we have a search based on the boundingBox, plus a facets (a dropdown menu), the name of the place searched and we will need to have these properties mapped on the URL. Going through the documentation we encountered the routing option and we could use the router and stateMapping, this will help us on the way, when the use arrived in the page using some sort of a deep-link and when the user applied the search setting the state to the route (URL). But we got 2 issues:

1. How to refine based on multiples properties like boundingBox + facets with hooks? Using the HOC, we could create our own connector, with hooks there's this possibility but we couldn't achieve success.
2. How to include a custom state on the UI, for example "name"? I tried with many approaches like suggested in the docs, using setUiState, setIndexUiState or even with onStateChange, but the custom attribute isn't set in the object. Why do I need this? Setting the value on the state I can easily using routing to map the stateToRoute and it will be in the URL. At least this is how I first thought.

<InstantSearch routing={routing} ...>

  ...
  stateMapping: {
    stateToRoute(uiState: any) {
      const indexUiState = uiState[EnvConfig.ALGOLIA_INDEX] || {};

      return {
        page: indexUiState.page,
        category: indexUiState.menu?.categories,
        geoSearch: indexUiState.geoSearch,
        name: indexUiState.name,
      };
    },
    routeToState(routeState: any) {
      const routeToStateObj = {
        [EnvConfig.ALGOLIA_INDEX]: {
          page: routeState.page,
          menu: {
            categories: routeState.category,
          },
          geoSearch: routeState.geoSearch,
          name: routeState.name,
        },
      };

      return { ...routeToStateObj };
    },
  },

Refining at certain point the items with boundingBox + useGeoSearch
The idea is that here we could refine with more attributes with our own connector.

    refine({
      northEast: {
        lat: form.bounds?.northEast?.lat as number,
        lng: form.bounds?.northEast?.lng as number,
      },
      southWest: {
        lat: form.bounds?.southWest?.lat as number,
        lng: form.bounds?.southWest?.lng as number,
      },
    });

I hope it's clear enough to start this topic, please let me know if you need more information.

Thanks!

[Haroenv]

1. you can either still create a custom connector, as in the guide here https://www.algolia.com/doc/guides/building-search-ui/widgets/create-your-own-widgets/react-hooks/. If you're confused or stuck at any point, don't hesitate to let us know so we can improve that guide.

Alternatively you can also use the set(Index)UiState function from useInstantSearch https://www.algolia.com/doc/api-reference/widgets/use-instantsearch/react-hooks/#widget-param-setindexuistate to set multiple refinements at once

2. Could you clarify more what you mean with "custom attribute"? I'm not sure I understand what you are trying to do

[felipepastor]

Hey, thanks for the quick reply.
I'll give it another try to create my own connector, alternatively I'll trigger set(Index)UiState and check if can set multiples refinements, because for me it should happen inside the refine function and not on the setState, that was how I understood 😄.

About the other question, I have the google autocomplete, once the user pick the location, I get the bounds of it and trigger the refine function and then set on the URL this data. The problem is, we are missing the placeName selected before, because I can't save on the state this custom attribute that's not present on the UiState (my guess). I tried to set using the setUiState, setIndexUiState or the onStateChange setting the new state object, but the attribute doesn't show on the stateToRoute fn for example. I'm guessing this attr is being removed. Am I missing something? My idea is to set any custom attr that I want to have on the URL in the search state, because I can easily work wit it later and manipulate them.

Thanks.

[Haroenv]

There's a widget for algolia places (now deprecated) that has similar logic as a google places autocomplete would have here: https://github.com/algolia/instantsearch.js/blob/master/src/widgets/places/places.ts, you need to make sure that there's a custom widget owning that "state" via getWidgetUiState and getWidgetSearchParameters

[felipepastor]

Thank you, I'll have a look.
The setIndexUiState works fine with the useGeoSearch.

[jsdmc]

Hey guys. Since this question masked as answered, I added new one slightly different...Can you take a look please?
https://github.com/algolia/react-instantsearch/discussions/3683