From c7cd94674e33b95c73c3df3ab81915f6cc1d82e6 Mon Sep 17 00:00:00 2001 From: Marcel Eisentraut Date: Fri, 31 Mar 2023 16:25:16 +0200 Subject: [PATCH 1/2] fix: toaster should not be rendered during ssr --- .../store/core/messages/messages.effects.ts | 114 ++++++++++-------- 1 file changed, 67 insertions(+), 47 deletions(-) diff --git a/src/app/core/store/core/messages/messages.effects.ts b/src/app/core/store/core/messages/messages.effects.ts index 38de8b2c56..c75845b8e9 100644 --- a/src/app/core/store/core/messages/messages.effects.ts +++ b/src/app/core/store/core/messages/messages.effects.ts @@ -5,7 +5,7 @@ import { routerRequestAction } from '@ngrx/router-store'; import { Store, select } from '@ngrx/store'; import { TranslateService } from '@ngx-translate/core'; import { ActiveToast, IndividualConfig, ToastrService } from 'ngx-toastr'; -import { OperatorFunction, Subject, combineLatest } from 'rxjs'; +import { EMPTY, OperatorFunction, Subject, combineLatest, iif } from 'rxjs'; import { filter, map, switchMap, take, tap, withLatestFrom } from 'rxjs/operators'; import { getDeviceType } from 'ish-core/store/core/configuration'; @@ -34,77 +34,97 @@ export class MessagesEffects { infoToast$ = createEffect( () => - this.actions$.pipe( - ofType(displayInfoMessage), - mapToPayload(), - this.composeToastServiceArguments(0), - map(args => this.toastr.info(...args)), - tap(() => { - this.applyStyle$.next(); - }), - this.closeToastOnRouting() + iif( + () => !SSR, + this.actions$.pipe( + ofType(displayInfoMessage), + mapToPayload(), + this.composeToastServiceArguments(0), + map(args => this.toastr.info(...args)), + tap(() => { + this.applyStyle$.next(); + }), + this.closeToastOnRouting() + ), + EMPTY ), { dispatch: false } ); errorToast$ = createEffect( () => - this.actions$.pipe( - ofType(displayErrorMessage), - mapToPayload(), - this.composeToastServiceArguments(0), - map(args => this.toastr.error(...args)), - tap(() => { - this.applyStyle$.next(); - }), - this.closeToastOnRouting() + iif( + () => !SSR, + this.actions$.pipe( + ofType(displayErrorMessage), + mapToPayload(), + this.composeToastServiceArguments(0), + map(args => this.toastr.error(...args)), + tap(() => { + this.applyStyle$.next(); + }), + this.closeToastOnRouting() + ), + EMPTY ), { dispatch: false } ); warningToast$ = createEffect( () => - this.actions$.pipe( - ofType(displayWarningMessage), - mapToPayload(), - this.composeToastServiceArguments(0), - map(args => this.toastr.warning(...args)), - tap(() => { - this.applyStyle$.next(); - }), - this.closeToastOnRouting() + iif( + () => !SSR, + this.actions$.pipe( + ofType(displayWarningMessage), + mapToPayload(), + this.composeToastServiceArguments(0), + map(args => this.toastr.warning(...args)), + tap(() => { + this.applyStyle$.next(); + }), + this.closeToastOnRouting() + ), + EMPTY ), { dispatch: false } ); successToast$ = createEffect( () => - this.actions$.pipe( - ofType(displaySuccessMessage), - mapToPayload(), - filter(payload => !!payload?.message), - this.composeToastServiceArguments(), - map(args => this.toastr.success(...args)), - tap(() => { - this.applyStyle$.next(); - }) + iif( + () => !SSR, + this.actions$.pipe( + ofType(displaySuccessMessage), + mapToPayload(), + filter(payload => !!payload?.message), + this.composeToastServiceArguments(), + map(args => this.toastr.success(...args)), + tap(() => { + this.applyStyle$.next(); + }) + ), + EMPTY ), { dispatch: false } ); setToastStickyClass$ = createEffect( () => - combineLatest([this.store.pipe(select(isStickyHeader)), this.applyStyle$]).pipe( - tap(([sticky]) => { - const container = this.document.getElementById('toast-container'); - if (container) { - if (sticky) { - container.classList.add('toast-sticky'); - } else { - container.classList.remove('toast-sticky'); + iif( + () => !SSR, + combineLatest([this.store.pipe(select(isStickyHeader)), this.applyStyle$]).pipe( + tap(([sticky]) => { + const container = this.document.getElementById('toast-container'); + if (container) { + if (sticky) { + container.classList.add('toast-sticky'); + } else { + container.classList.remove('toast-sticky'); + } } - } - }) + }) + ), + EMPTY ), { dispatch: false } ); From fec852bd036403ff8b7c0c809c5138debacbcac9 Mon Sep 17 00:00:00 2001 From: Marcel Eisentraut Date: Mon, 3 Apr 2023 09:40:45 +0200 Subject: [PATCH 2/2] refactor: loadBasketOnBasketPage$ effect should only be triggered on browser side --- .../store/customer/basket/basket.effects.ts | 24 +++++++++++-------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/src/app/core/store/customer/basket/basket.effects.ts b/src/app/core/store/customer/basket/basket.effects.ts index 54b2e7c540..ab45ca9d36 100644 --- a/src/app/core/store/customer/basket/basket.effects.ts +++ b/src/app/core/store/customer/basket/basket.effects.ts @@ -355,17 +355,21 @@ export class BasketEffects { * Reload basket information on basket route to ensure that rendered page is correct. */ loadBasketOnBasketPage$ = createEffect(() => - this.actions$.pipe( - ofType(personalizationStatusDetermined), - take(1), - switchMap(() => - this.actions$.pipe( - ofType(routerNavigatedAction), - mapToRouterState(), - filter(routerState => /^\/basket/.test(routerState.url)), - map(() => loadBasket()) + iif( + () => !SSR, + this.actions$.pipe( + ofType(personalizationStatusDetermined), + take(1), + switchMap(() => + this.actions$.pipe( + ofType(routerNavigatedAction), + mapToRouterState(), + filter(routerState => /^\/basket/.test(routerState.url)), + map(() => loadBasket()) + ) ) - ) + ), + EMPTY ) );