Simplify subscription handling #9844

Because `NaturalAbstractPanel.initPanel()` is only ever called at most 1 time per instance of a component, we don't need to handle previous subscriptions
Ecodev · Mar 24, 2024 · 748e2ec · 748e2ec
1 parent 13f015e
commit 748e2ec
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 12 deletions.
diff --git a/projects/natural/src/lib/modules/panels/abstract-panel.ts b/projects/natural/src/lib/modules/panels/abstract-panel.ts
@@ -2,7 +2,7 @@ import {Directive, HostBinding, HostListener} from '@angular/core';
 import {NaturalAbstractController} from '../../classes/abstract-controller';
 import {NaturalPanelsService} from './panels.service';
 import {NaturalPanelData} from './types';
-import {Observable, Subscription, takeUntil} from 'rxjs';
+import {Observable, takeUntil} from 'rxjs';
 
 @Directive()
 export class NaturalAbstractPanel extends NaturalAbstractController {
@@ -11,7 +11,6 @@ export class NaturalAbstractPanel extends NaturalAbstractController {
      * When loading a component from a panel opening (dialog), receives the data provided by the service
      */
     public data: any = {};
-    #modelSubscription: Subscription | null = null;
 
     /**
      * Bind isFrontPanel style class on root component
@@ -51,16 +50,13 @@ export class NaturalAbstractPanel extends NaturalAbstractController {
         if (this.panelData?.data) {
             if (this.panelData.data.model instanceof Observable) {
                 // Subscribe to model to know when Apollo cache is changed, so we can reflect it into `data.model`
-                this.#modelSubscription?.unsubscribe();
-                this.#modelSubscription = this.panelData.data.model
-                    .pipe(takeUntil(this.ngUnsubscribe))
-                    .subscribe(model => {
-                        this.data = {
-                            ...this.data,
-                            ...this.panelData?.data,
-                            model: model,
-                        };
-                    });
+                this.panelData.data.model.pipe(takeUntil(this.ngUnsubscribe)).subscribe(model => {
+                    this.data = {
+                        ...this.data,
+                        ...this.panelData?.data,
+                        model: model,
+                    };
+                });
             } else {
                 this.data = {
                     ...this.data,

diff --git a/src/app/panels-routing.ts b/src/app/panels-routing.ts
@@ -24,4 +24,11 @@ export const panelsRoutes: NaturalPanelsRouterRule[] = [
         component: AnyComponent,
         resolve: {foo: resolveMy},
     },
+    {
+        path: 'modelPanel/:param',
+        component: AnyComponent,
+        resolve: {
+            model: route => inject(ItemService).resolve(route.params.param),
+        },
+    },
 ];
diff --git a/src/app/panels/panels.component.html b/src/app/panels/panels.component.html
@@ -3,6 +3,7 @@ <h1 class="mat-headline-4">NaturalPanelsService</h1>
 <div fxLayout="row" fxLayoutGap="10px">
     <a mat-flat-button routerLink="panel/1">Panel 1</a>
     <a mat-flat-button routerLink="panel/1/panel/2">Panel 1 & 2</a>
+    <a mat-flat-button routerLink="modelPanel/1">Panel with observable model</a>
     <a mat-flat-button routerLink="invalid-url">invalid url</a>
 </div>
 <router-outlet />
diff --git a/src/app/shared/components/any/any.component.html b/src/app/shared/components/any/any.component.html
@@ -1,6 +1,7 @@
 <div fxLayout="row" fxLayoutGap="10px">
     <a [routerLink]="['panel', '2']" mat-flat-button>Panel 2 (dynamic)</a>
     <a mat-flat-button routerLink="panel/3">Panel 3 (static)</a>
+    <a mat-flat-button routerLink="modelPanel/3">Panel with observable model (static)</a>
     <a [routerLink]="['invalid-url']" mat-flat-button>invalid url</a>
 </div>