Add unsubscribe handling in existing components (#14)

perryr16 · web-flow · commit 4abbca5fac8c · 2025-02-17T09:36:02.000-07:00
* component unsubscribe

* takeuntil, move subscribe logic to tap

* keep logic out of subscribe

* index for errorservice
diff --git a/src/@seed/api/cycle/cycle.service.ts b/src/@seed/api/cycle/cycle.service.ts
@@ -2,9 +2,9 @@ import type { HttpErrorResponse } from '@angular/common/http'
 import { HttpClient } from '@angular/common/http'
 import { inject, Injectable } from '@angular/core'
 import type { Observable } from 'rxjs'
-import { BehaviorSubject, catchError, map, tap } from 'rxjs'
+import { BehaviorSubject, catchError, map, switchMap, tap } from 'rxjs'
 import { OrganizationService } from '@seed/api/organization'
-import { ErrorService } from '@seed/services/error/error.service'
+import { ErrorService } from '@seed/services'
 import { SnackbarService } from 'app/core/snackbar/snackbar.service'
 import type { Cycle, CycleResponse, CyclesResponse } from './cycle.types'
 
@@ -20,24 +20,25 @@ export class CycleService {
   cycles$ = this._cycles.asObservable()
 
   get(): void {
-    // fetch current organization
-    this._organizationService.currentOrganization$.subscribe(({ org_id }) => {
-      this.orgId = org_id
-      const url = `/api/v3/cycles/?organization_id=${org_id}`
-      // fetch cycles
-      this._httpClient
-        .get<CyclesResponse>(url)
-        .pipe(
-          map((response) => response.cycles),
-          tap((cycles) => {
-            this._cycles.next(cycles)
-          }),
-          catchError((error: HttpErrorResponse) => {
-            return this._errorService.handleError(error, 'Error fetching cycles')
-          }),
-        )
-        .subscribe()
-    })
+    this._organizationService.currentOrganization$
+      .pipe(
+        tap(({ org_id }) => { this.orgId = org_id }),
+        switchMap(({ org_id }) => {
+          const url = `/api/v3/cycles/?organization_id=${org_id}`
+          // fetch cycles
+          return this._httpClient
+            .get<CyclesResponse>(url)
+            .pipe(
+              map((response) => response.cycles),
+              tap((cycles) => {
+                this._cycles.next(cycles)
+              }),
+              catchError((error: HttpErrorResponse) => {
+                return this._errorService.handleError(error, 'Error fetching cycles')
+              }),
+            )
+        }),
+      ).subscribe()
   }
 
   post({ data, orgId }): Observable<CycleResponse | null> {
diff --git a/src/@seed/api/organization/organization.service.ts b/src/@seed/api/organization/organization.service.ts
@@ -3,7 +3,7 @@ import { HttpClient } from '@angular/common/http'
 import { inject, Injectable } from '@angular/core'
 import type { Observable } from 'rxjs'
 import { catchError, map, of, ReplaySubject, Subject, takeUntil, tap } from 'rxjs'
-import { ErrorService } from '@seed/services/error/error.service'
+import { ErrorService } from '@seed/services'
 import { SnackbarService } from 'app/core/snackbar/snackbar.service'
 import { naturalSort } from '../../utils'
 import { UserService } from '../user'
diff --git a/src/@seed/api/user/user.service.ts b/src/@seed/api/user/user.service.ts
@@ -11,7 +11,7 @@ import type {
   SetDefaultOrganizationResponse,
   UserUpdateRequest,
 } from '@seed/api/user'
-import { ErrorService } from '@seed/services/error/error.service'
+import { ErrorService } from '@seed/services'
 
 @Injectable({ providedIn: 'root' })
 export class UserService {
diff --git a/src/@seed/services/error/index.ts b/src/@seed/services/error/index.ts
@@ -0,0 +1 @@
+export * from './error.service'
diff --git a/src/@seed/services/index.ts b/src/@seed/services/index.ts
@@ -1,5 +1,6 @@
 export * from './config'
 export * from './confirmation'
+export * from './error'
 export * from './loading'
 export * from './media-watcher'
 export * from './platform'
diff --git a/src/app/modules/organizations/cycles/cycles.component.ts b/src/app/modules/organizations/cycles/cycles.component.ts
@@ -1,10 +1,11 @@
 import { CommonModule } from '@angular/common'
-import type { OnInit } from '@angular/core'
+import type { OnDestroy, OnInit } from '@angular/core'
 import { Component, inject } from '@angular/core'
 import { MatButtonModule } from '@angular/material/button'
 import { MatDialog, MatDialogModule } from '@angular/material/dialog'
 import { MatIconModule } from '@angular/material/icon'
 import { MatTableDataSource, MatTableModule } from '@angular/material/table'
+import { Subject, takeUntil, tap } from 'rxjs'
 import type { Cycle } from '@seed/api/cycle'
 import { CycleService } from '@seed/api/cycle/cycle.service'
 import { PageComponent, TableContainerComponent } from '@seed/components'
@@ -26,11 +27,12 @@ import { FormModalComponent } from './modal/form-modal.component'
     TableContainerComponent,
   ],
 })
-export class CyclesComponent implements OnInit {
+export class CyclesComponent implements OnDestroy, OnInit {
   private _cycleService = inject(CycleService)
   private _dialog = inject(MatDialog)
   private _orgId: number
   private _existingNames: string[]
+  private readonly _unsubscribeAll$ = new Subject<void>()
 
   cyclesDataSource = new MatTableDataSource<Cycle>([])
   cyclesColumns = ['id', 'name', 'start', 'end', 'actions']
@@ -42,11 +44,15 @@ export class CyclesComponent implements OnInit {
   refreshCycles(): void {
     this._cycleService.get()
 
-    this._cycleService.cycles$.subscribe((cycles) => {
-      this.cyclesDataSource.data = cycles
-      this._orgId = cycles[0]?.organization
-      this._existingNames = cycles.map((cycle) => cycle.name)
-    })
+    this._cycleService.cycles$
+      .pipe(
+        takeUntil(this._unsubscribeAll$),
+        tap((cycles) => {
+          this.cyclesDataSource.data = cycles
+          this._orgId = cycles[0]?.organization
+          this._existingNames = cycles.map((cycle) => cycle.name)
+        }),
+      ).subscribe()
   }
 
   createCycle = () => {
@@ -55,9 +61,11 @@ export class CyclesComponent implements OnInit {
       data: { cycle: null, orgId: this._orgId, existingNames: this._existingNames },
     })
 
-    dialogRef.afterClosed().subscribe(() => {
-      this.refreshCycles()
-    })
+    dialogRef.afterClosed()
+      .pipe(
+        takeUntil(this._unsubscribeAll$),
+        tap(() => { this.refreshCycles() }),
+      ).subscribe()
   }
 
   editCycle(cycle: Cycle): void {
@@ -66,9 +74,11 @@ export class CyclesComponent implements OnInit {
       data: { cycle, orgId: this._orgId, existingNames: this._existingNames },
     })
 
-    dialogRef.afterClosed().subscribe(() => {
-      this.refreshCycles()
-    })
+    dialogRef.afterClosed()
+      .pipe(
+        takeUntil(this._unsubscribeAll$),
+        tap(() => { this.refreshCycles() }),
+      ).subscribe()
   }
 
   deleteCycle(cycle: Cycle): void {
@@ -77,12 +87,19 @@ export class CyclesComponent implements OnInit {
       data: { cycle, orgId: this._orgId },
     })
 
-    dialogRef.afterClosed().subscribe(() => {
-      this.refreshCycles()
-    })
+    dialogRef.afterClosed()
+      .pipe(
+        takeUntil(this._unsubscribeAll$),
+        tap(() => { this.refreshCycles() }),
+      ).subscribe()
   }
 
   trackByFn(_index: number, { id }: Cycle) {
     return id
   }
+
+  ngOnDestroy(): void {
+    this._unsubscribeAll$.next()
+    this._unsubscribeAll$.complete()
+  }
 }
diff --git a/src/app/modules/organizations/cycles/modal/delete-modal.component.ts b/src/app/modules/organizations/cycles/modal/delete-modal.component.ts
@@ -1,10 +1,10 @@
 import { CommonModule } from '@angular/common'
-import type { HttpErrorResponse } from '@angular/common/http'
+import type { OnDestroy } from '@angular/core'
 import { Component, inject } from '@angular/core'
 import { MatButtonModule } from '@angular/material/button'
 import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog'
 import { MatProgressBarModule } from '@angular/material/progress-bar'
-import { catchError, throwError } from 'rxjs'
+import { Subject, switchMap, takeUntil, tap } from 'rxjs'
 import type { Cycle } from '@seed/api/cycle'
 import { CycleService } from '@seed/api/cycle/cycle.service'
 import { AlertComponent } from '@seed/components'
@@ -23,11 +23,12 @@ import { SnackbarService } from 'app/core/snackbar/snackbar.service'
     MatProgressBarModule,
   ],
 })
-export class DeleteModalComponent {
+export class DeleteModalComponent implements OnDestroy {
   private _cycleService = inject(CycleService)
   private _uploaderService = inject(UploaderService)
   private _dialogRef = inject(MatDialogRef<DeleteModalComponent>)
   private _snackBar = inject(SnackbarService)
+  private readonly _unsubscribeAll$ = new Subject<void>()
   errorMessage: string
   inProgress = false
   progressBarObj: ProgressBarObj = {
@@ -55,31 +56,24 @@ export class DeleteModalComponent {
     }
 
     // initiate delete cycle task
-    this._cycleService.delete(this.data.cycle.id, this.data.orgId).subscribe({
-      next: (response: { progress_key: string; value: number }) => {
-        this.progressBarObj.progress = response.value
-        // monitor delete cycle task
-        this._uploaderService
-          .checkProgressLoop({
-            progressKey: response.progress_key,
+    this._cycleService.delete(this.data.cycle.id, this.data.orgId)
+      .pipe(
+        takeUntil(this._unsubscribeAll$),
+        tap((response: { progress_key: string; value: number }) => {
+          this.progressBarObj.progress = response.value
+        }),
+        switchMap(({ progress_key }) => {
+          return this._uploaderService.checkProgressLoop({
+            progressKey: progress_key,
             offset: 0,
             multiplier: 1,
             successFn,
             failureFn,
             progressBarObj: this.progressBarObj,
           })
-          .pipe(
-            catchError(({ error }: { error: HttpErrorResponse }) => {
-              return throwError(() => new Error(error?.message || 'Error checking progress'))
-            }),
-          )
-          .subscribe()
-      },
-      error: (error: string) => {
-        this.inProgress = false
-        this.errorMessage = error
-      },
-    })
+        }),
+      )
+      .subscribe()
   }
 
   close() {
@@ -89,4 +83,9 @@ export class DeleteModalComponent {
   dismiss() {
     this._dialogRef.close()
   }
+
+  ngOnDestroy(): void {
+    this._unsubscribeAll$.next()
+    this._unsubscribeAll$.complete()
+  }
 }
diff --git a/src/app/modules/organizations/cycles/modal/form-modal.component.ts b/src/app/modules/organizations/cycles/modal/form-modal.component.ts
@@ -1,5 +1,5 @@
 import { CommonModule, DatePipe } from '@angular/common'
-import type { OnInit } from '@angular/core'
+import type { OnDestroy, OnInit } from '@angular/core'
 import { Component, inject } from '@angular/core'
 import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms'
 import { MatButtonModule } from '@angular/material/button'
@@ -8,6 +8,7 @@ import { MatDatepickerModule } from '@angular/material/datepicker'
 import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog'
 import { MatFormFieldModule } from '@angular/material/form-field'
 import { MatInputModule } from '@angular/material/input'
+import { Subject, takeUntil, tap } from 'rxjs'
 import type { Cycle } from '@seed/api/cycle'
 import { CycleService } from '@seed/api/cycle/cycle.service'
 import { SEEDValidators } from '@seed/validators'
@@ -41,10 +42,11 @@ export const MY_DATE_FORMATS = {
     MatNativeDateModule,
   ],
 })
-export class FormModalComponent implements OnInit {
+export class FormModalComponent implements OnDestroy, OnInit {
   private _cycleService = inject(CycleService)
   private _datePipe = inject(DatePipe)
   private _dialogRef = inject(MatDialogRef<FormModalComponent>)
+  private readonly _unsubscribeAll$ = new Subject<void>()
 
   create = true
   data = inject(MAT_DIALOG_DATA) as { cycle: Cycle | null; orgId: number; existingNames: string[] }
@@ -62,9 +64,11 @@ export class FormModalComponent implements OnInit {
       this.create = false
       this.form.patchValue(this.data.cycle)
     }
-    this.form.get('start')?.valueChanges.subscribe(() => {
-      this.form.get('end')?.updateValueAndValidity()
-    })
+    this.form.get('start')?.valueChanges
+      .pipe(
+        takeUntil(this._unsubscribeAll$),
+        tap(() => { this.form.get('end')?.updateValueAndValidity() }),
+      ).subscribe()
   }
 
   onSubmit() {
@@ -86,6 +90,11 @@ export class FormModalComponent implements OnInit {
     this._dialogRef.close()
   }
 
+  ngOnDestroy(): void {
+    this._unsubscribeAll$.next()
+    this._unsubscribeAll$.complete()
+  }
+
   private _formatDates() {
     this.form.value.start = this._datePipe.transform(this.form.value.start, 'yyyy-MM-dd')
     this.form.value.end = this._datePipe.transform(this.form.value.end, 'yyyy-MM-dd')
diff --git a/src/app/modules/organizations/members/members.component.ts b/src/app/modules/organizations/members/members.component.ts
diff --git a/src/app/modules/organizations/members/modal/delete-modal.component.ts b/src/app/modules/organizations/members/modal/delete-modal.component.ts
diff --git a/src/app/modules/organizations/members/modal/form-modal.component.ts b/src/app/modules/organizations/members/modal/form-modal.component.ts
