Fix search pagination cache + stop subscriptions (#170)

* FIX search pagination cache

* FIX pagination's cache on catalog search + close every subscription when components are destroyed

Author: laraminones

src/app/offerings/gallery/gallery.component.ts

@@ -1,23 +1,25 @@
-import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
+import { Component, OnInit, ChangeDetectorRef, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import {CardComponent} from "../../shared/card/card.component";
 import {components} from "../../models/product-catalog";
 type ProductOffering = components["schemas"]["ProductOffering"];
 import { ApiServiceService } from 'src/app/services/product-service.service';
 import {ThemeService} from "../../services/theme.service";
 import {ThemeConfig} from "../../themes";
-import { Subscription } from 'rxjs';
+import { Subscription, Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
 @Component({
   selector: 'bae-off-gallery',
   templateUrl: './gallery.component.html',
   styleUrl: './gallery.component.css'
 })
-export class GalleryComponent implements OnInit {
+export class GalleryComponent implements OnInit, OnDestroy {
 
   products: ProductOffering[]=[];
   private themeSubscription: Subscription = new Subscription();
   currentTheme: ThemeConfig | null = null;
+  private destroy$ = new Subject<void>();
 
   constructor(
     private api: ApiServiceService,
@@ -29,7 +31,9 @@ export class GalleryComponent implements OnInit {
   gallery_limit=4;
 
   ngOnInit() {
-    this.themeSubscription = this.themeService.currentTheme$.subscribe(theme => {
+    this.themeSubscription = this.themeService.currentTheme$
+    .pipe(takeUntil(this.destroy$))
+    .subscribe(theme => {
       this.currentTheme = theme;
     });
     console.log('API RESPONSE:')
@@ -107,4 +111,9 @@ export class GalleryComponent implements OnInit {
     console.log(this.products)
   }
 
+  ngOnDestroy(){
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
 }

src/app/pages/admin/admin.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
+import { Component, OnInit, ChangeDetectorRef, OnDestroy } from '@angular/core';
 import { Router } from '@angular/router';
 import { FormControl } from '@angular/forms';
 import {faIdCard, faSort, faSwatchbook} from "@fortawesome/pro-solid-svg-icons";
@@ -10,26 +10,31 @@ import {LocalStorageService} from "src/app/services/local-storage.service";
 import { LoginInfo } from 'src/app/models/interfaces';
 import { initFlowbite } from 'flowbite';
 import {EventMessageService} from "../../services/event-message.service";
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
 @Component({
   selector: 'app-admin',
   templateUrl: './admin.component.html',
   styleUrl: './admin.component.css'
 })
-export class AdminComponent implements OnInit {
+export class AdminComponent implements OnInit, OnDestroy {
   show_categories:boolean = true;
   show_create_categories:boolean = false;
   show_update_categories:boolean = false;
   show_verification:boolean = false;
   show_revenue:boolean = false;
+  private destroy$ = new Subject<void>();
 
   category_to_update:any;
   constructor(
     private localStorage: LocalStorageService,
     private cdr: ChangeDetectorRef,
     private eventMessage: EventMessageService
   ) {
-    this.eventMessage.messages$.subscribe(ev => {
+    this.eventMessage.messages$
+    .pipe(takeUntil(this.destroy$))
+    .subscribe(ev => {
       if(ev.type === 'AdminCategories' && ev.value == true) {        
         this.goToCategories();
       }
@@ -47,6 +52,11 @@ export class AdminComponent implements OnInit {
     console.log('init')
   }
 
+  ngOnDestroy(){
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
   goToCategories(){
     this.selectCategories();
     this.show_categories = true;

src/app/pages/admin/categories/categories.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
+import { Component, OnInit, ChangeDetectorRef, OnDestroy } from '@angular/core';
 import { Router } from '@angular/router';
 import { FormControl } from '@angular/forms';
 import {faIdCard, faSort, faSwatchbook} from "@fortawesome/pro-solid-svg-icons";
@@ -10,13 +10,15 @@ import {LocalStorageService} from "src/app/services/local-storage.service";
 import { LoginInfo } from 'src/app/models/interfaces';
 import {EventMessageService} from "src/app/services/event-message.service";
 import { initFlowbite } from 'flowbite';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
 @Component({
   selector: 'admin-categories',
   templateUrl: './categories.component.html',
   styleUrl: './categories.component.css'
 })
-export class CategoriesComponent {
+export class CategoriesComponent implements OnDestroy {
   protected readonly faIdCard = faIdCard;
   protected readonly faSort = faSort;
   protected readonly faSwatchbook = faSwatchbook;
@@ -29,6 +31,7 @@ export class CategoriesComponent {
   loading: boolean = false;
   partyId:any;
   status:any[]=['Active','Launched'];
+  private destroy$ = new Subject<void>();
 
   constructor(
     private router: Router,
@@ -37,7 +40,9 @@ export class CategoriesComponent {
     private localStorage: LocalStorageService,
     private eventMessage: EventMessageService,
   ) {
-    this.eventMessage.messages$.subscribe(ev => {
+    this.eventMessage.messages$
+    .pipe(takeUntil(this.destroy$))
+    .subscribe(ev => {
       if(ev.type === 'ChangedSession') {
         this.initCatalogs();
       }
@@ -48,6 +53,11 @@ export class CategoriesComponent {
     this.initCatalogs();
   }
 
+  ngOnDestroy(){
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
   initCatalogs(){
     this.loading=true;
     this.categories=[];

src/app/pages/admin/categories/create-category/create-category.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, ChangeDetectorRef, HostListener, ElementRef, ViewChild } from '@angular/core';
+import { Component, OnInit, ChangeDetectorRef, HostListener, ElementRef, ViewChild, OnDestroy } from '@angular/core';
 import { Router } from '@angular/router';
 import { ApiServiceService } from 'src/app/services/product-service.service';
 import {LocalStorageService} from "src/app/services/local-storage.service";
@@ -7,6 +7,8 @@ import { LoginInfo } from 'src/app/models/interfaces';
 import { initFlowbite } from 'flowbite';
 import { FormGroup, FormControl, Validators } from '@angular/forms';
 import * as moment from 'moment';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
 import {components} from "src/app/models/product-catalog";
 type Category_Create = components["schemas"]["Category_Create"];
@@ -16,7 +18,7 @@ type Category_Create = components["schemas"]["Category_Create"];
   templateUrl: './create-category.component.html',
   styleUrl: './create-category.component.css'
 })
-export class CreateCategoryComponent implements OnInit {
+export class CreateCategoryComponent implements OnInit, OnDestroy {
   partyId:any='';
   categoryToCreate:Category_Create | undefined;
 
@@ -50,6 +52,7 @@ export class CreateCategoryComponent implements OnInit {
 
   errorMessage:any='';
   showError:boolean=false;
+  private destroy$ = new Subject<void>();
 
   constructor(
     private router: Router,
@@ -59,7 +62,9 @@ export class CreateCategoryComponent implements OnInit {
     private elementRef: ElementRef,
     private api: ApiServiceService
   ) {
-    this.eventMessage.messages$.subscribe(ev => {
+    this.eventMessage.messages$
+    .pipe(takeUntil(this.destroy$))
+    .subscribe(ev => {
       if(ev.type === 'ChangedSession') {
         this.initPartyInfo();
       }
@@ -81,6 +86,11 @@ export class CreateCategoryComponent implements OnInit {
     this.initPartyInfo();
   }
 
+  ngOnDestroy(){
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
   initPartyInfo(){
     let aux = this.localStorage.getObject('login_items') as LoginInfo;
     if(JSON.stringify(aux) != '{}' && (((aux.expire - moment().unix())-4) > 0)) {

src/app/pages/admin/categories/update-category/update-category.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, ChangeDetectorRef, HostListener, ElementRef, ViewChild, Input } from '@angular/core';
+import { Component, OnInit, ChangeDetectorRef, HostListener, ElementRef, ViewChild, Input, OnDestroy } from '@angular/core';
 import { Router } from '@angular/router';
 import { ApiServiceService } from 'src/app/services/product-service.service';
 import {LocalStorageService} from "src/app/services/local-storage.service";
@@ -7,6 +7,8 @@ import { LoginInfo } from 'src/app/models/interfaces';
 import { initFlowbite } from 'flowbite';
 import { FormGroup, FormControl, Validators } from '@angular/forms';
 import * as moment from 'moment';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
 import {components} from "src/app/models/product-catalog";
 type Category_Update = components["schemas"]["Category_Update"];
@@ -16,7 +18,7 @@ type Category_Update = components["schemas"]["Category_Update"];
   templateUrl: './update-category.component.html',
   styleUrl: './update-category.component.css'
 })
-export class UpdateCategoryComponent implements OnInit {
+export class UpdateCategoryComponent implements OnInit, OnDestroy {
   @Input() category: any;
 
   partyId:any='';
@@ -55,6 +57,7 @@ export class UpdateCategoryComponent implements OnInit {
 
   errorMessage:any='';
   showError:boolean=false;
+  private destroy$ = new Subject<void>();
 
   constructor(
     private router: Router,
@@ -64,7 +67,9 @@ export class UpdateCategoryComponent implements OnInit {
     private elementRef: ElementRef,
     private api: ApiServiceService
   ) {
-    this.eventMessage.messages$.subscribe(ev => {
+    this.eventMessage.messages$
+    .pipe(takeUntil(this.destroy$))
+    .subscribe(ev => {
       if(ev.type === 'ChangedSession') {
         this.initPartyInfo();
       }
@@ -86,6 +91,11 @@ export class UpdateCategoryComponent implements OnInit {
     this.initPartyInfo();
   }
 
+  ngOnDestroy(){
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
   initPartyInfo(){
     let aux = this.localStorage.getObject('login_items') as LoginInfo;
     if(JSON.stringify(aux) != '{}' && (((aux.expire - moment().unix())-4) > 0)) {

src/app/pages/checkout/billing-address/billing-address.component.ts

@@ -1,18 +1,20 @@
-import {Component, EventEmitter, HostListener, Input, OnInit, Output} from '@angular/core';
+import {Component, EventEmitter, HostListener, Input, OnDestroy, OnInit, Output} from '@angular/core';
 import {billingAccountCart} from "../../../models/interfaces";
 import {TranslateModule} from "@ngx-translate/core";
 import {NgClass} from "@angular/common";
 import {BillingAccountFormComponent} from "../../../shared/billing-account-form/billing-account-form.component";
 import { AccountServiceService } from 'src/app/services/account-service.service';
 import { LocalStorageService } from 'src/app/services/local-storage.service';
 import {EventMessageService} from "../../../services/event-message.service";
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
 @Component({
   selector: 'app-billing-address',
   templateUrl: './billing-address.component.html',
   styleUrl: './billing-address.component.css'
 })
-export class BillingAddressComponent {
+export class BillingAddressComponent implements OnDestroy {
   @Input() position: number = 0;
   @Input() data: billingAccountCart = {
     id: '',
@@ -32,13 +34,16 @@ export class BillingAddressComponent {
   };
   @Output() selectedEvent= new EventEmitter<billingAccountCart>();
   @Output() deletedEvent= new EventEmitter<billingAccountCart>();
+  private destroy$ = new Subject<void>();
 
   constructor(
     private localStorage: LocalStorageService,
     private accountService: AccountServiceService,
     private eventMessage: EventMessageService
   ) {
-    this.eventMessage.messages$.subscribe(ev => {
+    this.eventMessage.messages$
+    .pipe(takeUntil(this.destroy$))
+    .subscribe(ev => {
       if(ev.value == false){
         this.editBill=false;
       }
@@ -84,4 +89,9 @@ export class BillingAddressComponent {
       return false
     }   
   }
+
+  ngOnDestroy(){
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
 }

src/app/pages/checkout/checkout.component.ts

@@ -1,4 +1,4 @@
-import {ChangeDetectorRef, Component, HostListener, OnInit} from '@angular/core';
+import {ChangeDetectorRef, Component, HostListener, OnDestroy, OnInit} from '@angular/core';
 import {firstValueFrom, lastValueFrom} from 'rxjs';
 import {TranslateModule} from "@ngx-translate/core";
 import {LocalStorageService} from "../../services/local-storage.service";
@@ -20,14 +20,16 @@ import {BillingAccountFormComponent} from "../../shared/billing-account-form/bil
 import { PaymentService } from 'src/app/services/payment.service';
 import { v4 as uuidv4 } from 'uuid';
 import { data } from 'jquery';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
 
 @Component({
   selector: 'app-checkout',
   templateUrl: './checkout.component.html',
   styleUrl: './checkout.component.css'
 })
-export class CheckoutComponent implements OnInit {
+export class CheckoutComponent implements OnInit, OnDestroy {
   protected readonly faCartShopping = faCartShopping;
   public static BASE_URL: String = environment.BASE_URL;
   PURCHASE_ENABLED: boolean = environment.PURCHASE_ENABLED;
@@ -52,6 +54,7 @@ export class CheckoutComponent implements OnInit {
   providerId:any = null;
   loadingItems:boolean=false;
   orderNote: string = '';
+  private destroy$ = new Subject<void>();
 
   constructor(
     private localStorage: LocalStorageService,
@@ -67,7 +70,9 @@ export class CheckoutComponent implements OnInit {
     private route: ActivatedRoute) {
     // Bind the method to preserve context
     this.orderProduct = this.orderProduct.bind(this);
-    this.eventMessage.messages$.subscribe(async ev => {
+    this.eventMessage.messages$
+    .pipe(takeUntil(this.destroy$))
+    .subscribe(async ev => {
       if (ev.type === 'BillAccChanged') {
         this.getBilling();
       }
@@ -363,6 +368,11 @@ export class CheckoutComponent implements OnInit {
     }
   }
 
+  ngOnDestroy(){
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
   async initCheckoutData() {
     this.providerId = this.route.snapshot.paramMap.get('id');
     let aux = this.localStorage.getObject('login_items') as LoginInfo;