fix: Propagate URL changes to react state

[simster7]

Fixes #5186

The react useState takes as parameter only an initial value. Once the hooks are created, if the value passed in to useState changes it has no effect on the state of the hooks.

During the initial render, the returned state (state) is the same as the value passed as the first argument (initialState).

The setState function is used to update the state. It accepts a new state value and enqueues a re-render of the component.

https://reactjs.org/docs/hooks-reference.html#usestate

Since the only way the react state reads the query parameters is as an argument to useState, if we change the URL without changing the react state, the change will not propagate to down to the react state. With this change, we use an effect on the history, so if the history were to change, we would make sure to update our react state with new query param values.

[alexec]

does this only affect query params?

[simster7]

does this only affect query params?

Correct, prop changes cause a re-render of the whole component and there is no way to change a prop or other variable outside of React's state as there is with query params

[alexec]

Do we want a utility function for this? It could live with historyUrl and maybe leverage some cleverness. E.g.

useEffect(historyThing(history, () => {
            setShowFlow(p.get('showFlow') === 'true');
            setShowWorkflows(p.get('showWorkflows') !== 'false');
            setExpanded(p.get('expanded') === 'true');
            setSelectedNode(p.get('selectedNode'));
            setTab(p.get('tab'));
        ), [history]);

Not sure. Any way to simplify the code, maybe event just use shorter variable names?

 useEffect(() => {
        return history.listen(l => {
            const p = new URLSearchParams(l.search);
            setSidePanel(p.get('sidePanel') === 'true');
            setTab(p.get('tab'));
        });
    }, [history]);

[simster7]

Sure, I'll simplify

[alexec]

I don't feel very strongly about this. I like how useEffect makes it super easy to identify and fix this issue.