fix: correct dynamic page behavior on lifecycle events

fe-app-podkop/src/podkop/services/socket.service.ts

@@ -18,6 +18,27 @@ class SocketManager {
     return SocketManager.instance;
   }
 
+  resetAll(): void {
+    for (const [url, ws] of this.sockets.entries()) {
+      try {
+        if (
+          ws.readyState === WebSocket.OPEN ||
+          ws.readyState === WebSocket.CONNECTING
+        ) {
+          ws.close();
+        }
+      } catch (err) {
+        console.warn(`resetAll: failed to close socket ${url}`, err);
+      }
+    }
+
+    this.sockets.clear();
+    this.listeners.clear();
+    this.errorListeners.clear();
+    this.connected.clear();
+    console.info('[SocketManager] All connections and state have been reset.');
+  }
+
   connect(url: string): void {
     if (this.sockets.has(url)) return;
 

fe-app-podkop/src/podkop/tabs/dashboard/initController.ts

@@ -38,6 +38,7 @@ async function fetchDashboardSections() {
 }
 
 async function connectToClashSockets() {
+  console.log('[SOCKET] connectToClashSockets');
   socket.subscribe(
     `${getClashWsUrl()}/traffic?token=`,
     (msg) => {
@@ -388,25 +389,60 @@ async function onStoreUpdate(
   }
 }
 
-export async function initController(): Promise<void> {
-  onMount('dashboard-status').then(() => {
-    // Remove old listener
-    store.unsubscribe(onStoreUpdate);
-    // Clear store
-    store.reset([
-      'bandwidthWidget',
-      'trafficTotalWidget',
-      'systemInfoWidget',
-      'servicesInfoWidget',
-      'sectionsWidget',
-    ]);
+async function onPageMount() {
+  // Cleanup before mount
+  onPageUnmount();
 
-    // Add new listener
-    store.subscribe(onStoreUpdate);
+  // Add new listener
+  store.subscribe(onStoreUpdate);
 
-    // Initial sections fetch
-    fetchDashboardSections();
-    fetchServicesInfo();
-    connectToClashSockets();
+  // Initial sections fetch
+  await fetchDashboardSections();
+  await fetchServicesInfo();
+  await connectToClashSockets();
+}
+
+function onPageUnmount() {
+  // Remove old listener
+  store.unsubscribe(onStoreUpdate);
+  // Clear store
+  store.reset([
+    'bandwidthWidget',
+    'trafficTotalWidget',
+    'systemInfoWidget',
+    'servicesInfoWidget',
+    'sectionsWidget',
+  ]);
+  socket.resetAll();
+}
+
+function registerLifecycleListeners() {
+  store.subscribe((next, prev, diff) => {
+    if (
+      diff.tabService &&
+      next.tabService.current !== prev.tabService.current
+    ) {
+      console.log(
+        new Date().toISOString(),
+        '[Active Tab on dashboard]',
+        diff.tabService.current,
+      );
+      const isDashboardVisible = next.tabService.current === 'dashboard';
+
+      if (isDashboardVisible) {
+        return onPageMount();
+      }
+
+      if (!isDashboardVisible) {
+        onPageUnmount();
+      }
+    }
+  });
+}
+
+export async function initController(): Promise<void> {
+  onMount('dashboard-status').then(() => {
+    onPageMount();
+    registerLifecycleListeners();
   });
 }

fe-app-podkop/src/podkop/tabs/diagnostic/initController.ts

@@ -477,31 +477,73 @@ async function runChecks() {
   }
 }
 
-export async function initController(): Promise<void> {
-  onMount('diagnostic-status').then(() => {
-    console.log('diagnostic controller initialized.');
-    // Remove old listener
-    store.unsubscribe(onStoreUpdate);
+function onPageMount() {
+  console.log('diagnostic controller initialized.');
+  // Cleanup before mount
+  onPageUnmount();
 
-    // Add new listener
-    store.subscribe(onStoreUpdate);
+  // Add new listener
+  store.subscribe(onStoreUpdate);
 
-    // Initial checks render
-    renderDiagnosticsChecks();
+  // Initial checks render
+  renderDiagnosticsChecks();
 
-    // Initial run checks action render
-    renderDiagnosticRunActionWidget();
+  // Initial run checks action render
+  renderDiagnosticRunActionWidget();
 
-    // Initial available actions render
-    renderDiagnosticAvailableActionsWidget();
+  // Initial available actions render
+  renderDiagnosticAvailableActionsWidget();
 
-    // Initial system info render
-    renderDiagnosticSystemInfoWidget();
+  // Initial system info render
+  renderDiagnosticSystemInfoWidget();
 
-    // Initial services info fetch
-    fetchServicesInfo();
+  // Initial services info fetch
+  fetchServicesInfo();
 
-    // Initial system info fetch
-    fetchSystemInfo();
+  // Initial system info fetch
+  fetchSystemInfo();
+}
+
+function onPageUnmount() {
+  // Remove old listener
+  store.unsubscribe(onStoreUpdate);
+
+  // Clear store
+  store.reset([
+    'diagnosticsActions',
+    'diagnosticsSystemInfo',
+    'diagnosticsChecks',
+    'diagnosticsRunAction',
+  ]);
+}
+
+function registerLifecycleListeners() {
+  store.subscribe((next, prev, diff) => {
+    if (
+      diff.tabService &&
+      next.tabService.current !== prev.tabService.current
+    ) {
+      console.log(
+        new Date().toISOString(),
+        '[Active Tab on diagnostics]',
+        diff.tabService.current,
+      );
+      const isDashboardVisible = next.tabService.current === 'diagnostic';
+
+      if (isDashboardVisible) {
+        return onPageMount();
+      }
+
+      if (!isDashboardVisible) {
+        onPageUnmount();
+      }
+    }
+  });
+}
+
+export async function initController(): Promise<void> {
+  onMount('diagnostic-status').then(() => {
+    onPageMount();
+    registerLifecycleListeners();
   });
 }