fix: DiffScene back/forward browser button behaviour

DiffScene did not handle changes in route when back or forward button
pressed. This change has the react router driving the changes to state.
If diff changes, history is updated. History updates state. When back/forward
button pressed, history is update and again history updates state.

packages/api-explorer/src/scenes/DiffScene/DiffScene.tsx

@@ -104,23 +104,33 @@ export const DiffScene: FC<DiffSceneProps> = ({ specs, toggleNavigation }) => {
   )
   const [toggles, setToggles] = useState<string[]>(standardDiffToggles)
 
+  useEffect(() => {
+    if (r !== rightKey) {
+      setRightKey(r)
+    }
+  }, [r, rightKey])
+
+  useEffect(() => {
+    if (l !== leftKey) {
+      setLeftKey(l)
+    }
+  }, [l, leftKey])
+
   useEffect(() => {
     toggleNavigation(false)
   }, [])
 
   const [delta, setDelta] = useState<DiffRow[]>([])
 
   const handleLeftChange = (newLeft: string) => {
-    setLeftKey(newLeft)
+    history.push(`/${diffPath}/${newLeft}/${rightKey}`)
   }
   const handleRightChange = (newRight: string) => {
-    setRightKey(newRight)
+    history.push(`/${diffPath}/${leftKey}/${newRight}`)
   }
 
   const handleSwitch = () => {
-    const currLeftKey = leftKey
-    setLeftKey(rightKey)
-    setRightKey(currLeftKey)
+    history.push(`/${diffPath}/${rightKey}/${leftKey}`)
   }
 
   useEffect(() => {
@@ -144,10 +154,6 @@ export const DiffScene: FC<DiffSceneProps> = ({ specs, toggleNavigation }) => {
     setToggles(newToggles)
   }
 
-  useEffect(() => {
-    history.push(`/${diffPath}/${leftKey}/${rightKey}`)
-  }, [leftKey, rightKey])
-
   return (
     <ApixSection>
       <Box>