From 748e2ec03ce4ac9ad6c4597ea567d7b64f5bd560 Mon Sep 17 00:00:00 2001
From: Adrien Crivelli <adrien.crivelli@gmail.com>
Date: Sun, 24 Mar 2024 12:41:57 +0800
Subject: [PATCH] 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
---
 .../src/lib/modules/panels/abstract-panel.ts  | 20 ++++++++-----------
 src/app/panels-routing.ts                     |  7 +++++++
 src/app/panels/panels.component.html          |  1 +
 .../shared/components/any/any.component.html  |  1 +
 4 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/projects/natural/src/lib/modules/panels/abstract-panel.ts b/projects/natural/src/lib/modules/panels/abstract-panel.ts
index 16923d20..51a79048 100644
--- 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
index 38221689..1dfa498c 100644
--- 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
index 77dac3f3..188b9745 100644
--- 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
index 4a89d844..a7e1c660 100644
--- 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>