How do I use aroundlatlng with routing so that it's state works with history back and forward?

instantsearch
routing
statemapping

#1

I’ve got routing set up so that refinement lists, hierarchical menus, query, and pagination works nicely. Back and forward algolia saves the states and steps through them perfectly showing the related search results for those states.

I’d like to add aroundlatlng to routing so that when sort by distance is checked the results save to state and properly update while going back and forward in history. Adding latitude and longitude to routing works fine for the url history but the search results don’t update…predictably.

Pressing back on the browser with default settings will step through the history state of the search query, refinement lists etc and the results that go with them. Pretty much anything under the uiState object reference works great. But I see no reference or way to control aroundlatlng between history states there:

Seemingly the simplest solution is to run search.helper.setQueryParameter(‘aroundLatLng’, urlLatLng).search() when onpopstate or algolia’s routeToState is run but this causes the history to break. Forward button disappears and causes the back button to need double clicked to get to previous results.

I’ve tried some other things but before I write a book maybe there’s a proper solution?

The problem I’m having is very similar to abushnel’s problem except I’m using vanilla javascript, not react and his last couple questions went unanswered. edit - Also, I’m not currently using maps, just a list of search results sorted by distance.


#2

Is there an codesandbox.io Algolia vanilla javascript template for results that can be sorted by distance?


#3

K, took some time and put together a small version on codesandbox.io using algolia airports data. Even the standard algolia widget state history doesn’t seem to work on codesandbox, I think you have to download it and run it locally to see it work.

With this terrible idea I had using history.replaceState it kinda works. Click different airport buttons to sort by distance starting at that airport. Type different countries in, change pages, try back and forward to see how well history works.

pushState, commented out, allows the pages and search queries to work but causes an every other back click is junk if the history is several location only changes long.

replaceState, what is running, makes sure there’s no junk states when switching between only locations but screws up the rest of any widgets that are running.

Both have a problem if you go back a few and you click a page or type a country into search then aroundLatLng reverts all the way back to the last full page refresh.

Anyway, thanks for any help.