Remove StateStore and ModuleAtoms, add InterfaceEffects and ref…

…actor modules accordingly (equinor#679)
rubenthoms · Aug 20, 2024 · 9a888c2 · 9a888c2
1 parent 5ed7e63
commit 9a888c2
Show file tree

Hide file tree

Showing 223 changed files with 2,385 additions and 5,131 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -35,6 +35,7 @@
         "culori": "^3.2.0",
         "geojson": "^0.5.0",
         "jotai": "^2.6.2",
+        "jotai-effect": "^1.0.0",
         "jotai-scope": "^0.5.1",
         "jotai-tanstack-query": "^0.8.2",
         "lodash": "^4.17.21",

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -44,57 +44,62 @@ enum InitAppState {
 
 const layout: LayoutElement[] = [];
 
-const WORKBENCH = new Workbench();
-
 function App() {
+    // Workbench must be kept as a state in order to keep it when any framework code is changed in dev mode.
+    // Otherwise, the workbench will be reset on every code change. This would cause it to loose its state and will
+    // cause the app to crash.
+    const [workbench] = React.useState(new Workbench());
+
     const [isMounted, setIsMounted] = React.useState<boolean>(false);
     const [initAppState, setInitAppState] = React.useState<InitAppState>(InitAppState.CheckingIfUserIsSignedIn);
 
     const queryClient = useQueryClient();
     const { authState } = useAuthProvider();
 
-    function initApp() {
-        if (!WORKBENCH.loadLayoutFromLocalStorage()) {
-            WORKBENCH.makeLayout(layout);
-        }
-
-        if (WORKBENCH.getLayout().length === 0) {
-            WORKBENCH.getGuiMessageBroker().setState(GuiState.LeftDrawerContent, LeftDrawerContent.ModulesList);
-        } else {
-            WORKBENCH.getGuiMessageBroker().setState(GuiState.LeftDrawerContent, LeftDrawerContent.ModuleSettings);
-        }
-        setInitAppState(InitAppState.InitCompleted);
-        WORKBENCH.getGuiMessageBroker().setState(GuiState.AppInitialized, true);
-    }
-
     function signIn() {
         window.location.href = `/api/login?redirect_url_after_login=${btoa("/")}`;
     }
 
     React.useEffect(
         function handleMountWhenSignedIn() {
+            function initApp() {
+                if (!workbench.loadLayoutFromLocalStorage()) {
+                    workbench.makeLayout(layout);
+                }
+
+                if (workbench.getLayout().length === 0) {
+                    workbench.getGuiMessageBroker().setState(GuiState.LeftDrawerContent, LeftDrawerContent.ModulesList);
+                } else {
+                    workbench
+                        .getGuiMessageBroker()
+                        .setState(GuiState.LeftDrawerContent, LeftDrawerContent.ModuleSettings);
+                }
+                setInitAppState(InitAppState.InitCompleted);
+                workbench.getGuiMessageBroker().setState(GuiState.AppInitialized, true);
+            }
+
             if (authState !== AuthState.LoggedIn || isMounted) {
                 return;
             }
 
             setIsMounted(true);
 
-            const storedEnsembleIdents = WORKBENCH.maybeLoadEnsembleSettingsFromLocalStorage();
+            const storedEnsembleIdents = workbench.maybeLoadEnsembleSettingsFromLocalStorage();
             if (storedEnsembleIdents) {
                 setInitAppState(InitAppState.LoadingEnsembles);
-                WORKBENCH.loadAndSetupEnsembleSetInSession(queryClient, storedEnsembleIdents).finally(() => {
+                workbench.loadAndSetupEnsembleSetInSession(queryClient, storedEnsembleIdents).finally(() => {
                     initApp();
                 });
             } else {
                 initApp();
             }
 
             return function handleUnmount() {
-                WORKBENCH.clearLayout();
-                WORKBENCH.resetModuleInstanceNumbers();
+                workbench.clearLayout();
+                workbench.resetModuleInstanceNumbers();
             };
         },
-        [authState, isMounted, queryClient]
+        [authState, isMounted, queryClient, workbench]
     );
 
     function makeStateMessages() {
@@ -160,12 +165,12 @@ function App() {
                 })}
             >
                 <>
-                    <LeftNavBar workbench={WORKBENCH} />
-                    <SettingsContentPanels workbench={WORKBENCH} />
-                    <RightNavBar workbench={WORKBENCH} />
+                    <LeftNavBar workbench={workbench} />
+                    <SettingsContentPanels workbench={workbench} />
+                    <RightNavBar workbench={workbench} />
                 </>
             </div>
-            <ToggleDevToolsButton guiMessageBroker={WORKBENCH.getGuiMessageBroker()} />
+            <ToggleDevToolsButton guiMessageBroker={workbench.getGuiMessageBroker()} />
         </>
     );
 }