Drop NaturalAbstractController in favor of DestroyRef #10746

client/app/admin/admin/admin.component.ts

@@ -1,10 +1,9 @@
 import {Component, OnInit} from '@angular/core';
 import {ActivatedRoute, RouterLink, RouterLinkActive, RouterOutlet} from '@angular/router';
 import {
-    NaturalAbstractController,
     NaturalIconDirective,
-    NaturalSidenavContainerComponent,
     NaturalSidenavComponent,
+    NaturalSidenavContainerComponent,
     NaturalSidenavContentComponent,
 } from '@ecodev/natural';
 import {CurrentUserForProfile} from '../../shared/generated-types';
@@ -34,12 +33,10 @@ import {MatToolbarModule} from '@angular/material/toolbar';
         RouterOutlet,
     ],
 })
-export class AdminComponent extends NaturalAbstractController implements OnInit {
+export class AdminComponent implements OnInit {
     public viewer: CurrentUserForProfile['viewer'] = null;
 
-    public constructor(private readonly route: ActivatedRoute) {
-        super();
-    }
+    public constructor(private readonly route: ActivatedRoute) {}
 
     public ngOnInit(): void {
         this.viewer = this.route.snapshot.data.viewer ? this.route.snapshot.data.viewer : null;

client/app/front-office/components/login/login.component.ts

@@ -1,10 +1,10 @@
-import {Component, OnDestroy, OnInit} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {MatSnackBar} from '@angular/material/snack-bar';
 import {ActivatedRoute, Router, RouterLink} from '@angular/router';
-import {deliverableEmail, ifValid, NaturalAbstractController} from '@ecodev/natural';
+import {deliverableEmail, ifValid} from '@ecodev/natural';
 import {UserService} from '../../../admin/users/services/user.service';
 import {finalize} from 'rxjs/operators';
-import {FormsModule, ReactiveFormsModule, NonNullableFormBuilder, Validators} from '@angular/forms';
+import {FormsModule, NonNullableFormBuilder, ReactiveFormsModule, Validators} from '@angular/forms';
 import {MatDividerModule} from '@angular/material/divider';
 import {MatButtonModule} from '@angular/material/button';
 import {MatInputModule} from '@angular/material/input';
@@ -25,7 +25,7 @@ import {MatFormFieldModule} from '@angular/material/form-field';
         MatDividerModule,
     ],
 })
-export class LoginComponent extends NaturalAbstractController implements OnInit, OnDestroy {
+export class LoginComponent implements OnInit {
     /**
      * Stores the received redirect URL until we need to use it (when login is successfull)
      */
@@ -41,9 +41,7 @@ export class LoginComponent extends NaturalAbstractController implements OnInit,
         private readonly userService: UserService,
         private readonly snackBar: MatSnackBar,
         private readonly fb: NonNullableFormBuilder,
-    ) {
-        super();
-    }
+    ) {}
 
     public ngOnInit(): void {
         this.returnUrl = this.route.snapshot.queryParams.returnUrl || '/';

client/app/front-office/front-office.component.ts

@@ -1,18 +1,17 @@
 import {CommonModule} from '@angular/common';
-import {AfterViewInit, Component, ElementRef, OnInit} from '@angular/core';
+import {AfterViewInit, Component, DestroyRef, ElementRef, inject, OnInit} from '@angular/core';
 import {FormsModule, NonNullableFormBuilder, ReactiveFormsModule, Validators} from '@angular/forms';
 import {ActivatedRoute, NavigationEnd, Router, RouterLink, RouterLinkActive, RouterOutlet} from '@angular/router';
 import {
     deliverableEmail,
     ifValid,
-    NaturalAbstractController,
     NaturalAlertService,
     NaturalIconDirective,
     NaturalSearchSelections,
     toNavigationParameters,
 } from '@ecodev/natural';
 import {differenceBy} from 'lodash-es';
-import {filter, finalize, takeUntil} from 'rxjs/operators';
+import {filter, finalize} from 'rxjs/operators';
 import {UserService} from '../admin/users/services/user.service';
 import {CurrentUserForProfile, UserRole} from '../shared/generated-types';
 import {Currency, CurrencyService} from '../shared/services/currency.service';
@@ -27,6 +26,7 @@ import {MatButtonModule} from '@angular/material/button';
 import {MatToolbarModule} from '@angular/material/toolbar';
 import {MatSidenavModule} from '@angular/material/sidenav';
 import {MatRippleModule} from '@angular/material/core';
+import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 
 @Component({
     selector: 'app-front-office',
@@ -54,7 +54,8 @@ import {MatRippleModule} from '@angular/material/core';
         MatListModule,
     ],
 })
-export class FrontOfficeComponent extends NaturalAbstractController implements OnInit, AfterViewInit {
+export class FrontOfficeComponent implements OnInit, AfterViewInit {
+    private readonly destroyRef = inject(DestroyRef);
     public searchTerm = '';
     public menuOpened = false;
 
@@ -261,9 +262,7 @@ export class FrontOfficeComponent extends NaturalAbstractController implements O
         public readonly currencyService: CurrencyService,
         private readonly fb: NonNullableFormBuilder,
         private readonly alertService: NaturalAlertService,
-    ) {
-        super();
-    }
+    ) {}
 
     public ngOnInit(): void {
         this.userService.getViewerObservable().subscribe(viewer => (this.viewer = viewer));
@@ -274,7 +273,7 @@ export class FrontOfficeComponent extends NaturalAbstractController implements O
         // Further navigations
         this.router.events
             .pipe(
-                takeUntil(this.ngUnsubscribe),
+                takeUntilDestroyed(this.destroyRef),
                 filter(event => event instanceof NavigationEnd),
             )
             .subscribe(() => {

client/app/shared/classes/AbstractInfiniteLoadList.ts

@@ -11,7 +11,7 @@ import {
     QueryVariables,
 } from '@ecodev/natural';
 import {defaults, isEqual, pick} from 'lodash-es';
-import {takeUntil} from 'rxjs/operators';
+import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 
 @Directive({standalone: true})
 export class AbstractInfiniteLoadList<
@@ -41,7 +41,7 @@ export class AbstractInfiniteLoadList<
     public override ngOnInit(): void {
         super.ngOnInit();
 
-        this.dataSource?.internalDataObservable.pipe(takeUntil(this.ngUnsubscribe)).subscribe(result => {
+        this.dataSource?.internalDataObservable.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(result => {
             if (!result) {
                 return;
             }

client/app/shared/components/breadcrumbs/breadcrumbs.component.ts

@@ -1,8 +1,8 @@
-import {Component, HostBinding, Input, OnInit} from '@angular/core';
+import {Component, DestroyRef, HostBinding, inject, Input, OnInit} from '@angular/core';
 import {ActivatedRouteSnapshot, NavigationEnd, Router, RouterLink} from '@angular/router';
-import {NaturalAbstractController} from '@ecodev/natural';
-import {filter, takeUntil} from 'rxjs/operators';
+import {filter} from 'rxjs/operators';
 import {MatButtonModule} from '@angular/material/button';
+import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 
 export type Breadcrumb = {
     link: any[] | string;
@@ -16,20 +16,19 @@ export type Breadcrumb = {
     standalone: true,
     imports: [MatButtonModule, RouterLink],
 })
-export class BreadcrumbsComponent extends NaturalAbstractController implements OnInit {
+export class BreadcrumbsComponent implements OnInit {
+    private readonly destroyRef = inject(DestroyRef);
     @HostBinding('class.mat-body') private isBody = true;
 
     @Input() public breadcrumbs: Breadcrumb[] = [];
 
-    public constructor(private readonly router: Router) {
-        super();
-    }
+    public constructor(private readonly router: Router) {}
 
     public ngOnInit(): void {
         this.update();
         this.router.events
             .pipe(
-                takeUntil(this.ngUnsubscribe),
+                takeUntilDestroyed(this.destroyRef),
                 filter(event => event instanceof NavigationEnd),
             )
             .subscribe(() => this.update());

client/app/shared/components/price/price.component.ts

@@ -1,10 +1,9 @@
-import {Component, Input, OnInit} from '@angular/core';
-import {NaturalAbstractController} from '@ecodev/natural';
-import {takeUntil} from 'rxjs/operators';
+import {Component, DestroyRef, inject, Input, OnInit} from '@angular/core';
 import {CartLineProduct} from '../../../front-office/modules/cart/classes/cart';
 import {Subscriptions} from '../../generated-types';
 import {Currency, CurrencyService} from '../../services/currency.service';
 import {CommonModule} from '@angular/common';
+import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 
 @Component({
     selector: 'app-price',
@@ -13,17 +12,16 @@ import {CommonModule} from '@angular/common';
     standalone: true,
     imports: [CommonModule],
 })
-export class PriceComponent extends NaturalAbstractController implements OnInit {
+export class PriceComponent implements OnInit {
+    private readonly destroyRef = inject(DestroyRef);
     @Input({required: true}) public product!: CartLineProduct | Subscriptions['subscriptions']['items'][0];
 
     public price!: string;
 
-    public constructor(public readonly currencyService: CurrencyService) {
-        super();
-    }
+    public constructor(public readonly currencyService: CurrencyService) {}
 
     public ngOnInit(): void {
-        this.currencyService.current.pipe(takeUntil(this.ngUnsubscribe)).subscribe(currency => {
+        this.currencyService.current.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(currency => {
             if (currency === Currency.CHF) {
                 this.price = this.product.pricePerUnitCHF;
             } else {

package.json

@@ -28,8 +28,8 @@
         "@angular/router": "^18.2.3",
         "@apollo/client": "~3.10.8",
         "@ecodev/fab-speed-dial": "^17.0.0",
-        "@ecodev/natural": "^60.1.1",
-        "@ecodev/natural-editor": "^60.1.1",
+        "@ecodev/natural": "^61.0.0",
+        "@ecodev/natural-editor": "^61.0.0",
         "@ecodev/natural-layout": "^2.0.2",
         "@graphql-codegen/cli": "^5.0.2",
         "@graphql-codegen/typescript-apollo-angular": "^4.0.0",

yarn.lock

@@ -1639,10 +1639,10 @@
   dependencies:
     tslib "^2.6"
 
-"@ecodev/natural-editor@^60.1.1":
-  version "60.1.1"
-  resolved "https://registry.yarnpkg.com/@ecodev/natural-editor/-/natural-editor-60.1.1.tgz#ec2027985d207e6b4b35b33022ccaf00203365b4"
-  integrity sha512-sWS9O7GHpqqZNSocu15OpXIyTUYzoM/5INwccvMT2M0Jv5asjtc15D3goJrSr4Wtos9OspMao1Y6j7bbXZf1Eg==
+"@ecodev/natural-editor@^61.0.0":
+  version "61.0.0"
+  resolved "https://registry.yarnpkg.com/@ecodev/natural-editor/-/natural-editor-61.0.0.tgz#a1db404dde0b4ab30255069e5b64a6f006f5f62c"
+  integrity sha512-YounDLzECmOMJCrgkBbkE2Ue/JpjnKHOug0r3BQZElLQQplrcMZBT2qox6D68agmvXNEO45mninPWyl1vRy9bw==
   dependencies:
     prosemirror-commands "^1.5.2"
     prosemirror-dropcursor "^1.8.1"
@@ -1664,10 +1664,10 @@
   resolved "https://registry.yarnpkg.com/@ecodev/natural-layout/-/natural-layout-2.0.2.tgz#e2c64c2ddb3c60793a39236b52624fde323e610a"
   integrity sha512-BV75kFQmpfuSBNQ1jyKu+IdGkFTMESjPrtKrEyc3MqcmVhV5IiYU0LXTaghLZozuZgCT9HfMOnEsh05aS2j9uQ==
 
-"@ecodev/natural@^60.1.1":
-  version "60.1.1"
-  resolved "https://registry.yarnpkg.com/@ecodev/natural/-/natural-60.1.1.tgz#6b80536c5df21d1036d0575d27d8b2b676178fe0"
-  integrity sha512-rqebOZAX7xx11MjlW4dzc0vuPsTAe8og3uVQHKB09ykZDYFKu32EPQ7+/AkAYpBU6bfY9poU9BjdvvUxCiO1Lw==
+"@ecodev/natural@^61.0.0":
+  version "61.0.0"
+  resolved "https://registry.yarnpkg.com/@ecodev/natural/-/natural-61.0.0.tgz#6d428c8288c0f7c5372b978d3f6572c9b96f943f"
+  integrity sha512-hGwGFiIykME9KsjcR4u9pLw4nu98/MG4aa3yteOyLTZK553cFuhCK/5d/sZ+tE7ebTIfSU/bmHBhw9jJJ9AScg==
   dependencies:
     crypto-es "^2.0.3"
     extract-files "^13.0.0"