From fa362bed17166f174fb4480d92d2995a457b5e8f Mon Sep 17 00:00:00 2001
From: Quentin Guillemin <quentin.guillemin@recia.fr>
Date: Wed, 28 Feb 2024 13:16:10 +0100
Subject: [PATCH] feat: transform collaborative store into app store

---
 src/main/webapp/src/components/FileMenu.vue   |  6 +--
 .../components/dialogs/ShareInRoomDialog.vue  | 12 +++--
 src/main/webapp/src/stores/appStore.ts        | 45 +++++++++++++++++++
 .../webapp/src/stores/collaborativeStore.ts   | 13 ------
 .../webapp/src/stores/configurationStore.ts   |  6 ---
 src/main/webapp/src/stores/homeStore.ts       |  3 +-
 src/main/webapp/src/views/AppView.vue         |  6 +--
 .../app/tldraw/CollaborativeTldrawView.vue    |  9 ++--
 8 files changed, 63 insertions(+), 37 deletions(-)
 create mode 100644 src/main/webapp/src/stores/appStore.ts
 delete mode 100644 src/main/webapp/src/stores/collaborativeStore.ts

diff --git a/src/main/webapp/src/components/FileMenu.vue b/src/main/webapp/src/components/FileMenu.vue
index fbf1f119..46d7af42 100644
--- a/src/main/webapp/src/components/FileMenu.vue
+++ b/src/main/webapp/src/components/FileMenu.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useConfigurationStore } from '@/stores/configurationStore.ts';
+import { useAppStore } from '@/stores/appStore.ts';
 import { useFileStore } from '@/stores/fileStore.ts';
 import { useHomeStore } from '@/stores/homeStore.ts';
 import { Tabs } from '@/types/enums/Tabs.ts';
@@ -11,8 +11,8 @@ import { useI18n } from 'vue-i18n';
 
 const isDev = import.meta.env.DEV;
 
-const configurationStore = useConfigurationStore();
-const { isApp } = storeToRefs(configurationStore);
+const appStore = useAppStore();
+const { isApp } = storeToRefs(appStore);
 
 const fileStore = useFileStore();
 const { loadFile } = fileStore;
diff --git a/src/main/webapp/src/components/dialogs/ShareInRoomDialog.vue b/src/main/webapp/src/components/dialogs/ShareInRoomDialog.vue
index 8d7c56fd..6cb04f1a 100644
--- a/src/main/webapp/src/components/dialogs/ShareInRoomDialog.vue
+++ b/src/main/webapp/src/components/dialogs/ShareInRoomDialog.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import { useCollaborativeStore } from '@/stores/collaborativeStore.ts';
+import { useAppStore } from '@/stores/appStore.ts';
 import { useFileStore } from '@/stores/fileStore.ts';
 import { useHomeStore } from '@/stores/homeStore.ts';
+import type { AppSlug } from '@/types/enums/AppSlug.ts';
 import { charOTP } from '@/utils/stringUtils.ts';
 import debounce from 'lodash.debounce';
 import { storeToRefs } from 'pinia';
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
 
-const collaborativeStore = useCollaborativeStore();
-const { initFileId } = storeToRefs(collaborativeStore);
+const appStore = useAppStore();
+const { initRoom } = appStore;
 
 const fileStore = useFileStore();
 const { file } = storeToRefs(fileStore);
@@ -19,7 +19,6 @@ const homeStore = useHomeStore();
 const { isShareInRoom } = storeToRefs(homeStore);
 
 const { t } = useI18n();
-const router = useRouter();
 
 const modelValue = computed<boolean>({
   get() {
@@ -32,9 +31,8 @@ const joinCode = ref<string>(charOTP());
 
 const onCreateAndJoin = (): void => {
   if (file.value == undefined) return;
-  initFileId.value = file.value.id;
-  router.push({ name: `collaborative-${file.value.associatedApp.slug}`, params: { roomId: joinCode.value } });
   onClose();
+  initRoom(joinCode.value, file.value.associatedApp.slug as AppSlug, file.value.id, false);
 };
 
 const onClose = (): void => {
diff --git a/src/main/webapp/src/stores/appStore.ts b/src/main/webapp/src/stores/appStore.ts
new file mode 100644
index 00000000..2d6fe746
--- /dev/null
+++ b/src/main/webapp/src/stores/appStore.ts
@@ -0,0 +1,45 @@
+import type { AppSlug } from '@/types/enums/AppSlug.ts';
+import { useSessionStorage } from '@vueuse/core';
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+export const useAppStore = defineStore('app', () => {
+  const router = useRouter();
+
+  /**
+   * App context state
+   */
+  const isApp = ref<boolean>(false);
+
+  /* -- Rooms -- */
+
+  const ownedRooms = useSessionStorage<
+    Array<{ roomId: string; appType: AppSlug; fileId: number | undefined; saveOnFile: boolean }>
+  >(`${__APP_SLUG__}.owned-rooms`, []);
+
+  /**
+   * Id of file to load in the room
+   */
+  const initFileId = ref<number | undefined>();
+
+  const initRoom = (roomId: string, appType: AppSlug, fileId: number | undefined, saveOnFile: boolean): void => {
+    initFileId.value = fileId;
+    ownedRooms.value.push({ roomId, appType, fileId, saveOnFile });
+    router.push({ name: `collaborative-${appType}`, params: { roomId } });
+  };
+
+  /* -- Store actions -- */
+
+  const reset = (): void => {
+    initFileId.value = undefined;
+  };
+
+  return {
+    isApp,
+    ownedRooms,
+    initFileId,
+    initRoom,
+    reset,
+  };
+});
diff --git a/src/main/webapp/src/stores/collaborativeStore.ts b/src/main/webapp/src/stores/collaborativeStore.ts
deleted file mode 100644
index 09b81b23..00000000
--- a/src/main/webapp/src/stores/collaborativeStore.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { defineStore } from 'pinia';
-import { ref } from 'vue';
-
-export const useCollaborativeStore = defineStore('collaborative', () => {
-  /**
-   * Id of file to load in the room
-   */
-  const initFileId = ref<number | undefined>();
-
-  return {
-    initFileId,
-  };
-});
diff --git a/src/main/webapp/src/stores/configurationStore.ts b/src/main/webapp/src/stores/configurationStore.ts
index d17618bf..75bf6b54 100644
--- a/src/main/webapp/src/stores/configurationStore.ts
+++ b/src/main/webapp/src/stores/configurationStore.ts
@@ -40,11 +40,6 @@ export const useConfigurationStore = defineStore('configuration', () => {
 
   const lastNavigation = ref<string | undefined>();
 
-  /**
-   * App context state
-   */
-  const isApp = ref<boolean>(false);
-
   /**
    * Dialog settings state
    */
@@ -58,7 +53,6 @@ export const useConfigurationStore = defineStore('configuration', () => {
     user,
     isSoffitOk,
     lastNavigation,
-    isApp,
     isSettings,
   };
 });
diff --git a/src/main/webapp/src/stores/homeStore.ts b/src/main/webapp/src/stores/homeStore.ts
index 8c1a4cfb..1e99a671 100644
--- a/src/main/webapp/src/stores/homeStore.ts
+++ b/src/main/webapp/src/stores/homeStore.ts
@@ -1,5 +1,6 @@
 import { useFileStore } from '@/stores/fileStore.ts';
 import { Tabs } from '@/types/enums/Tabs.ts';
+import { useSessionStorage } from '@vueuse/core';
 import { defineStore, storeToRefs } from 'pinia';
 import { computed, ref } from 'vue';
 
@@ -55,7 +56,7 @@ export const useHomeStore = defineStore('home', () => {
   /**
    * Files diplay state
    */
-  const isGrid = ref<boolean>(false);
+  const isGrid = useSessionStorage<boolean>(`${__APP_SLUG__}.is-grid`, false);
 
   /* -- Store actions -- */
 
diff --git a/src/main/webapp/src/views/AppView.vue b/src/main/webapp/src/views/AppView.vue
index 589b3481..660b8e5e 100644
--- a/src/main/webapp/src/views/AppView.vue
+++ b/src/main/webapp/src/views/AppView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import FileMenu from '@/components/FileMenu.vue';
 import InformationDrawer from '@/components/drawers/information/InformationDrawer.vue';
-import { useConfigurationStore } from '@/stores/configurationStore.ts';
+import { useAppStore } from '@/stores/appStore.ts';
 import { useFileStore } from '@/stores/fileStore.ts';
 import { useHomeStore } from '@/stores/homeStore.ts';
 import { Navigation } from '@/types/enums/Navigation.ts';
@@ -13,8 +13,8 @@ import { useRoute, useRouter } from 'vue-router';
 
 const isDev = import.meta.env.DEV;
 
-const configurationStore = useConfigurationStore();
-const { isApp } = storeToRefs(configurationStore);
+const appStore = useAppStore();
+const { isApp } = storeToRefs(appStore);
 
 const fileStore = useFileStore();
 const { loadFile } = fileStore;
diff --git a/src/main/webapp/src/views/app/tldraw/CollaborativeTldrawView.vue b/src/main/webapp/src/views/app/tldraw/CollaborativeTldrawView.vue
index 0629f609..28aaa2fb 100644
--- a/src/main/webapp/src/views/app/tldraw/CollaborativeTldrawView.vue
+++ b/src/main/webapp/src/views/app/tldraw/CollaborativeTldrawView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useCollaborativeStore } from '@/stores/collaborativeStore.ts';
+import { useAppStore } from '@/stores/appStore.ts';
 import { useConfigurationStore } from '@/stores/configurationStore.ts';
 import { AppSlug } from '@/types/enums/AppSlug.ts';
 import { headObserver, styleObserver } from '@/utils/tldrawUtils.ts';
@@ -13,8 +13,9 @@ const { VITE_API_URI } = import.meta.env;
 const configurationStore = useConfigurationStore();
 const { configuration } = configurationStore;
 
-const collaborativeStore = useCollaborativeStore();
-const { initFileId } = storeToRefs(collaborativeStore);
+const appStore = useAppStore();
+const { reset: resetApp } = appStore;
+const { initFileId } = storeToRefs(appStore);
 
 const route = useRoute();
 const router = useRouter();
@@ -28,7 +29,7 @@ onMounted(() => {
 });
 
 onUnmounted(() => {
-  initFileId.value = undefined;
+  resetApp();
   styleObserver.disconnect();
   headObserver.disconnect();
   router.go(0); // force page reload to disconnect websocket