Clear all subscriptions, switchMap

src-ui/src/app/components/document-list/document-list.component.ts

@@ -7,9 +7,17 @@ import {
   ViewChild,
   ViewChildren,
 } from '@angular/core'
-import { ActivatedRoute, ParamMap, Router } from '@angular/router'
+import { ActivatedRoute, Router } from '@angular/router'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { filter, Subscription } from 'rxjs'
+import {
+  filter,
+  first,
+  map,
+  Subject,
+  Subscription,
+  switchMap,
+  takeUntil,
+} from 'rxjs'
 import { FilterRule, isFullTextFilterRule } from 'src/app/data/filter-rule'
 import {
   FILTER_FULLTEXT_MORELIKE,
@@ -59,6 +67,7 @@ export class DocumentListComponent implements OnInit, OnDestroy, AfterViewInit {
 
   unmodifiedFilterRules: FilterRule[] = []
 
+  private unsubscribeNotifier: Subject<any> = new Subject()
   private consumptionFinishedSubscription: Subscription
 
   get isFiltered() {
@@ -94,22 +103,29 @@ export class DocumentListComponent implements OnInit, OnDestroy, AfterViewInit {
 
     this.consumptionFinishedSubscription = this.consumerStatusService
       .onDocumentConsumptionFinished()
+      .pipe(takeUntil(this.unsubscribeNotifier))
       .subscribe(() => {
         this.list.reload()
       })
 
     this.route.paramMap
-      .pipe(filter((params) => params.has('id'))) // only on saved view
+      .pipe(
-      .subscribe((params) => {
+        filter((params) => params.has('id')), // only on saved view
-        this.savedViewService.getCached(+params.get('id')).subscribe((view) => {
+        switchMap((params) => {
-          if (!view) {
+          return this.savedViewService
-            this.router.navigate(['404'])
+            .getCached(+params.get('id'))
-            return
+            .pipe(map((view) => ({ params, view })))
-          }
-          this.list.activateSavedView(view)
-          this.list.reload()
-          this.unmodifiedFilterRules = view.filter_rules
         })
+      )
+      .pipe(takeUntil(this.unsubscribeNotifier))
+      .subscribe(({ view, params }) => {
+        if (!view) {
+          this.router.navigate(['404'])
+          return
+        }
+        this.list.activateSavedView(view)
+        this.list.reload()
+        this.unmodifiedFilterRules = view.filter_rules
       })
 
     const filterQueryVars: string[] = FILTER_RULE_TYPES.map(
@@ -117,7 +133,10 @@ export class DocumentListComponent implements OnInit, OnDestroy, AfterViewInit {
     )
 
     this.route.queryParamMap
-      .pipe(filter((qp) => !this.route.snapshot.paramMap.has('id'))) // only when not on saved view
+      .pipe(
+        filter((qp) => !this.route.snapshot.paramMap.has('id')), // only when not on saved view
+        takeUntil(this.unsubscribeNotifier)
+      )
       .subscribe((queryParams) => {
         const queryVarsFilterRules = []
 
@@ -152,27 +171,29 @@ export class DocumentListComponent implements OnInit, OnDestroy, AfterViewInit {
   }
 
   ngAfterViewInit(): void {
-    this.filterEditor.filterRulesChange.subscribe({
+    this.filterEditor.filterRulesChange
-      next: (filterRules) => {
+      .pipe(takeUntil(this.unsubscribeNotifier))
-        const params =
+      .subscribe({
-          this.documentService.filterRulesToQueryParams(filterRules)
+        next: (filterRules) => {
+          const params =
+            this.documentService.filterRulesToQueryParams(filterRules)
 
-        // if we were on a saved view we navigate 'away' to /documents
+          // if we were on a saved view we navigate 'away' to /documents
-        let base = []
+          let base = []
-        if (this.route.snapshot.paramMap.has('id')) base = ['/documents']
+          if (this.route.snapshot.paramMap.has('id')) base = ['/documents']
 
-        this.router.navigate(base, {
+          this.router.navigate(base, {
-          relativeTo: this.route,
+            relativeTo: this.route,
-          queryParams: params,
+            queryParams: params,
-        })
+          })
-      },
+        },
-    })
+      })
   }
 
   ngOnDestroy() {
-    if (this.consumptionFinishedSubscription) {
+    // unsubscribes all
-      this.consumptionFinishedSubscription.unsubscribe()
+    this.unsubscribeNotifier.next(this)
-    }
+    this.unsubscribeNotifier.complete()
   }
 
   loadViewConfig(view: PaperlessSavedView) {
@@ -188,12 +209,15 @@ export class DocumentListComponent implements OnInit, OnDestroy, AfterViewInit {
         sort_field: this.list.sortField,
         sort_reverse: this.list.sortReverse,
       }
-      this.savedViewService.patch(savedView).subscribe((result) => {
+      this.savedViewService
-        this.toastService.showInfo(
+        .patch(savedView)
-          $localize`View "${this.list.activeSavedViewTitle}" saved successfully.`
+        .pipe(first())
-        )
+        .subscribe((result) => {
-        this.unmodifiedFilterRules = this.list.filterRules
+          this.toastService.showInfo(
-      })
+            $localize`View "${this.list.activeSavedViewTitle}" saved successfully.`
+          )
+          this.unmodifiedFilterRules = this.list.filterRules
+        })
     }
   }
 
@@ -202,7 +226,7 @@ export class DocumentListComponent implements OnInit, OnDestroy, AfterViewInit {
       backdrop: 'static',
     })
     modal.componentInstance.defaultName = this.filterEditor.generateFilterName()
-    modal.componentInstance.saveClicked.subscribe((formValue) => {
+    modal.componentInstance.saveClicked.pipe(first()).subscribe((formValue) => {
       modal.componentInstance.buttonsEnabled = false
       let savedView: PaperlessSavedView = {
         name: formValue.name,
@@ -213,18 +237,21 @@ export class DocumentListComponent implements OnInit, OnDestroy, AfterViewInit {
         sort_field: this.list.sortField,
       }
 
-      this.savedViewService.create(savedView).subscribe(
+      this.savedViewService
-        () => {
+        .create(savedView)
-          modal.close()
+        .pipe(first())
-          this.toastService.showInfo(
+        .subscribe({
-            $localize`View "${savedView.name}" created successfully.`
+          next: () => {
-          )
+            modal.close()
-        },
+            this.toastService.showInfo(
-        (error) => {
+              $localize`View "${savedView.name}" created successfully.`
-          modal.componentInstance.error = error.error
+            )
-          modal.componentInstance.buttonsEnabled = true
+          },
-        }
+          error: (error) => {
-      )
+            modal.componentInstance.error = error.error
+            modal.componentInstance.buttonsEnabled = true
+          },
+        })
     })
   }