From c9213577afbcc219bbf13110163758b07a63facd Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Wed, 8 Nov 2023 10:21:09 +0000
Subject: [PATCH] refactor to move modal and associated logic to WodinApp

---
 app/static/src/app/components/WodinApp.vue    | 41 ++++++++++++++++-
 .../src/app/components/WodinSession.vue       | 46 ++++---------------
 app/static/src/app/store/appState/actions.ts  | 14 +-----
 .../src/app/store/appState/mutations.ts       |  1 +
 app/static/src/app/store/appState/state.ts    |  1 +
 app/static/src/app/types/payloadTypes.ts      |  3 +-
 6 files changed, 55 insertions(+), 51 deletions(-)

diff --git a/app/static/src/app/components/WodinApp.vue b/app/static/src/app/components/WodinApp.vue
index 761194aeb..85af079a3 100644
--- a/app/static/src/app/components/WodinApp.vue
+++ b/app/static/src/app/components/WodinApp.vue
@@ -1,4 +1,7 @@
 <template>
+    <session-initialise-modal v-if="!sessionInitialised && !immediateInitialise"
+                            @new-session="newSession"
+                            @reload-session="reloadSession"></session-initialise-modal>
     <div class="container">
         <div class="row">
             <div class="col-12">
@@ -21,8 +24,12 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from "vue";
+import {
+    computed, defineComponent
+} from "vue";
 import { useStore } from "vuex";
+import SessionInitialiseModal from "./SessionInitialiseModal.vue";
+import { AppStateAction } from "../store/appState/actions";
 import ErrorsAlert from "./ErrorsAlert.vue";
 import WodinPanels from "./WodinPanels.vue";
 import LoadingSpinner from "./LoadingSpinner.vue";
@@ -30,6 +37,7 @@ import LoadingSpinner from "./LoadingSpinner.vue";
 export default defineComponent({
     name: "WodinApp",
     components: {
+        SessionInitialiseModal,
         LoadingSpinner,
         ErrorsAlert,
         WodinPanels
@@ -40,9 +48,38 @@ export default defineComponent({
         const appType = computed(() => store.state.appType);
         const loading = computed(() => !store.state.config);
 
+        const sessionInitialised = computed(() => store.state.configured);
+        const latestSessionId = computed(() => store.state.sessions.latestSessionId);
+        const loadSessionId = computed(() => store.state.loadSessionId);
+
+        const initialise = (sessionId: string, copySession = true) => {
+            store.dispatch(AppStateAction.InitialiseSession, { loadSessionId: sessionId, copySession });
+        };
+
+        // If there's a load (share) session id, then immediately initialise with that
+        // If there is no latest session id then immediately initialise a new session - display modal conditional on
+        // this value as well as sessionInitialised to avoid momentary display of modal when this is true.
+        const immediateInitialise = computed(() => loadSessionId.value || !latestSessionId.value);
+
+        if (immediateInitialise.value) {
+            initialise(loadSessionId.value || "");
+        }
+
+        const newSession = () => {
+            initialise("");
+        };
+
+        const reloadSession = () => {
+            initialise(latestSessionId.value!, false);
+        };
+
         return {
             appType,
-            loading
+            loading,
+            sessionInitialised,
+            immediateInitialise,
+            newSession,
+            reloadSession
         };
     }
 });
diff --git a/app/static/src/app/components/WodinSession.vue b/app/static/src/app/components/WodinSession.vue
index d2372d5be..233f70104 100644
--- a/app/static/src/app/components/WodinSession.vue
+++ b/app/static/src/app/components/WodinSession.vue
@@ -1,8 +1,5 @@
 <template>
-  <session-initialise-modal v-if="appInitialised && !sessionInitialised && !isSessionsRoute"
-                            @new-session="newSession"
-                            @reload-session="reloadSession"></session-initialise-modal>
-  <router-view v-if="appInitialised"></router-view>
+  <router-view v-if="initialised"></router-view>
 </template>
 
 <script lang="ts">
@@ -12,7 +9,6 @@ import {
 } from "vue";
 import { RouterView } from "vue-router";
 import { useStore } from "vuex";
-import SessionInitialiseModal from "./SessionInitialiseModal.vue";
 import { AppStateAction } from "../store/appState/actions";
 import { ErrorsMutation } from "../store/errors/mutations";
 import { localStorageManager } from "../localStorageManager";
@@ -32,17 +28,14 @@ export default defineComponent({
         defaultLanguage: String
     },
     components: {
-        SessionInitialiseModal,
         RouterView
     },
     setup(props) {
         const store = useStore();
 
-        const path = new URL(window.location.href).pathname;
-        const isSessionsRoute = !!path.match(/\/sessions\/?$/);
-        const sessionInitialised = ref(false);
+        const initialised = ref(false);
         const appInitialised = computed(() => !!store.state.config && !!store.state.sessions.sessionsMetadata);
-        const latestSessionId = computed(() => store.state.sessions.latestSessionId);
+
 
         // These props won't change as provided by server
         // eslint-disable-next-line vue/no-setup-props-destructure
@@ -60,7 +53,8 @@ export default defineComponent({
             baseUrl,
             appsPath,
             enableI18n,
-            defaultLanguage
+            defaultLanguage,
+            loadSessionId
         });
 
         onMounted(() => {
@@ -70,14 +64,9 @@ export default defineComponent({
             }
         });
 
-        const initialise = (sessionId: string, copySession = true) => {
-            store.dispatch(AppStateAction.InitialiseSession, { loadSessionId: sessionId, copySession });
-            sessionInitialised.value = true;
-        };
-
-        watch(appInitialised, (newValue) => {
-            // We don't need to show session initialise modal if we have a  loadSessionId (loading from share) or if
-            // there are no previous sessions - initialise as soon as config available
+        watch(appInitialised, () => {
+            // Child component will either be SessionsPage or WodinApp depending on route - both will need the latest
+            // session id so delay rendering these until this has been committed
             const baseUrlPath = store.getters[AppStateGetter.baseUrlPath];
             const sessions = localStorageManager.getSessionIds(store.state.appName, baseUrlPath);
             const sessionId = sessions.length ? sessions[0] : null;
@@ -87,26 +76,11 @@ export default defineComponent({
             if (sessionAvailable) {
                 store.commit(`sessions/${SessionsMutation.SetLatestSessionId}`, sessionId);
             }
-
-            if (newValue && (loadSessionId || !latestSessionId.value)) {
-                initialise(loadSessionId || "");
-            }
+            initialised.value = true;
         });
 
-        const newSession = () => {
-            initialise("");
-        };
-
-        const reloadSession = () => {
-            initialise(latestSessionId.value!, false);
-        };
-
         return {
-            sessionInitialised,
-            appInitialised,
-            isSessionsRoute,
-            newSession,
-            reloadSession
+            initialised
         };
     }
 });
diff --git a/app/static/src/app/store/appState/actions.ts b/app/static/src/app/store/appState/actions.ts
index e04875aba..893fed650 100644
--- a/app/static/src/app/store/appState/actions.ts
+++ b/app/static/src/app/store/appState/actions.ts
@@ -38,19 +38,9 @@ export const appStateActions: ActionTree<AppState, AppState> = {
     async [AppStateAction.InitialiseApp](context, payload: InitialiseAppPayload) {
         const { commit, dispatch } = context;
         const {
-            appName,
-            baseUrl,
-            appsPath,
-            enableI18n,
-            defaultLanguage
+            appName
         } = payload;
-        commit(AppStateMutation.SetApp, {
-            appName,
-            baseUrl,
-            appsPath,
-            enableI18n,
-            defaultLanguage
-        });
+        commit(AppStateMutation.SetApp, payload);
 
         const response = await api(context)
             .freezeResponse()
diff --git a/app/static/src/app/store/appState/mutations.ts b/app/static/src/app/store/appState/mutations.ts
index 13025457e..ac44ebe56 100644
--- a/app/static/src/app/store/appState/mutations.ts
+++ b/app/static/src/app/store/appState/mutations.ts
@@ -33,6 +33,7 @@ export const appStateMutations: MutationTree<AppState> = {
         state.appsPath = payload.appsPath;
         state.language.currentLanguage = payload.defaultLanguage;
         state.language.enableI18n = payload.enableI18n;
+        state.loadSessionId = payload.loadSessionId;
         registerTranslations(state.language, collectedTranslations);
     },
 
diff --git a/app/static/src/app/store/appState/state.ts b/app/static/src/app/store/appState/state.ts
index 7a6759853..1abec334f 100644
--- a/app/static/src/app/store/appState/state.ts
+++ b/app/static/src/app/store/appState/state.ts
@@ -35,6 +35,7 @@ export interface AppState {
     baseUrl: null | string,
     appsPath: null | string,
     appType: AppType
+    loadSessionId: null | string, // if sharing a session, this is the id of the session to share (copy)
     openVisualisationTab: VisualisationTab
     queuedStateUploadIntervalId: number
     stateUploadInProgress: boolean
diff --git a/app/static/src/app/types/payloadTypes.ts b/app/static/src/app/types/payloadTypes.ts
index 22e199891..93b6b7bf1 100644
--- a/app/static/src/app/types/payloadTypes.ts
+++ b/app/static/src/app/types/payloadTypes.ts
@@ -8,7 +8,8 @@ export interface InitialiseAppPayload {
     baseUrl: string
     appsPath: string,
     enableI18n: boolean,
-    defaultLanguage: Language
+    defaultLanguage: Language,
+    loadSessionId: string | null
 }
 
 export interface InitialiseSessionPayload {