add destroy observable to stop subscription of reloadKeySubject

puzzle · Oct 23, 2024 · 123f6f5 · 123f6f5
1 parent f9db625
commit 123f6f5
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -3,7 +3,7 @@
   "version": "2.0.0",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve ",
+    "start": "ng serve --host 0.0.0.0",
     "build": "ng build",
     "build:staging": "ng build --configuration staging",
     "watch": "ng build --watch --configuration development",

diff --git a/frontend/src/app/components/keyresult-detail/keyresult-detail.component.ts b/frontend/src/app/components/keyresult-detail/keyresult-detail.component.ts
@@ -1,11 +1,11 @@
-import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { KeyResult } from '../../shared/types/model/KeyResult';
 import { KeyresultService } from '../../services/keyresult.service';
 import { KeyResultMetric } from '../../shared/types/model/KeyResultMetric';
 import { KeyResultOrdinal } from '../../shared/types/model/KeyResultOrdinal';
 import { CheckInHistoryDialogComponent } from '../check-in-history-dialog/check-in-history-dialog.component';
 import { MatDialog } from '@angular/material/dialog';
-import { BehaviorSubject, catchError, EMPTY } from 'rxjs';
+import { BehaviorSubject, catchError, EMPTY, Subject, takeUntil } from 'rxjs';
 import { ActivatedRoute, Router } from '@angular/router';
 import { RefreshDataService } from '../../services/refresh-data.service';
 import { CloseState } from '../../shared/types/enums/CloseState';
@@ -22,10 +22,11 @@ import { ConfirmDialogComponent } from '../../shared/dialog/confirm-dialog/confi
   styleUrls: ['./keyresult-detail.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class KeyresultDetailComponent implements OnInit {
+export class KeyresultDetailComponent implements OnInit, OnDestroy {
   @Input() keyResultId!: number;
 
   keyResult$: BehaviorSubject<KeyResult> = new BehaviorSubject<KeyResult>({} as KeyResult);
+  ngDestroy$: Subject<void> = new Subject();
   isComplete: boolean = false;
   protected readonly DATE_FORMAT = DATE_FORMAT;
   protected readonly isLastCheckInNegative = isLastCheckInNegative;
@@ -41,11 +42,16 @@ export class KeyresultDetailComponent implements OnInit {
   ngOnInit(): void {
     this.keyResultId = this.getIdFromParams();
     this.loadKeyResult(this.keyResultId);
-    this.refreshDataService.reloadKeyResultSubject.subscribe(() => {
+    this.refreshDataService.reloadKeyResultSubject.pipe(takeUntil(this.ngDestroy$)).subscribe(() => {
       this.loadKeyResult(this.keyResultId);
     });
   }
 
+  ngOnDestroy() {
+    this.ngDestroy$.next();
+    this.ngDestroy$.complete();
+  }
+
   private getIdFromParams(): number {
     const id = this.route.snapshot.paramMap.get('id');
     if (!id) {