implement view persistence class to prevent junk subscriptions

src/View/ChatPages/boardPage.tsx

@@ -13,6 +13,7 @@ import { TaskSettingsModal } from "../Modals/taskSettingsModal";
 import { TaskViewModelToEntry } from "../Components/taskEntry";
 import { setFocusWithDelay } from "../utility";
 import CoreViewModel from "../../ViewModel/Global/coreViewModel";
+import { ViewPersistence } from "../viewPersistence";
 
 export function BoardPage(
     coreViewModel: CoreViewModel,
@@ -21,7 +22,8 @@ export function BoardPage(
     boardViewModel.loadData();
 
     // main content
-    const mainContent = React.createProxyState(
+    const persistenceId = boardViewModel.boardInfo.fileId;
+    const pages = ViewPersistence.boardPages.setPages(persistenceId, ()=>React.createProxyState(
         [boardViewModel.selectedPage],
         () => {
             switch (boardViewModel.selectedPage.value) {
@@ -44,7 +46,7 @@ export function BoardPage(
                 }
             }
         },
-    );
+    ));
 
     // task modal
     const taskSettingsModal = React.createProxyState(
@@ -150,7 +152,7 @@ export function BoardPage(
                     </button>
                 </span>
             </div>
-            <div class="content main-content" children:set={mainContent}></div>
+            <div class="content main-content" children:set={pages}></div>
 
             {BoardSettingsModal(coreViewModel, boardViewModel)}
             {SearchModal(

src/View/ChatPages/taskPage.tsx

@@ -7,6 +7,8 @@ import { BoardViewModelToEntry } from "../Components/boardEntry";
 import TaskPageViewModel from "../../ViewModel/Pages/taskPageViewModel";
 import CoreViewModel from "../../ViewModel/Global/coreViewModel";
 import { PlaceholderView } from "../Components/placeholderView";
+import { v4 } from "uuid";
+import { ViewPersistence } from "../viewPersistence";
 
 export function TaskPage(
     coreViewModel: CoreViewModel,
@@ -19,7 +21,8 @@ export function TaskPage(
         () => taskPageViewModel.selectedBoardId.value != undefined,
     );
 
-    const paneContent = React.createProxyState(
+    const persistenceId = taskPageViewModel.chatViewModel.chatModel.id;
+    const pages = ViewPersistence.taskPages.setPages(persistenceId, ()=>React.createProxyState(
         [taskPageViewModel.selectedBoardId],
         () => {
             const selectedBoardId = taskPageViewModel.selectedBoardId.value;
@@ -45,7 +48,7 @@ export function TaskPage(
 
             return BoardPage(coreViewModel, selectedBoard);
         },
-    );
+    ));
 
     return (
         <div
@@ -100,7 +103,7 @@ export function TaskPage(
             <div
                 id="board-content"
                 class="pane-wrapper"
-                children:set={paneContent}
+                children:set={pages}
             ></div>
         </div>
     );

src/View/chatPage.tsx

@@ -10,12 +10,13 @@ import { MessagePage } from "./ChatPages/messagePage";
 import { SettingsPage } from "./ChatPages/settingsPage";
 import { TaskPage } from "./ChatPages/taskPage";
 import CoreViewModel from "../ViewModel/Global/coreViewModel";
+import { ViewPersistence } from "./viewPersistence";
 
 export function ChatPage(
     coreViewModel: CoreViewModel,
     chatViewModel: ChatViewModel,
 ) {
-    const mainContent = React.createProxyState(
+    ViewPersistence.chatPages.pages = React.createProxyState(
         [chatViewModel.selectedPage],
         () => {
             switch (chatViewModel.selectedPage.value) {
@@ -129,7 +130,7 @@ export function ChatPage(
                         )}
                     </span>
                 </div>
-                <div id="main" children:set={mainContent}></div>
+                <div id="main" children:set={ViewPersistence.chatPages.pages}></div>
             </div>
         </article>
     );

src/View/viewPersistence.ts

@@ -0,0 +1,35 @@
+import * as React from "bloatless-react";
+
+class PageTracker {
+    pages: React.State<HTMLElement | undefined> | undefined;
+}
+
+class PageTrackerMap {
+    trackers = new Map<string, PageTracker>();
+
+    private register = (key: string): PageTracker => {
+        if (this.trackers.has(key)) {
+            return this.trackers.get(key);
+        };
+        const tracker = new PageTracker();
+        this.trackers.set(key, tracker);
+        return tracker
+    }
+
+    setPages = (key: string, pages: () => React.State<HTMLElement>): React.State<HTMLElement | undefined> | undefined => {
+        const tracker: PageTracker = this.register(key);
+
+        if (tracker.pages != undefined) {
+            return tracker.pages;
+        } else {
+            tracker.pages = pages();
+            return tracker.pages;
+        }
+    }
+}
+
+export class ViewPersistence {
+    static readonly chatPages = new PageTracker();
+    static readonly taskPages = new PageTrackerMap();
+    static readonly boardPages = new PageTrackerMap();
+}