Best practices for saving searches

[calebdel]

Issue Type:
enhancement

Platform:
Web, React

Description:
How would you suggest keeping track of the state of selected filters for the purpose of saving a search?

We have a "saved search" feature that I'm trying to refactor (See screenshot) but I can't figure out an ideal way to track the state of which filters have been selected. I've tried the following:

1. Parsing the URL params. This is messy and in the past some edge cases have ruled this out.

2. Accessing the ReactiveSearch Redux store. I understand the store is created with the __REACTIVESEARCH__ key, but I can't figure out how to access it.

3. The "selectedValues" prop in the SelectedFilters component gives me exactly what I need, but I can't access it either.

4. Currently I'm using the "onValueChange" prop to track state changes and but it isn't ideal for many reasons (primarily reusability across the app.) Related issue (Best way to get the values selected via MultiList(refinement list) #398)

How would you suggest going about this?

My suggestion is to expose the selectedValues prop in the SelectedFilters component.

Reactivesearch version:
2.14.1

Screenshot:

[metagrover]

Thanks for filing this issue. This has been on my mind for a while now. I will look into this and expose a convenient way to get the selected-values. For now, maybe you can utilize URLParams, i.e. save URLParams string and retrieve when needed.

@metagrover Your method would also address this issue: #705

[ThunderDev1]

@metagrover I would also be interested in a convenient way to get the selected filter values other than URLParams 😉

At the moment, we are tracking the query in the transformRequest function from ReactiveBase, then passing it as defaultQuery to the ResultList component. It works well enough for displaying only a result, but now we need to save the search filters so we can display it at a later date with pre-filled filters.

Nice job on this lib by the way 😃

[metagrover]

Hey everyone 👋

Thanks for the patience on this. We've added support for onChange prop on SelectedFilters component to support this. You can simply do:

<SelectedFilters
	onChange={(selectedValue) => {
	    console.log(selectedValue);
	}}
/>

Shape of selectedValue:

{
    SearchFilter: {
        componentType: "DATASEARCH",
        label: "SearchFilter",
        value: "Harry Potter",
        category: null, // gives you selected category if it is category-search
        URLParams: false,
        showFilter: true,
    },
    ListFilter1: { ... },
    ListFilter2: { ... },
}

This will be out in v3.0.0-beta.8.