Issues implemanting Friendly URL

react-instantsearch
refinementlist
url
urlsync
menuwidget

#1

Hey folks :wave:

I’ve just started to add the URLsync to my search but after many tries, I’m stuck to implement the User-friendly URLs. I’ve been looking at the doc User Friendly URLs but only one example is provided even when I search others demos you might have around.

My current working state is the following:

It gives me the following results :point_down:t2:

Then I tried to edit my code based on your documentation:

For now, it’s working as expected with the RefinementList, however I still need to fix the Menu. Right now, after the debounce time, the selected menu is automatically trashed.

So without more example, I’m trying to add the Menu in the same way we did for the RefinementList:

However, the join/split function isn’t supported for this one. Seems logical since the menu isn’t a checkbox but more a select/radio button.

So I’m keeping only the essential part:

const routeState = {
    query: state.query,
    type:
      state.menu &&
      state.menu.type,
    category:
      state.refinementList &&
      state.refinementList.category &&
      state.refinementList.category.join('~'),
   page: state.page,
};

const searchState = {
    query: routeState.query,
    menu: {
      type: (routeState.type) || [],
    },
    refinementList: {
      category: (routeState.category && routeState.category.split('~')) || [],
    },
    page: routeState.page || 1,
};

It’s kinda working, at least for the URL, but by default I’ve this empty element added at the bottom of my list. It’s disapearing once I’m selecting another type in the Menu.

Do you have any idea what’s wrong and how to fix it?

If I can add a suggestion, I think adding more widget examples would be great for this part.

Thanks for reading it.


#2

Hi @Pluantoine
It’s hard to understand your code from the snippets your shows. Any chance you put the relevant code in sandbox? We have a ready to use boilerplate here: https://codesandbox.io/s/github/algolia/doc-code-samples/tree/master/React%20InstantSearch/getting-started

Can’t wait to help!


#3

Thanks for your answe Youcef! I’ll try to add that (even if it’s a bit different here) and/or push a staging env to have a better understanding. I’ll get back to you tomorrow :+1:t2: