Reset page when filters change

[callmekatootie]

Came across this thread from the past where changing filters would not reset page numbers. The <Configure /> component was blamed here.

In our scenario, we have multiple filters - and yes, some that we set through <Configure /> (like geosearch for example). Does that thread still hold? Is there a prescribed way to reset the page when filters change? We have multiple filters so tracking each of them for changes and resetting page manually would be cumbersome.

[mmorris8]

I use a PageContext to handle this in React InstantSearch. I'm also using React-router-dom to present a tabbed search, so widgets have to be preserved on tab changes. The application structure is as follows:

The code that follows can be seen in action on https://covenanthealth.com/find-a-doctor

<Root> App Context Provider and Router Provider are set
  <App> Algolia Instant Search and the error boundary are set
    <AppBody>Page Context Provider, Search Mast and App Tabs are set
</App>

The AppBody is the fulcrum of the context tracking. The relevant parts of its code

export default function AppBody({router}) {
  const location = useLocation()
  const { uiState } = useInstantSearch()
  const [viewMaps, setViewMaps] = useState(false)
  const [trueUiState, setTrueUiState] = useState(null)

  /*
   * The user's geo location is controled by a component that will store their coordinates in localStorage
   * (The dataStore is a wrapper class around localStorage that serves a similar role to Redux, but is 
   * framework agnostic and we use it in some raw JS apps and Angular apps). So when the user's location
   * is updated (they enter a new zip code to search by most frequently) that gets updated and forces a
   * rerender of the app
   */
  const [userLocation, setUserLocation] = useState(dataStore.get('userLocation'))
  dataStore.observe('userLocation', 'AppBody', setUserLocation)

  /*
   * Tabbed navigation is a small headache because it mounts and unmounts widgets. We must preserve
   * our uiState through this process, so the true state is mapped to the page context where the incoming
   * widgets can recover it with a useEffect (seen later in this post). This is why the AppBody component
   * is inside a wrapping App component that sets up InstantSearch - we need to see the current state
   * to cache it just before executing the navigation (performed by React-Router-DOM
   */
  const navigate = useCallback((destination) => {
    const path = router.navigate(destination, trueUiState ?? uiState, setTrueUiState)
    onSearchTabChange(path)
  }, [uiState, trueUiState, setTrueUiState])

  return (
    <PageContext.Provider value={{
      user: {
        location: userLocation
      },
      location,
      navigate,
      uiState: trueUiState,
      querySet: userLocation || facility.objectId || filtersSet(uiState) || uiState?.root.query 
    }}>
      <MenuFacet virtual={true} attribute="tab" />
      <SearchMast />
      <AppTabs />
    </PageContext.Provider>
  )
}

There are multiple handling widgets, but here's the find a doctor one

export default function SearchProviders() {
  const { facility } = useContext(AppContext)
  const { viewMaps, toggleMapView, user, uiState } = useContext(PageContext)
  const { setUiState } = useInstantSearch()
  const popOverRef = useRef()

  /*
   * Set the true state after tab navigation
   */
  useEffect(() => {
    if (uiState) setTimeout(() => setUiState(uiState))
  }, [setUiState])

  return (
    <Index indexName={providerIndex} indexId="Providers">
      <Configure 
        aroundLatLng={user.location ? `${user.location.coords.latitude}, ${user.location.coords.longitude}` : ''} 
        aroundRadius={user.location ? 500000 : ''} 
        filters={ facility.objectId === null ? '' : `hospitalAffiliations.objectID:${facility.objectId} OR locations.objectID:${facility.objectId}`}
        hitsPerPage={10}
      />

Since Configure is reading its settings out of the PageContext it updates when the PageContext updates. The page index gets reset at that time.

I'm sorry I can't make this more clear - page reset is something I'm doing, but I have the code juggling a half dozen other problems as well.

[callmekatootie]

This is what we too have at the moment. I am actually moving away from using context for state management - because I found using Algolia's state manager through useInstantSearch() hook to be simpler. It just seems redundant that we need to track state twice (rather Algolia tracking it once - and we tracking it again).

What I have so far is using onStatChange() prop on <InstantSearch /> and comparing states, and resetting page to 1 - but I am not sure if that is the suggested approach or there's a better, simpler way to go about it.

[Haroenv]

Those answers both make sense, however our overall best practice (despite being more code) for components that intentionally change parameters that probably should sync with the ui state (routing) is to create custom connectors. You can base yourself on the existing ones to see how they should be created, as well as on the guides: https://www.algolia.com/doc/guides/building-search-ui/widgets/create-your-own-widgets/react/#building-a-custom-connector

In its core, Configure is meant either for the kind of parameter that's always applied or shouldn't be synchronised externally

[callmekatootie]

In its core, Configure is meant either for the kind of parameter that's always applied or shouldn't be synchronised externally

We can set the aroundLatLng and aroundRadius search params only through <Configure /> component. So we have to use Configure, even though we synchronise it externally. Is there an alternate to these? Is that where building the custom connector comes into picture?

[Haroenv]

Yes, you can make a custom widget or use/modify connectGeoSearch for your use case as well. Of course if you have a working implementation, no need to do it now, but for future that can be interesting to look into