From 5976f742f2ec93be96f1b0f4df7513640fb78954 Mon Sep 17 00:00:00 2001
From: Joe Heffernan <interim17@gmail.com>
Date: Wed, 4 Dec 2024 17:25:30 -0800
Subject: [PATCH 1/2] handle popstate among networked trajectories while on
 viewer path

---
 src/index.tsx | 44 +++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 39 insertions(+), 5 deletions(-)

diff --git a/src/index.tsx b/src/index.tsx
index 5a82cd83..2b87b6d2 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -8,18 +8,22 @@ import { Provider, useDispatch, batch } from "react-redux";
 import { Layout } from "antd";
 import { BrowserRouter, Switch, Route, useLocation } from "react-router-dom";
 
-import { APP_ID } from "./constants";
-
-import { createReduxStore } from "./state";
 import routes, { EMBED_PATHNAME, VIEWER_PATHNAME } from "./routes";
 import ScrollToTop from "./components/ScrollToTop";
 import AppHeader from "./containers/AppHeader";
+import { APP_ID, URL_PARAM_KEY_FILE_NAME } from "./constants";
+import TRAJECTORIES from "./constants/networked-trajectories";
+import { createReduxStore } from "./state";
+import { setIsPlaying } from "./state/viewer/actions";
+import {
+    changeToNetworkedFile,
+    clearSimulariumFile,
+} from "./state/trajectory/actions";
+import { getUrlParamValue } from "./util/userUrlHandling";
 
 const { Header } = Layout;
 
 import "./style.css";
-import { setIsPlaying } from "./state/viewer/actions";
-import { clearSimulariumFile } from "./state/trajectory/actions";
 
 export const store = createReduxStore();
 interface LocationWithState extends Location {
@@ -40,7 +44,37 @@ function useLocationChange() {
                 dispatch(setIsPlaying(false));
                 dispatch(clearSimulariumFile({ newFile: false }));
             });
+            return;
         }
+        const handlePopState = () => {
+            if (window.location.pathname === VIEWER_PATHNAME) {
+                const trajectoryId = getUrlParamValue(
+                    window.location.href,
+                    URL_PARAM_KEY_FILE_NAME
+                );
+                if (trajectoryId) {
+                    const trajectory = TRAJECTORIES.find(
+                        (t) => t.id === trajectoryId
+                    );
+                    if (trajectory) {
+                        batch(() => {
+                            dispatch(setIsPlaying(false));
+                            dispatch(
+                                changeToNetworkedFile({
+                                    name: trajectory.id,
+                                    title: trajectory.title,
+                                })
+                            );
+                        });
+                    }
+                } else {
+                    dispatch(clearSimulariumFile({ newFile: false }));
+                }
+            }
+        };
+
+        window.addEventListener("popstate", handlePopState);
+        return () => window.removeEventListener("popstate", handlePopState);
     }, [location]);
 }
 

From bc171989b1488c9e5fa766831d8e1a7a75c5742e Mon Sep 17 00:00:00 2001
From: Joe Heffernan <interim17@gmail.com>
Date: Wed, 4 Dec 2024 17:40:13 -0800
Subject: [PATCH 2/2] split the two parts of useLocationChange into separate
 useEffect calls

---
 src/index.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/index.tsx b/src/index.tsx
index 2b87b6d2..1b936bad 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -44,8 +44,10 @@ function useLocationChange() {
                 dispatch(setIsPlaying(false));
                 dispatch(clearSimulariumFile({ newFile: false }));
             });
-            return;
         }
+    }, [location]);
+
+    React.useEffect(() => {
         const handlePopState = () => {
             if (window.location.pathname === VIEWER_PATHNAME) {
                 const trajectoryId = getUrlParamValue(
@@ -74,8 +76,10 @@ function useLocationChange() {
         };
 
         window.addEventListener("popstate", handlePopState);
-        return () => window.removeEventListener("popstate", handlePopState);
-    }, [location]);
+        return () => {
+            window.removeEventListener("popstate", handlePopState);
+        };
+    }, []);
 }
 
 const RouterSwitch = () => {