Bug fixes to ensure subscriptions are properly closed or are self-clo…

…sing.
codeplaysoftware · Sep 27, 2024 · 7aa4ecd · 7aa4ecd
1 parent 6c9af63
commit 7aa4ecd
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 19 deletions.
diff --git a/src/app/pages/playground/popups/load-and-save/load-and-save-popup.component.ts b/src/app/pages/playground/popups/load-and-save/load-and-save-popup.component.ts
@@ -19,7 +19,7 @@
 import { ChangeDetectionStrategy, Component, Inject, OnInit, signal, WritableSignal } from '@angular/core';
 import { LoadingComponent } from '../../../../shared/components/loading/loading.component';
 import { DatePipe } from '@angular/common';
-import { tap } from 'rxjs';
+import { take, tap } from 'rxjs';
 import { PopupReference } from '../../../../shared/components/popup/popup.service';
 import { RouterLink } from '@angular/router';
 import { SafeStorageService } from '../../../../shared/services/safe-storage.service';
@@ -58,16 +58,18 @@ export class LoadAndSavePopupComponent implements OnInit {
    * @inheritDoc
    */
   ngOnInit(): void {
-    this.safeStorageService.observe().pipe(
-      tap(() => {
-        this.storageEnabled.set(this.safeStorageService.allowed());
-
-        if (this.safeStorageService.has(LoadAndSavePopupComponent.storageKey)) {
-          const saved = this.safeStorageService.get(LoadAndSavePopupComponent.storageKey);
-          this.saved.set(saved.reverse());
-        }
-      }
-    )).subscribe();
+    this.safeStorageService.observe()
+      .pipe(
+        tap(() => {
+          this.storageEnabled.set(this.safeStorageService.allowed());
+
+          if (this.safeStorageService.has(LoadAndSavePopupComponent.storageKey)) {
+            const saved = this.safeStorageService.get(LoadAndSavePopupComponent.storageKey);
+            this.saved.set(saved.reverse());
+          }
+        }),
+        take(1))
+      .subscribe();
   }
 
   /**

diff --git a/src/app/pages/settings/settings.component.ts b/src/app/pages/settings/settings.component.ts
@@ -16,10 +16,10 @@
  *
  *--------------------------------------------------------------------------------------------*/
 
-import { ChangeDetectionStrategy, Component, signal, WritableSignal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnDestroy, OnInit, signal, WritableSignal } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { SwitchComponent } from '../../shared/components/switch/switch.component';
-import { tap } from 'rxjs';
+import { Subscription, tap } from 'rxjs';
 import { Title } from '@angular/platform-browser';
 import { SafeStorageService } from '../../shared/services/safe-storage.service';
 
@@ -34,12 +34,14 @@ import { SafeStorageService } from '../../shared/services/safe-storage.service';
   styleUrl: './settings.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class SettingsComponent {
+export class SettingsComponent implements OnInit, OnDestroy {
   protected enableStorage: WritableSignal<boolean> = signal(false);
   protected enableDarkMode: WritableSignal<boolean> = signal(false);
   protected enableTracking: WritableSignal<boolean> = signal(false);
   protected enableAlerts: WritableSignal<boolean> = signal(false);
 
+  protected storageSubscription?: Subscription;
+
   /**
    * Constructor.
    * @param title
@@ -50,8 +52,13 @@ export class SettingsComponent {
     protected safeStorageService: SafeStorageService,
   ) {
     this.title.setTitle('Settings - SYCL.tech');
+  }
 
-    safeStorageService.observe().pipe(
+  /**
+   * @inheritdoc
+   */
+  ngOnInit(): void {
+    this.storageSubscription = this.safeStorageService.observe().pipe(
       tap((state) => {
         this.enableStorage.set(state['st-cookies-accepted'] == true);
         this.enableDarkMode.set(state['st-dark-mode-enabled'] == true);
@@ -61,6 +68,13 @@ export class SettingsComponent {
     ).subscribe();
   }
 
+  /**
+   * @inheritdoc
+   */
+  ngOnDestroy(): void {
+    this.storageSubscription?.unsubscribe();
+  }
+
   /**
    * Called when a user changes any of the settings.
    */

diff --git a/src/app/shared/components/site-wide-alert/alerts.component.ts b/src/app/shared/components/site-wide-alert/alerts.component.ts
@@ -18,14 +18,14 @@
 
 import {
   ChangeDetectionStrategy,
-  Component,
+  Component, OnDestroy,
   OnInit,
   signal,
   WritableSignal
 } from '@angular/core';
 import { Alert, AlertService } from '../../services/alert.service';
 import { RouterLink } from '@angular/router';
-import { tap } from 'rxjs';
+import { Subscription, tap } from 'rxjs';
 import { PlatformService } from '../../services/platform.service';
 import { SafeStorageService } from '../../services/safe-storage.service';
 import { animate, style, transition, trigger } from '@angular/animations';
@@ -53,13 +53,19 @@ import { CommonModule } from '@angular/common';
   ])
 ],
 })
-export class AlertsComponent implements OnInit {
+export class AlertsComponent implements OnInit, OnDestroy {
   /**
    * The signal to store the currently visible alert for rendering via the template.
    * @protected
    */
   protected alerts: WritableSignal<Alert[]> = signal([]);
 
+  /**
+   * Subscription to track alerts.
+   * @protected
+   */
+  protected alertSubscription?: Subscription;
+
   /**
    * Constructor.
    * @param platformService
@@ -80,7 +86,7 @@ export class AlertsComponent implements OnInit {
       return;
     }
 
-    this.alertService.observe()
+    this.alertSubscription = this.alertService.observe()
       .pipe(
         tap((alerts) => {
           this.alerts.set(alerts);
@@ -89,6 +95,13 @@ export class AlertsComponent implements OnInit {
       .subscribe();
   }
 
+  /**
+   * @inheritdoc
+   */
+  ngOnDestroy() {
+    this.alertSubscription?.unsubscribe();
+  }
+
   /**
    * Called when a user chooses to block/hide an alert.
    * @param alert