Resume a previous search?

[WGriffing]

Let me set the stage with a brief description of our app:

• Currently 5 different Elastic indices, each with different data not conducive to a single ReactiveBase (I think)
• Tabbed interface, recently added react-router-dom v5
• Generally speaking, a ReactiveBase, ReactiveList, and various filters are confined to the same tab

The issue since adding the router to the tabs is that we are only rendering one tab at a time. When a user switches tabs to search a different index, the 1st search on the other tab is lost since the component and all the filters unmount.

What I think I want to do (open to suggestions), is:

1. Store the search state (gathered from SelectedFilters onChange prop, as the user performs their search, into a context or parent state.
2. When user leaves the tab, stop storing their changes to that particular state (and start storing elsewhere for the newly active tab).
3. If user returns to the original tab, retrieve the parent/context state value from step 1 and restore that tab's search the way they left it.

I know I can programmatically store the active filters, but I am unclear on how (or if ) I can programmatically restore/resume a given search.

I know I could parse out everything into URL params, but that seems clunky

I have gone done the path of trying to solve it via the router using Route with the children prop to keep everything mounted. In that case, I don't have to deal with resuming anything since all the tabs are always mounted, but the performance becomes quite bad.

[bietkul]

I know I can programmatically store the active filters, but I am unclear on how (or if ) I can programmatically restore/resume a given search.

It can be achieved by using controlled behavior in components i.e use value with onChange prop and manage state by yourself.

[WGriffing]

Thanks!

I haven't had a chance to make use of this information yet, but your response led me to #968 which led to https://codesandbox.io/s/ommkkyv2y?file=/src/index.js .

I think this will do exactly what I wanted to do.

[redlinecodes]

@WGriffing Can you share a little bit about how you achieved the Tabbed interface? Been working on that too with Material UI and having limited success.

[WGriffing]

I can give you a quick, high-level overview of the design off the top of my head and a few snippets.

If you need more detailed, specific examples, I will have to get back to you in a few days (product is not open source).

In short, the idea is that we make a context to keep track of the active search for all filters across all tabs. If you switch tabs and all your Reactivesearch components become unmounted, it's no longer an issue. When you switch back, the various filters will be repopulated by the value props from the context state which is generally preserved. And the onChange prop keeps the context up to date as the user adds/removes filters.

The weakness is that the searches (API calls to elastic) have to be re-run when you switch back to the tab. The results are not instantaneously populated when you switch back. For us, this was good enough. I imagine you could cache the results and re-display them for a smoother feel, but we have a relatively small set of users and didn't mind a few extra API calls to our back end.

Here are some more detailed instructions of how it works:

1. We created a context. It is a dictionary where each key is the componentId of a filter and each value is the value of that filter. There is the context state variable, filters, as well as a method, updateFilter, to update the context:

import isEqual from 'react-fast-compare';

// other code not shown

const initialFilters = () => {
  const result = {};

    for (let i in FILTERS) { // FILTERS is an array of component IDs
      if (
        FILTERS[i].includes('a_filter_component_id_related_to_date')
      ) {
        result[FILTERS[i]] = {start: '', end: ''} ; // date-based filters need a different, non-null init value
      } else {
        result[FILTERS[i]] = null;
      }
    }

  return result;
};

const FilterContextProvider = props => {
  // other things removed
  const [filters, setFilters] = useState(initialFilters());

  const updateFilter = (name, value) => {
    if (!isEqual(filters[name], value)) {
      setFilters(prev => ({ ...prev, [name]: value }));
    }
  };
  
 // other code not shown

return (
    <FilterStateContext.Provider value={{ filters: filters }}>
      <FilterDispatchContext.Provider
        value={{
          updateFilter: updateFilter,
        }}
      >
        {children}
      </FilterDispatchContext.Provider>
    </FilterStateContext.Provider>
  );

}

2. At a high level, probably in App.js, you wrap your children components with your FilterContextProvider so that you can access the context within any of those child components. We wrapped our authenticated components only.
3. In your React components that use the Reactivesearch filters, we access the filters variable and updateFilters method from step 1 via a useContext hook.

  const { filters } = useContext(FilterStateContext);
  const { updateFilter } = useContext(FilterDispatchContext);

4. Each filter's (i.e. SingleList, MultiList, etc) value prop is set up like value={filters['a_filter_component_id_here']}
5. Each filter's onChange prop is set up to invoke updateFilter. For example, onChange={val => updateFilter('a_filter_component_id_here', val)}

[redlinecodes]

@WGriffing Thank you so much, yes if you could give me more detailed specific examples that would be great!

[WGriffing]

@redlinecodes Sorry, I've been really busy.

I haven't forgotten about this, just haven't had time to revisit it.

Is there any part of my 1st reply that's particularly troubling or challenging?

[redlinecodes]

@WGriffing No, your 1st reply is pretty good. I probably just need to review it a bit and be good to go!