Preparing for React 18: change how router decides to PUSH new URL

With React 18, the old hack of setting a boolean during the
browser-based update doesn't work anymore (for some reason)and a state
update comes in after we think the browser is done. This causes the
history stack to be destroyed so we can't go to the help page, back,
then forward again.

We now check to see if the Redux-driven URL would result in us ending
back at the same URL the browser does, and if so we just ignore the
update.

Author: shepmaster

ui/frontend/uss-router/index.ts

@@ -30,31 +30,28 @@ export function createRouter<St, SubSt, A extends Action<any>>({
   stateToLocation,
   locationToAction,
 }: CreateRouterArg<St, SubSt, A>): RouterObject {
-  let doingUpdateFromBrowser = false; // Avoid immediately PUSHing the state again
   let interestingPrevState: SubSt;
 
   // Watch changes to the Redux state
   store.subscribe(() => {
-    if (doingUpdateFromBrowser) { return; }
-
     const nextState = store.getState();
-    const interestingNextState = stateSelector(nextState);
-
-    if (!isEqual(interestingNextState, interestingPrevState)) {
-      const nextLocation = stateToLocation(nextState);
 
-      history.push(nextLocation);
+    // It's only worth checking if our state subset has changed.
+    const interestingNextState = stateSelector(nextState);
+    if (isEqual(interestingNextState, interestingPrevState)) { return; }
+    interestingPrevState = interestingNextState;
 
-      interestingPrevState = interestingNextState;
-    }
+    // If our next location matches where we already are, leave the
+    // history stack as-is.
+    const nextLocation = stateToLocation(nextState);
+    if (pathsEqualEnough(history, history.location, nextLocation)) { return; }
+    history.push(nextLocation);
   });
 
   const dispatchBrowserLocationChange = (nextLocation: Location) => {
     const action = locationToAction(nextLocation);
     if (action) {
-      doingUpdateFromBrowser = true;
       store.dispatch(action);
-      doingUpdateFromBrowser = false;
     }
   };
 
@@ -68,10 +65,6 @@ export function createRouter<St, SubSt, A extends Action<any>>({
   // Load initial browser state
   dispatchBrowserLocationChange(history.location);
 
-  // Now that we've set up any initial state, we keep it so we can
-  // tell when the location needs to change.
-  interestingPrevState = stateSelector(store.getState());
-
   return {
     provisionalLocation: (makeAction: () => A) => {
       const state = store.getState();
@@ -85,3 +78,10 @@ export function createRouter<St, SubSt, A extends Action<any>>({
     },
   };
 }
+
+function pathsEqualEnough(history: BrowserHistory, a: Partial<Path>, b: Partial<Path>): boolean {
+  const aHref = history.createHref(a);
+  const bHref = history.createHref(b);
+
+  return aHref === bHref;
+}