From d9cd312d075b3b5b805478dbc030189587ae8256 Mon Sep 17 00:00:00 2001 From: Michael Shamoon <4887959+shamoon@users.noreply.github.com> Date: Tue, 15 Feb 2022 23:43:54 -0800 Subject: [PATCH] Cleanup subscriptions --- .../app-frame/app-frame.component.ts | 10 +++- .../document-detail.component.ts | 56 ++++++++++--------- .../app/services/open-documents.service.ts | 3 +- 3 files changed, 40 insertions(+), 29 deletions(-) diff --git a/src-ui/src/app/components/app-frame/app-frame.component.ts b/src-ui/src/app/components/app-frame/app-frame.component.ts index d0c77dad7..4657910a0 100644 --- a/src-ui/src/app/components/app-frame/app-frame.component.ts +++ b/src-ui/src/app/components/app-frame/app-frame.component.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import { Component, OnDestroy } from '@angular/core'; import { FormControl } from '@angular/forms'; import { ActivatedRoute, Router, Params } from '@angular/router'; import { from, Observable, Subscription, BehaviorSubject } from 'rxjs'; @@ -18,7 +18,7 @@ import { FILTER_FULLTEXT_QUERY } from 'src/app/data/filter-rule-type'; templateUrl: './app-frame.component.html', styleUrls: ['./app-frame.component.scss'] }) -export class AppFrameComponent { +export class AppFrameComponent implements OnDestroy { constructor ( public router: Router, @@ -40,6 +40,8 @@ export class AppFrameComponent { searchField = new FormControl('') + closeAllSub: Subscription + get openDocuments(): PaperlessDocument[] { return this.openDocumentsService.getOpenDocuments() } @@ -93,7 +95,7 @@ export class AppFrameComponent { closeAll() { // user may need to confirm losing unsaved changes - this.openDocumentsService.closeAll().subscribe(confirmed => { + this.closeAllSub = this.openDocumentsService.closeAll().subscribe(confirmed => { if (confirmed) { this.closeMenu() @@ -109,6 +111,8 @@ export class AppFrameComponent { }) } + ngOnDestroy() { + this.closeAllSub && this.closeAllSub.unsubscribe(); } get displayName() { diff --git a/src-ui/src/app/components/document-detail/document-detail.component.ts b/src-ui/src/app/components/document-detail/document-detail.component.ts index c5ccf3ec1..317237771 100644 --- a/src-ui/src/app/components/document-detail/document-detail.component.ts +++ b/src-ui/src/app/components/document-detail/document-detail.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, ViewChild, ElementRef } from '@angular/core'; +import { Component, OnInit, OnDestroy, ViewChild, ElementRef } from '@angular/core'; import { FormControl, FormGroup } from '@angular/forms'; import { ActivatedRoute, Router } from '@angular/router'; import { NgbModal, NgbNav } from '@ng-bootstrap/ng-bootstrap'; @@ -20,7 +20,8 @@ import { ToastService } from 'src/app/services/toast.service'; import { TextComponent } from '../common/input/text/text.component'; import { SettingsService, SETTINGS_KEYS } from 'src/app/services/settings.service'; import { dirtyCheck, DirtyComponent } from '@ngneat/dirty-check-forms'; -import { Observable, Subscription, BehaviorSubject } from 'rxjs'; +import { Observable, Subject, BehaviorSubject } from 'rxjs'; +import { first, takeUntil } from 'rxjs/operators'; import { PaperlessDocumentSuggestions } from 'src/app/data/paperless-document-suggestions'; import { FILTER_FULLTEXT_MORELIKE } from 'src/app/data/filter-rule-type'; @@ -29,7 +30,7 @@ import { FILTER_FULLTEXT_MORELIKE } from 'src/app/data/filter-rule-type'; templateUrl: './document-detail.component.html', styleUrls: ['./document-detail.component.scss'] }) -export class DocumentDetailComponent implements OnInit, DirtyComponent { +export class DocumentDetailComponent implements OnInit, OnDestroy, DirtyComponent { @ViewChild("inputTitle") titleInput: TextComponent @@ -68,8 +69,8 @@ export class DocumentDetailComponent implements OnInit, DirtyComponent { previewNumPages: number = 1 store: BehaviorSubject - storeSub: Subscription isDirty$: Observable + unsubscribeNotifier: Subject = new Subject() @ViewChild('nav') nav: NgbNav @ViewChild('pdfPreview') set pdfPreview(element) { @@ -102,14 +103,14 @@ export class DocumentDetailComponent implements OnInit, DirtyComponent { } ngOnInit(): void { - this.documentForm.valueChanges.subscribe(wow => { + this.documentForm.valueChanges.pipe(takeUntil(this.unsubscribeNotifier)).subscribe(wow => { Object.assign(this.document, this.documentForm.value) }) - this.correspondentService.listAll().subscribe(result => this.correspondents = result.results) - this.documentTypeService.listAll().subscribe(result => this.documentTypes = result.results) + this.correspondentService.listAll().pipe(first()).subscribe(result => this.correspondents = result.results) + this.documentTypeService.listAll().pipe(first()).subscribe(result => this.documentTypes = result.results) - this.route.paramMap.subscribe(paramMap => { + this.route.paramMap.pipe(first()).subscribe(paramMap => { this.documentId = +paramMap.get('id') this.previewUrl = this.documentsService.getPreviewUrl(this.documentId) this.downloadUrl = this.documentsService.getDownloadUrl(this.documentId) @@ -118,7 +119,7 @@ export class DocumentDetailComponent implements OnInit, DirtyComponent { if (this.openDocumentService.getOpenDocument(this.documentId)) { this.updateComponent(this.openDocumentService.getOpenDocument(this.documentId)) } - this.documentsService.get(this.documentId).subscribe(doc => { + this.documentsService.get(this.documentId).pipe(first()).subscribe(doc => { // Initialize dirtyCheck this.store = new BehaviorSubject({ title: doc.title, @@ -131,10 +132,10 @@ export class DocumentDetailComponent implements OnInit, DirtyComponent { }) this.isDirty$ = dirtyCheck(this.documentForm, this.store.asObservable()) - this.isDirty$.subscribe(dirty => { + this.isDirty$.pipe(takeUntil(this.unsubscribeNotifier)).subscribe(dirty => { this.openDocumentService.setDirty(this.document.id, dirty) }) - + if (!this.openDocumentService.getOpenDocument(this.documentId)) { this.openDocumentService.openDocument(doc) this.updateComponent(doc) @@ -144,14 +145,19 @@ export class DocumentDetailComponent implements OnInit, DirtyComponent { } + ngOnDestroy() : void { + this.unsubscribeNotifier.next(); + this.unsubscribeNotifier.complete(); + } + updateComponent(doc: PaperlessDocument) { this.document = doc - this.documentsService.getMetadata(doc.id).subscribe(result => { + this.documentsService.getMetadata(doc.id).pipe(first()).subscribe(result => { this.metadata = result }, error => { this.metadata = null }) - this.documentsService.getSuggestions(doc.id).subscribe(result => { + this.documentsService.getSuggestions(doc.id).pipe(first()).subscribe(result => { this.suggestions = result }, error => { this.suggestions = null @@ -164,8 +170,8 @@ export class DocumentDetailComponent implements OnInit, DirtyComponent { var modal = this.modalService.open(DocumentTypeEditDialogComponent, {backdrop: 'static'}) modal.componentInstance.dialogMode = 'create' if (newName) modal.componentInstance.object = { name: newName } - modal.componentInstance.success.subscribe(newDocumentType => { - this.documentTypeService.listAll().subscribe(documentTypes => { + modal.componentInstance.success.pipe(first()).subscribe(newDocumentType => { + this.documentTypeService.listAll().pipe(first()).subscribe(documentTypes => { this.documentTypes = documentTypes.results this.documentForm.get('document_type').setValue(newDocumentType.id) }) @@ -176,8 +182,8 @@ export class DocumentDetailComponent implements OnInit, DirtyComponent { var modal = this.modalService.open(CorrespondentEditDialogComponent, {backdrop: 'static'}) modal.componentInstance.dialogMode = 'create' if (newName) modal.componentInstance.object = { name: newName } - modal.componentInstance.success.subscribe(newCorrespondent => { - this.correspondentService.listAll().subscribe(correspondents => { + modal.componentInstance.success.pipe(first()).subscribe(newCorrespondent => { + this.correspondentService.listAll().pipe(first()).subscribe(correspondents => { this.correspondents = correspondents.results this.documentForm.get('correspondent').setValue(newCorrespondent.id) }) @@ -185,7 +191,7 @@ export class DocumentDetailComponent implements OnInit, DirtyComponent { } discard() { - this.documentsService.get(this.documentId).subscribe(doc => { + this.documentsService.get(this.documentId).pipe(first()).subscribe(doc => { Object.assign(this.document, doc) this.title = doc.title this.documentForm.patchValue(doc) @@ -195,7 +201,7 @@ export class DocumentDetailComponent implements OnInit, DirtyComponent { save() { this.networkActive = true this.store.next(this.documentForm.value) - this.documentsService.update(this.document).subscribe(result => { + this.documentsService.update(this.document).pipe(first()).subscribe(result => { this.close() this.networkActive = false this.error = null @@ -208,9 +214,9 @@ export class DocumentDetailComponent implements OnInit, DirtyComponent { saveEditNext() { this.networkActive = true this.store.next(this.documentForm.value) - this.documentsService.update(this.document).subscribe(result => { + this.documentsService.update(this.document).pipe(first()).subscribe(result => { this.error = null - this.documentListViewService.getNext(this.document.id).subscribe(nextDocId => { + this.documentListViewService.getNext(this.document.id).pipe(first()).subscribe(nextDocId => { this.networkActive = false if (nextDocId) { this.openDocumentService.closeDocument(this.document) @@ -227,7 +233,7 @@ export class DocumentDetailComponent implements OnInit, DirtyComponent { } maybeClose() { - this.isDirty$.subscribe(dirty => { + this.isDirty$.pipe(takeUntil(this.unsubscribeNotifier)).subscribe(dirty => { if (dirty) { let modal = this.modalService.open(ConfirmDialogComponent, {backdrop: 'static'}) modal.componentInstance.title = $localize`Unsaved Changes` @@ -235,7 +241,7 @@ export class DocumentDetailComponent implements OnInit, DirtyComponent { modal.componentInstance.message = $localize`Are you sure you want to leave?` modal.componentInstance.btnClass = "btn-warning" modal.componentInstance.btnCaption = $localize`Leave page` - modal.componentInstance.confirmClicked.subscribe(() => { + modal.componentInstance.confirmClicked.pipe(first()).subscribe(() => { modal.componentInstance.buttonsEnabled = false modal.close() this.close() @@ -262,9 +268,9 @@ export class DocumentDetailComponent implements OnInit, DirtyComponent { modal.componentInstance.message = $localize`The files for this document will be deleted permanently. This operation cannot be undone.` modal.componentInstance.btnClass = "btn-danger" modal.componentInstance.btnCaption = $localize`Delete document` - modal.componentInstance.confirmClicked.subscribe(() => { + modal.componentInstance.confirmClicked.pipe(first()).subscribe(() => { modal.componentInstance.buttonsEnabled = false - this.documentsService.delete(this.document).subscribe(() => { + this.documentsService.delete(this.document).pipe(first()).subscribe(() => { modal.close() this.close() }, error => { diff --git a/src-ui/src/app/services/open-documents.service.ts b/src-ui/src/app/services/open-documents.service.ts index 4f4d9c8bb..95b8e93a0 100644 --- a/src-ui/src/app/services/open-documents.service.ts +++ b/src-ui/src/app/services/open-documents.service.ts @@ -5,6 +5,7 @@ import { DocumentService } from './rest/document.service'; import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; import { ConfirmDialogComponent } from 'src/app/components/common/confirm-dialog/confirm-dialog.component'; import { Observable, Subject, of } from 'rxjs'; +import { take } from 'rxjs/operators'; @Injectable({ providedIn: 'root' @@ -78,7 +79,7 @@ export class OpenDocumentsService { modal.componentInstance.message = $localize`Are you sure you want to close all documents?` modal.componentInstance.btnClass = "btn-warning" modal.componentInstance.btnCaption = $localize`Close documents` - modal.componentInstance.confirmClicked.subscribe(() => { + modal.componentInstance.confirmClicked.pipe(take(1)).subscribe(() => { modal.componentInstance.buttonsEnabled = false modal.close() this.openDocuments.splice(0, this.openDocuments.length)