fix: account pages with enabled quoting feature should be at least on…

…e time stable (#1265) * quotingEntities$ facade method has now an option to enable/disable automatic refresh * automaticRefresh is enabled: It will be subscribed to timer() operator only, when application is at least one time stable.
intershop · Sep 28, 2022 · 8ef8768 · 8ef8768
1 parent 4692947
commit 8ef8768
Show file tree

Hide file tree

Showing 6 changed files with 89 additions and 38 deletions.
diff --git a/src/app/extensions/quoting/facades/quoting.facade.ts b/src/app/extensions/quoting/facades/quoting.facade.ts
@@ -1,9 +1,9 @@
-import { Injectable } from '@angular/core';
+import { ApplicationRef, Injectable } from '@angular/core';
 import { Store, select } from '@ngrx/store';
-import { timer } from 'rxjs';
-import { map, sample, switchMap, tap } from 'rxjs/operators';
+import { BehaviorSubject, Observable, OperatorFunction, identity, timer } from 'rxjs';
+import { map, sample, switchMap, take, tap } from 'rxjs/operators';
 
-import { whenFalsy } from 'ish-core/utils/operators';
+import { delayUntil, whenFalsy, whenTruthy } from 'ish-core/utils/operators';
 
 import { QuotingHelper } from '../models/quoting/quoting.helper';
 import { Quote, QuoteRequest, QuotingEntity } from '../models/quoting/quoting.model';
@@ -18,31 +18,28 @@ import {
   loadQuotingDetail,
 } from '../store/quoting';
 
+interface QuoteEntitiesOptions {
+  automaticRefresh?: boolean;
+}
+
 /* eslint-disable @typescript-eslint/member-ordering */
 @Injectable({ providedIn: 'root' })
 export class QuotingFacade {
-  constructor(private store: Store) {}
+  private isStable$ = new BehaviorSubject<boolean>(false);
 
+  constructor(private store: Store, appRef: ApplicationRef) {
+    appRef.isStable.pipe(whenTruthy(), take(1)).subscribe(isStable => this.isStable$.next(isStable));
+  }
   loading$ = this.store.pipe(select(getQuotingLoading));
 
-  quotingEntities$() {
+  quotingEntities$(options: QuoteEntitiesOptions = { automaticRefresh: true }) {
     // update on subscription
     this.loadQuoting();
 
     return this.store.pipe(
       select(getQuotingEntities),
       sample(this.loading$.pipe(whenFalsy())),
-      switchMap(entities =>
-        // update every minute
-        timer(0, 60_000).pipe(
-          tap(count => {
-            if (count) {
-              this.loadQuoting();
-            }
-          }),
-          map(() => entities)
-        )
-      ),
+      options?.automaticRefresh ? this.automaticQuoteRefresh() : identity,
       tap(entities => {
         entities.filter(QuotingHelper.isStub).forEach(entity => {
           this.store.dispatch(loadQuotingDetail({ entity, level: 'List' }));
@@ -81,4 +78,22 @@ export class QuotingFacade {
   deleteQuoteFromBasket(quoteId: string) {
     this.store.dispatch(deleteQuoteFromBasket({ id: quoteId }));
   }
+
+  private automaticQuoteRefresh<T>(): OperatorFunction<T, T> {
+    return (source$: Observable<T>) =>
+      source$.pipe(
+        delayUntil(this.isStable$.pipe(whenTruthy())),
+        switchMap(entities =>
+          // update every minute
+          timer(0, 60_000).pipe(
+            tap(count => {
+              if (count) {
+                this.loadQuoting();
+              }
+            }),
+            map(() => entities)
+          )
+        )
+      );
+  }
 }
diff --git a/src/app/extensions/quoting/pages/quote-list/quote-list-page.component.html b/src/app/extensions/quoting/pages/quote-list/quote-list-page.component.html
@@ -1,5 +1,5 @@
 <h1>{{ 'quote.list.heading' | translate }}</h1>
 
-<ish-quote-list *ngIf="quotes$ | async as quotes" [quotes]="quotes"></ish-quote-list>
+<ish-quote-list *ngIf="quotes" [quotes]="quotes"></ish-quote-list>
 
 <ish-loading *ngIf="loading$ | async"></ish-loading>
diff --git a/src/app/extensions/quoting/pages/quote-list/quote-list-page.component.spec.ts b/src/app/extensions/quoting/pages/quote-list/quote-list-page.component.spec.ts
@@ -1,7 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { TranslateModule } from '@ngx-translate/core';
 import { MockComponent } from 'ng-mocks';
-import { of } from 'rxjs';
+import { EMPTY, of } from 'rxjs';
 import { instance, mock, when } from 'ts-mockito';
 
 import { LoadingComponent } from 'ish-shared/components/common/loading/loading.component';
@@ -25,6 +25,9 @@ describe('Quote List Page Component', () => {
       imports: [TranslateModule.forRoot()],
       providers: [{ provide: QuotingFacade, useFactory: () => instance(quotingFacade) }],
     }).compileComponents();
+
+    when(quotingFacade.quotingEntities$()).thenReturn(of([]));
+    when(quotingFacade.loading$).thenReturn(of(false));
   });
 
   beforeEach(() => {
@@ -40,6 +43,7 @@ describe('Quote List Page Component', () => {
   });
 
   it('should render loading component if quotes loading', () => {
+    when(quotingFacade.quotingEntities$()).thenReturn(EMPTY);
     when(quotingFacade.loading$).thenReturn(of(true));
 
     fixture.detectChanges();

diff --git a/src/app/extensions/quoting/pages/quote-list/quote-list-page.component.ts b/src/app/extensions/quoting/pages/quote-list/quote-list-page.component.ts
@@ -1,5 +1,5 @@
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
-import { Observable } from 'rxjs';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import { Observable, Subject, takeUntil } from 'rxjs';
 
 import { QuotingFacade } from '../../facades/quoting.facade';
 import { Quote, QuoteRequest } from '../../models/quoting/quoting.model';
@@ -9,14 +9,27 @@ import { Quote, QuoteRequest } from '../../models/quoting/quoting.model';
   templateUrl: './quote-list-page.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class QuoteListPageComponent implements OnInit {
+export class QuoteListPageComponent implements OnInit, OnDestroy {
   loading$: Observable<boolean>;
-  quotes$: Observable<(Quote | QuoteRequest)[]>;
+  quotes: (Quote | QuoteRequest)[];
 
-  constructor(private quotingFacade: QuotingFacade) {}
+  private destroy$ = new Subject<void>();
+
+  constructor(private quotingFacade: QuotingFacade, private cd: ChangeDetectorRef) {}
 
   ngOnInit() {
-    this.quotes$ = this.quotingFacade.quotingEntities$();
+    this.quotingFacade
+      .quotingEntities$()
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(quotes => {
+        this.quotes = quotes;
+        this.cd.detectChanges();
+      });
     this.loading$ = this.quotingFacade.loading$;
   }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
 }
diff --git a/src/app/extensions/quoting/shared/quote-widget/quote-widget.component.html b/src/app/extensions/quoting/shared/quote-widget/quote-widget.component.html
@@ -8,15 +8,15 @@
       <div class="row align-items-end no-gutters">
         <div class="col">
           <div class="infobox-count" data-testing-id="responded-counter">
-            {{ respondedQuotes$ | async }}
+            {{ respondedQuotes }}
           </div>
           <div>
             {{ 'account.quotes.widget.responded.label' | translate }}
           </div>
         </div>
         <div class="col text-right">
           <div class="infobox-count-large" data-testing-id="submitted-counter">
-            {{ submittedQuoteRequests$ | async }}
+            {{ submittedQuoteRequests }}
           </div>
           <div>
             {{ 'account.quotes.widget.submitted.label' | translate }}

diff --git a/src/app/extensions/quoting/shared/quote-widget/quote-widget.component.ts b/src/app/extensions/quoting/shared/quote-widget/quote-widget.component.ts
@@ -1,6 +1,6 @@
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
-import { Observable, combineLatest, iif, of } from 'rxjs';
-import { map, switchMap } from 'rxjs/operators';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import { Observable, Subject, combineLatest, iif, of } from 'rxjs';
+import { distinctUntilChanged, map, switchMap, takeUntil } from 'rxjs/operators';
 
 import { GenerateLazyComponent } from 'ish-core/utils/module-loader/generate-lazy-component.decorator';
 
@@ -12,13 +12,15 @@ import { QuotingFacade } from '../../facades/quoting.facade';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 @GenerateLazyComponent()
-export class QuoteWidgetComponent implements OnInit {
+export class QuoteWidgetComponent implements OnInit, OnDestroy {
   loading$: Observable<boolean>;
 
-  respondedQuotes$: Observable<number>;
-  submittedQuoteRequests$: Observable<number>;
+  respondedQuotes: number;
+  submittedQuoteRequests: number;
 
-  constructor(private quotingFacade: QuotingFacade) {}
+  private destroy$ = new Subject<void>();
+
+  constructor(private quotingFacade: QuotingFacade, private cd: ChangeDetectorRef) {}
 
   ngOnInit() {
     this.loading$ = this.quotingFacade.loading$;
@@ -31,9 +33,26 @@ export class QuoteWidgetComponent implements OnInit {
         )
       );
 
-    this.respondedQuotes$ = quotingStates$.pipe(map(states => states.filter(state => state === 'Responded').length));
-    this.submittedQuoteRequests$ = quotingStates$.pipe(
-      map(states => states.filter(state => state === 'Submitted').length)
-    );
+    combineLatest([
+      quotingStates$.pipe(
+        map(states => states.filter(state => state === 'Responded').length),
+        distinctUntilChanged()
+      ),
+      quotingStates$.pipe(
+        map(states => states.filter(state => state === 'Submitted').length),
+        distinctUntilChanged()
+      ),
+    ])
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(([responded, submitted]) => {
+        this.respondedQuotes = responded;
+        this.submittedQuoteRequests = submitted;
+        this.cd.detectChanges();
+      });
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
   }
 }