fix(*): stop jumping back to children list after navigating away

by properly unsubscribing to observables in components fixes #446
Aam-Digital · Jun 3, 2020 · 3428d0d · 3428d0d
1 parent fb4b10b
commit 3428d0d
Show file tree

Hide file tree

Showing 23 changed files with 213 additions and 144 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -26,6 +26,7 @@
     "@angular/platform-browser-dynamic": "^9.1.9",
     "@angular/router": "^9.1.9",
     "@angular/service-worker": "^9.1.9",
+    "@ngneat/until-destroy": "^7.1.6",
     "@sentry/browser": "^5.16.0",
     "crypto-js": "^4.0.0",
     "faker": "^4.1.0",

diff --git a/src/app/child-dev-project/aser/aser-component/aser.component.ts b/src/app/child-dev-project/aser/aser-component/aser.component.ts
@@ -5,7 +5,9 @@ import { Aser } from "../model/aser";
 import { ColumnDescription } from "../../../core/entity-subrecord/entity-subrecord/column-description";
 import { ChildrenService } from "../../children/children.service";
 import { ColumnDescriptionInputType } from "../../../core/entity-subrecord/entity-subrecord/column-description-input-type.enum";
+import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
 
+@UntilDestroy()
 @Component({
   selector: "app-aser",
   template:
@@ -82,19 +84,22 @@ export class AserComponent implements OnInit {
   ) {}
 
   ngOnInit() {
-    this.route.paramMap.subscribe((params) => {
+    this.route.paramMap.pipe(untilDestroyed(this)).subscribe((params) => {
       this.childId = params.get("id").toString();
       this.loadData(this.childId);
     });
   }
 
   loadData(id: string) {
-    this.childrenService.getAserResultsOfChild(id).subscribe((results) => {
-      this.records = results.sort(
-        (a, b) =>
-          (b.date ? b.date.valueOf() : 0) - (a.date ? a.date.valueOf() : 0)
-      );
-    });
+    this.childrenService
+      .getAserResultsOfChild(id)
+      .pipe(untilDestroyed(this))
+      .subscribe((results) => {
+        this.records = results.sort(
+          (a, b) =>
+            (b.date ? b.date.valueOf() : 0) - (a.date ? a.date.valueOf() : 0)
+        );
+      });
   }
 
   generateNewRecordFactory() {

diff --git a/src/app/child-dev-project/attendance/add-month-attendance/add-month-attendance.component.ts b/src/app/child-dev-project/attendance/add-month-attendance/add-month-attendance.component.ts
@@ -7,7 +7,9 @@ import { ConfirmationDialogService } from "../../../core/confirmation-dialog/con
 import { AlertService } from "../../../core/alerts/alert.service";
 import { ChildrenService } from "../../children/children.service";
 import { School } from "../../schools/model/school";
+import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
 
+@UntilDestroy()
 @Component({
   selector: "app-add-month-attendance",
   templateUrl: "./add-month-attendance.component.html",
@@ -48,14 +50,17 @@ export class AddMonthAttendanceComponent implements OnInit {
     this.entityMapper
       .loadType<School>(School)
       .then((schools) => (this.schools = schools));
-    this.childrenService.getChildren().subscribe((children) => {
-      this.children = children.filter((c: Child) => c.isActive());
-      this.initChildrenLookupTables(this.children);
-
-      this.centers = children
-        .map((c) => c.center)
-        .filter((value, index, arr) => arr.indexOf(value) === index);
-    });
+    this.childrenService
+      .getChildren()
+      .pipe(untilDestroyed(this))
+      .subscribe((children) => {
+        this.children = children.filter((c: Child) => c.isActive());
+        this.initChildrenLookupTables(this.children);
+
+        this.centers = children
+          .map((c) => c.center)
+          .filter((value, index, arr) => arr.indexOf(value) === index);
+      });
   }
 
   private initChildrenLookupTables(children: Child[]) {
@@ -192,6 +197,7 @@ export class AddMonthAttendanceComponent implements OnInit {
 
     this.childrenService
       .getAttendancesOfMonth(this.month)
+      .pipe(untilDestroyed(this))
       .subscribe((records) => {
         recordsToOverwrite.forEach((recordToOverwrite) => {
           const relevantExistingRecords = records.filter(

diff --git a/src/app/child-dev-project/attendance/attendance-manager/attendance-manager.component.ts b/src/app/child-dev-project/attendance/attendance-manager/attendance-manager.component.ts
@@ -5,7 +5,9 @@ import { ChildrenService } from "../../children/children.service";
 import { MatSort } from "@angular/material/sort";
 import { MatTableDataSource } from "@angular/material/table";
 import { AttendanceMonth } from "../model/attendance-month";
+import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
 
+@UntilDestroy()
 @Component({
   selector: "app-attendance-manager",
   templateUrl: "./attendance-manager.component.html",
@@ -63,11 +65,14 @@ export class AttendanceManagerComponent implements OnInit, AfterViewInit {
     this.filterUntil.setDate(1);
     this.filterUntil.setMonth(this.filterUntil.getMonth() + 1);
 
-    this.childrenService.getChildren().subscribe((data) => {
-      this.childrenAll = data.filter((c) => c.isActive());
-      this.initCenterFilterOptions();
-      this.applyFilterSelections();
-    });
+    this.childrenService
+      .getChildren()
+      .pipe(untilDestroyed(this))
+      .subscribe((data) => {
+        this.childrenAll = data.filter((c) => c.isActive());
+        this.initCenterFilterOptions();
+        this.applyFilterSelections();
+      });
   }
 
   private initCenterFilterOptions() {
@@ -121,6 +126,7 @@ export class AttendanceManagerComponent implements OnInit, AfterViewInit {
 
     this.childrenService
       .getAttendancesOfChild(child.getId())
+      .pipe(untilDestroyed(this))
       .subscribe((attendances) => {
         attendances.forEach((att) => {
           if (

diff --git a/src/app/child-dev-project/attendance/child-attendance/child-attendance.component.ts b/src/app/child-dev-project/attendance/child-attendance/child-attendance.component.ts
@@ -6,7 +6,9 @@ import { ColumnDescription } from "../../../core/entity-subrecord/entity-subreco
 import { DatePipe, PercentPipe } from "@angular/common";
 import { AttendanceDetailsComponent } from "../attendance-details/attendance-details.component";
 import { ColumnDescriptionInputType } from "../../../core/entity-subrecord/entity-subrecord/column-description-input-type.enum";
+import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
 
+@UntilDestroy()
 @Component({
   selector: "app-child-attendance",
   templateUrl: "./child-attendance.component.html",
@@ -85,22 +87,26 @@ export class ChildAttendanceComponent implements OnInit {
   }
 
   loadData(id: string) {
-    this.childrenService.getAttendancesOfChild(id).subscribe((results) => {
-      this.records = results
-        .filter(
-          (r) =>
-            this.institution === undefined || r.institution === this.institution
-        )
-        .sort(
-          (a, b) =>
-            (b.month ? b.month.valueOf() : 0) -
-            (a.month ? a.month.valueOf() : 0)
-        );
+    this.childrenService
+      .getAttendancesOfChild(id)
+      .pipe(untilDestroyed(this))
+      .subscribe((results) => {
+        this.records = results
+          .filter(
+            (r) =>
+              this.institution === undefined ||
+              r.institution === this.institution
+          )
+          .sort(
+            (a, b) =>
+              (b.month ? b.month.valueOf() : 0) -
+              (a.month ? a.month.valueOf() : 0)
+          );
 
-      if (this.showDailyAttendanceOfLatest) {
-        this.createCurrentMonthsAttendanceIfNotExists();
-      }
-    });
+        if (this.showDailyAttendanceOfLatest) {
+          this.createCurrentMonthsAttendanceIfNotExists();
+        }
+      });
   }
 
   private createCurrentMonthsAttendanceIfNotExists() {

diff --git a/.../dashboard-widgets/attendance-average-dashboard/attendance-average-dashboard.component.ts b/.../dashboard-widgets/attendance-average-dashboard/attendance-average-dashboard.component.ts
@@ -2,7 +2,9 @@ import { Component, OnInit } from "@angular/core";
 import { ChildrenService } from "../../../children/children.service";
 import { Child } from "../../../children/model/child";
 import { Router } from "@angular/router";
+import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
 
+@UntilDestroy()
 @Component({
   selector: "app-attendance-average-dashboard",
   templateUrl: "./attendance-average-dashboard.component.html",
@@ -50,6 +52,7 @@ export class AttendanceAverageDashboardComponent implements OnInit {
       if (record[2] >= this.ATTENDANCE_THRESHOLD) {
         this.childrenService
           .getChild(studentStat.key)
+          .pipe(untilDestroyed(this))
           .subscribe((child) => (record[0] = child));
       } else {
         countMap.delete(studentStat.key);

diff --git a/...ashboard-widgets/attendance-warnings-dashboard/attendance-warnings-dashboard.component.ts b/...ashboard-widgets/attendance-warnings-dashboard/attendance-warnings-dashboard.component.ts
@@ -2,7 +2,9 @@ import { Component, OnInit } from "@angular/core";
 import { ChildrenService } from "../../../children/children.service";
 import { Router } from "@angular/router";
 import { AttendanceMonth } from "../../model/attendance-month";
+import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
 
+@UntilDestroy()
 @Component({
   selector: "app-attendance-warnings-dashboard",
   templateUrl: "./attendance-warnings-dashboard.component.html",
@@ -38,6 +40,7 @@ export class AttendanceWarningsDashboardComponent implements OnInit {
           if (att < this.ATTENDANCE_THRESHOLD) {
             this.childrenService
               .getChild(studentStat.key)
+              .pipe(untilDestroyed(this))
               .subscribe((child) =>
                 this.lastMonthsLowAttendence.push([child, att, urgency])
               );

diff --git a/...ndance/dashboard-widgets/attendance-week-dashboard/attendance-week-dashboard.component.ts b/...ndance/dashboard-widgets/attendance-week-dashboard/attendance-week-dashboard.component.ts
@@ -5,7 +5,9 @@ import { AttendanceMonth } from "../../model/attendance-month";
 import { AttendanceDay, AttendanceStatus } from "../../model/attendance-day";
 import { Child } from "../../../children/model/child";
 import { forkJoin } from "rxjs";
+import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
 
+@UntilDestroy()
 @Component({
   selector: "app-attendance-week-dashboard",
   templateUrl: "./attendance-week-dashboard.component.html",
@@ -55,15 +57,15 @@ export class AttendanceWeekDashboardComponent implements OnInit {
     );
 
     const o1 = this.childrenService.getAttendancesOfMonth(previousMonday);
-    o1.subscribe((attendances) => {
+    o1.pipe(untilDestroyed(this)).subscribe((attendances) => {
       attendances.forEach((a) =>
         this.extractRelevantAttendanceDays(a, previousMonday, previousSaturday)
       );
     });
     let o2 = o1;
     if (previousMonday.getMonth() !== previousSaturday.getMonth()) {
       o2 = this.childrenService.getAttendancesOfMonth(previousSaturday);
-      o2.subscribe((attendances) =>
+      o2.pipe(untilDestroyed(this)).subscribe((attendances) =>
         attendances.forEach((a) =>
           this.extractRelevantAttendanceDays(
             a,
@@ -91,6 +93,7 @@ export class AttendanceWeekDashboardComponent implements OnInit {
       };
       this.childrenService
         .getChild(attendanceMonth.student)
+        .pipe(untilDestroyed(this))
         .subscribe((child) => (record.child = child));
       this.attendanceRecordsMap.set(attendanceMonth.student, record);
     }

diff --git a/src/app/child-dev-project/children/child-block/child-block.component.ts b/src/app/child-dev-project/children/child-block/child-block.component.ts
@@ -2,7 +2,9 @@ import { Component, HostListener, Input, OnInit } from "@angular/core";
 import { Router } from "@angular/router";
 import { ChildrenService } from "../children.service";
 import { Child } from "../model/child";
+import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
 
+@UntilDestroy()
 @Component({
   selector: "app-child-block",
   templateUrl: "./child-block.component.html",
@@ -22,9 +24,12 @@ export class ChildBlockComponent implements OnInit {
 
   async ngOnInit() {
     if (this.entityId) {
-      this.childrenService.getChild(this.entityId).subscribe((child) => {
-        this.entity = child;
-      });
+      this.childrenService
+        .getChild(this.entityId)
+        .pipe(untilDestroyed(this))
+        .subscribe((child) => {
+          this.entity = child;
+        });
     }
   }
 

diff --git a/src/app/child-dev-project/children/child-details/child-details.component.ts b/src/app/child-dev-project/children/child-details/child-details.component.ts
@@ -29,7 +29,9 @@ import { AlertService } from "../../../core/alerts/alert.service";
 import { ChildrenService } from "../children.service";
 import { ChildPhotoService } from "../child-photo-service/child-photo.service";
 import { SessionService } from "../../../core/session/session-service/session.service";
+import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
 
+@UntilDestroy()
 @Component({
   selector: "app-child-details",
   templateUrl: "./child-details.component.html",
@@ -164,18 +166,24 @@ export class ChildDetailsComponent implements OnInit {
       this.editing = true;
       this.child = new Child(uniqid());
     } else {
-      this.childrenService.getChild(id).subscribe((child) => {
-        this.child = child;
-        this.initForm();
-      });
+      this.childrenService
+        .getChild(id)
+        .pipe(untilDestroyed(this))
+        .subscribe((child) => {
+          this.child = child;
+          this.initForm();
+        });
     }
     this.initForm();
   }
 
   changedRecordInEntitySubrecord() {
-    this.childrenService.getChild(this.child.getId()).subscribe((child) => {
-      this.child = child;
-    });
+    this.childrenService
+      .getChild(this.child.getId())
+      .pipe(untilDestroyed(this))
+      .subscribe((child) => {
+        this.child = child;
+      });
   }
 
   switchEdit() {

diff --git a/src/app/child-dev-project/children/child-select/child-select.component.ts b/src/app/child-dev-project/children/child-select/child-select.component.ts
@@ -9,7 +9,9 @@ import {
 } from "@angular/core";
 import { Child } from "../model/child";
 import { ChildrenService } from "../children.service";
+import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
 
+@UntilDestroy()
 @Component({
   selector: "app-child-select",
   templateUrl: "./child-select.component.html",
@@ -37,12 +39,15 @@ export class ChildSelectComponent implements OnChanges {
   }
 
   private loadInitial() {
-    this.childrenService.getChildren().subscribe((children) => {
-      this.allChildren = children;
-      this.suggestions = this.allChildren;
-
-      this.selectInitialSelectedChildren();
-    });
+    this.childrenService
+      .getChildren()
+      .pipe(untilDestroyed(this))
+      .subscribe((children) => {
+        this.allChildren = children;
+        this.suggestions = this.allChildren;
+
+        this.selectInitialSelectedChildren();
+      });
   }
 
   private selectInitialSelectedChildren() {