Task/eliminate OnDestroy lifecycle hook from app component (#6568)

* Eliminate OnDestroy lifecycle hook

apps/client/src/app/app.component.ts

@@ -10,12 +10,13 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  DestroyRef,
   DOCUMENT,
   HostBinding,
   Inject,
-  OnDestroy,
   OnInit
 } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatDialog } from '@angular/material/dialog';
 import { Title } from '@angular/platform-browser';
 import {
@@ -30,8 +31,7 @@ import { DataSource } from '@prisma/client';
 import { addIcons } from 'ionicons';
 import { openOutline } from 'ionicons/icons';
 import { DeviceDetectorService } from 'ngx-device-detector';
-import { Subject } from 'rxjs';
-import { filter, takeUntil } from 'rxjs/operators';
+import { filter } from 'rxjs/operators';
 
 import { GfFooterComponent } from './components/footer/footer.component';
 import { GfHeaderComponent } from './components/header/header.component';
@@ -47,7 +47,7 @@ import { UserService } from './services/user/user.service';
   styleUrls: ['./app.component.scss'],
   templateUrl: './app.component.html'
 })
-export class GfAppComponent implements OnDestroy, OnInit {
+export class GfAppComponent implements OnInit {
   @HostBinding('class.has-info-message') get getHasMessage() {
     return this.hasInfoMessage;
   }
@@ -68,11 +68,10 @@ export class GfAppComponent implements OnDestroy, OnInit {
   public showFooter = false;
   public user: User;
 
-  private unsubscribeSubject = new Subject<void>();
-
   public constructor(
     private changeDetectorRef: ChangeDetectorRef,
     private dataService: DataService,
+    private destroyRef: DestroyRef,
     private deviceService: DeviceDetectorService,
     private dialog: MatDialog,
     @Inject(DOCUMENT) private document: Document,
@@ -87,7 +86,7 @@ export class GfAppComponent implements OnDestroy, OnInit {
     this.user = undefined;
 
     this.route.queryParams
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((params) => {
         if (
           params['dataSource'] &&
@@ -110,7 +109,7 @@ export class GfAppComponent implements OnDestroy, OnInit {
 
     this.impersonationStorageService
       .onChangeHasImpersonation()
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((impersonationId) => {
         this.hasImpersonationId = !!impersonationId;
       });
@@ -199,7 +198,7 @@ export class GfAppComponent implements OnDestroy, OnInit {
       });
 
     this.userService.stateChanged
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((state) => {
         this.user = state.user;
 
@@ -243,11 +242,6 @@ export class GfAppComponent implements OnDestroy, OnInit {
     document.location.href = `/${document.documentElement.lang}`;
   }
 
-  public ngOnDestroy() {
-    this.unsubscribeSubject.next();
-    this.unsubscribeSubject.complete();
-  }
-
   private initializeTheme(userPreferredColorScheme?: ColorScheme) {
     const isDarkTheme = userPreferredColorScheme
       ? userPreferredColorScheme === 'DARK'
@@ -271,7 +265,7 @@ export class GfAppComponent implements OnDestroy, OnInit {
   }) {
     this.userService
       .get()
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((user) => {
         this.user = user;
 
@@ -317,7 +311,7 @@ export class GfAppComponent implements OnDestroy, OnInit {
 
         dialogRef
           .afterClosed()
-          .pipe(takeUntil(this.unsubscribeSubject))
+          .pipe(takeUntilDestroyed(this.destroyRef))
           .subscribe(() => {
             this.router.navigate([], {
               queryParams: {