chore: clean up subscriptions

apps/picsa-tools/resources-tool/src/app/pages/search/search.component.ts

@@ -1,9 +1,10 @@
 import { CommonModule } from '@angular/common';
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { ActivatedRoute, Params, Router } from '@angular/router';
 import { PicsaTranslateModule } from '@picsa/shared/modules';
 import Fuse, { FuseResult, IFuseOptions } from 'fuse.js';
+import { Subject, takeUntil } from 'rxjs';
 
 import { ResourcesComponentsModule } from '../../components/components.module';
 import { IResourceBase, IResourceCollection, IResourceFile, IResourceLink } from '../../schemas';
@@ -23,7 +24,7 @@ interface ISearchResultsByType {
   styleUrls: ['./search.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ResourceSearchComponent implements OnInit {
+export class ResourceSearchComponent implements OnInit, OnDestroy {
   query: string = '';
 
   // https://www.fusejs.io/api/options.html
@@ -44,6 +45,8 @@ export class ResourceSearchComponent implements OnInit {
 
   searchResults: ISearchResultsByType = { collection: [], file: [], link: [] };
 
+  private componentDestroyed$ = new Subject<boolean>();
+
   /** Store total number of results across types */
   public totalResults?: number;
 
@@ -58,6 +61,9 @@ export class ResourceSearchComponent implements OnInit {
     await this.initializeServiceData();
     this.subscribeToQueryParams();
   }
+  async ngOnDestroy() {
+    this.componentDestroyed$.next(true);
+  }
 
   private async initializeServiceData() {
     await this.service.ready();
@@ -70,7 +76,7 @@ export class ResourceSearchComponent implements OnInit {
   }
 
   private subscribeToQueryParams() {
-    this.route.queryParams.subscribe((params: Params) => {
+    this.route.queryParams.pipe(takeUntil(this.componentDestroyed$)).subscribe((params: Params) => {
       if (params.searchText) {
         this.query = params.searchText;
         this.onSearchInputChange();