From 83ac5f98a474cda10bf5f89f4d59993681bc731c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20H=C3=A4hnlein?= Date: Thu, 23 Jul 2020 11:15:53 +0200 Subject: [PATCH] fix: inconsistent breadcrumb updates on category, search & product page --- .../shopping/categories/categories.effects.ts | 15 +++++--- .../shopping/products/products.effects.ts | 17 ++++++--- .../store/shopping/search/search.effects.ts | 24 ++++++++----- .../store/shopping/shopping-store.spec.ts | 36 ++++++++++++------- 4 files changed, 62 insertions(+), 30 deletions(-) diff --git a/src/app/core/store/shopping/categories/categories.effects.ts b/src/app/core/store/shopping/categories/categories.effects.ts index 69650c36df..96d3fd12b3 100644 --- a/src/app/core/store/shopping/categories/categories.effects.ts +++ b/src/app/core/store/shopping/categories/categories.effects.ts @@ -115,11 +115,16 @@ export class CategoriesEffects { ); setBreadcrumbForCategoryPage$ = createEffect(() => - this.store.pipe( - ofCategoryUrl(), - select(getBreadcrumbForCategoryPage), - whenTruthy(), - map(breadcrumbData => setBreadcrumbData({ breadcrumbData })) + this.actions$.pipe( + ofType(routerNavigatedAction), + switchMapTo( + this.store.pipe( + ofCategoryUrl(), + select(getBreadcrumbForCategoryPage), + whenTruthy(), + map(breadcrumbData => setBreadcrumbData({ breadcrumbData })) + ) + ) ) ); } diff --git a/src/app/core/store/shopping/products/products.effects.ts b/src/app/core/store/shopping/products/products.effects.ts index 9b1fbffdbb..b781fe51fb 100644 --- a/src/app/core/store/shopping/products/products.effects.ts +++ b/src/app/core/store/shopping/products/products.effects.ts @@ -3,6 +3,7 @@ import { Inject, Injectable, PLATFORM_ID } from '@angular/core'; import { Router } from '@angular/router'; import { Actions, createEffect, ofType } from '@ngrx/effects'; import { Dictionary } from '@ngrx/entity'; +import { routerNavigatedAction } from '@ngrx/router-store'; import { Store, select } from '@ngrx/store'; import { identity } from 'rxjs'; import { @@ -14,6 +15,7 @@ import { groupBy, map, mergeMap, + switchMapTo, tap, throttleTime, withLatestFrom, @@ -331,11 +333,16 @@ export class ProductsEffects { ); setBreadcrumbForProductPage$ = createEffect(() => - this.store.pipe( - ofProductUrl(), - select(getBreadcrumbForProductPage), - whenTruthy(), - map(breadcrumbData => setBreadcrumbData({ breadcrumbData })) + this.actions$.pipe( + ofType(routerNavigatedAction), + switchMapTo( + this.store.pipe( + ofProductUrl(), + select(getBreadcrumbForProductPage), + whenTruthy(), + map(breadcrumbData => setBreadcrumbData({ breadcrumbData })) + ) + ) ) ); diff --git a/src/app/core/store/shopping/search/search.effects.ts b/src/app/core/store/shopping/search/search.effects.ts index c0165ec522..538032aa7a 100644 --- a/src/app/core/store/shopping/search/search.effects.ts +++ b/src/app/core/store/shopping/search/search.effects.ts @@ -12,6 +12,7 @@ import { map, sample, switchMap, + switchMapTo, tap, withLatestFrom, } from 'rxjs/operators'; @@ -109,14 +110,21 @@ export class SearchEffects { ); setSearchBreadcrumb$ = createEffect(() => - this.store.pipe( - ofUrl(/^\/search.*/), - select(selectRouteParam('searchTerm')), - whenTruthy(), - switchMap(searchTerm => - this.translateService - .get('search.breadcrumbs.your_search.label') - .pipe(map(translation => setBreadcrumbData({ breadcrumbData: [{ text: `${translation} ${searchTerm}` }] }))) + this.actions$.pipe( + ofType(routerNavigatedAction), + switchMapTo( + this.store.pipe( + ofUrl(/^\/search.*/), + select(selectRouteParam('searchTerm')), + whenTruthy(), + switchMap(searchTerm => + this.translateService + .get('search.breadcrumbs.your_search.label') + .pipe( + map(translation => setBreadcrumbData({ breadcrumbData: [{ text: `${translation} ${searchTerm}` }] })) + ) + ) + ) ) ) ); diff --git a/src/app/core/store/shopping/shopping-store.spec.ts b/src/app/core/store/shopping/shopping-store.spec.ts index dd135adea3..3b5ca93527 100644 --- a/src/app/core/store/shopping/shopping-store.spec.ts +++ b/src/app/core/store/shopping/shopping-store.spec.ts @@ -280,6 +280,8 @@ describe('Shopping Store', () => { @ngrx/router-store/navigated: routerState: {"url":"/category/A.123","params":{"categoryUniqueId":"A.123... event: {"id":2,"url":"/category/A.123"} + [Viewconf Internal] Set Breadcrumb Data: + breadcrumbData: [{"text":"nA","link":"/nA-catA"},{"text":"nA123"}] `); })); }); @@ -328,6 +330,8 @@ describe('Shopping Store', () => { event: {"id":2,"url":"/search/something"} [Product Listing] Load More Products: id: {"type":"search","value":"something"} + [Viewconf Internal] Set Breadcrumb Data: + breadcrumbData: [{"text":"search.breadcrumbs.your_search.label something"}] [Product Listing Internal] Load More Products For Params: id: {"type":"search","value":"something"} filters: undefined @@ -413,15 +417,13 @@ describe('Shopping Store', () => { categories: tree(A.123,A.123.456) [Categories Internal] Load Category: categoryId: "A" - [Viewconf Internal] Set Breadcrumb Data: - breadcrumbData: [{"text":"nA123"}] [Categories API] Load Category Success: categories: tree(A,A.123) - [Viewconf Internal] Set Breadcrumb Data: - breadcrumbData: [{"text":"nA","link":"/nA-catA"},{"text":"nA123"}] @ngrx/router-store/navigated: routerState: {"url":"/category/A.123","params":{"categoryUniqueId":"A.123... event: {"id":1,"url":"/category/A.123"} + [Viewconf Internal] Set Breadcrumb Data: + breadcrumbData: [{"text":"nA","link":"/nA-catA"},{"text":"nA123"}] `); })); @@ -497,19 +499,17 @@ describe('Shopping Store', () => { categoryId: "A" [Categories Internal] Load Category: categoryId: "A.123" - [Viewconf Internal] Set Breadcrumb Data: - breadcrumbData: [{"text":"nA123456"}] [Categories API] Load Category Success: categories: tree(A,A.123) [Categories API] Load Category Success: categories: tree(A.123,A.123.456) - [Viewconf Internal] Set Breadcrumb Data: - breadcrumbData: [{"text":"nA","link":"/nA-catA"},{"text":"nA123","link":"/nA... @ngrx/router-store/navigated: routerState: {"url":"/category/A.123.456","params":{"categoryUniqueId":"A... event: {"id":1,"url":"/category/A.123.456"} [Product Listing] Load More Products: id: {"type":"category","value":"A.123.456"} + [Viewconf Internal] Set Breadcrumb Data: + breadcrumbData: [{"text":"nA","link":"/nA-catA"},{"text":"nA123","link":"/nA... [Product Listing Internal] Load More Products For Params: id: {"type":"category","value":"A.123.456"} filters: undefined @@ -588,11 +588,15 @@ describe('Shopping Store', () => { event: {"id":3,"url":"/category/A.123.456"} [Product Listing] Load More Products: id: {"type":"category","value":"A.123.456"} + [Viewconf Internal] Set Breadcrumb Data: + breadcrumbData: [{"text":"nA","link":"/nA-catA"},{"text":"nA123","link":"/nA... @ngrx/router-store/navigated: routerState: {"url":"/category/A.123.456","params":{"categoryUniqueId":"A... event: {"id":3,"url":"/category/A.123.456"} [Product Listing] Load More Products: id: {"type":"category","value":"A.123.456"} + [Viewconf Internal] Set Breadcrumb Data: + breadcrumbData: [{"text":"nA","link":"/nA-catA"},{"text":"nA123","link":"/nA... `); })); }); @@ -620,6 +624,8 @@ describe('Shopping Store', () => { event: {"id":2,"url":"/search/something"} [Product Listing] Load More Products: id: {"type":"search","value":"something"} + [Viewconf Internal] Set Breadcrumb Data: + breadcrumbData: [{"text":"search.breadcrumbs.your_search.label something"}] [Product Listing Internal] Load More Products For Params: id: {"type":"search","value":"something"} filters: undefined @@ -660,6 +666,8 @@ describe('Shopping Store', () => { event: {"id":3,"url":"/category/A.123.456"} [Product Listing] Load More Products: id: {"type":"category","value":"A.123.456"} + [Viewconf Internal] Set Breadcrumb Data: + breadcrumbData: [{"text":"nA","link":"/nA-catA"},{"text":"nA123","link":"/nA... [Product Listing Internal] Load More Products For Params: id: {"type":"category","value":"A.123.456"} filters: undefined @@ -676,6 +684,8 @@ describe('Shopping Store', () => { event: {"id":3,"url":"/category/A.123.456"} [Product Listing] Load More Products: id: {"type":"category","value":"A.123.456"} + [Viewconf Internal] Set Breadcrumb Data: + breadcrumbData: [{"text":"nA","link":"/nA-catA"},{"text":"nA123","link":"/nA... `); })); }); @@ -800,10 +810,10 @@ describe('Shopping Store', () => { @ngrx/router-store/navigation: routerState: {"url":"/category/A.123.456","params":{"categoryUniqueId":"A... event: {"id":2,"url":"/category/A.123.456"} - [Viewconf Internal] Set Breadcrumb Data: - breadcrumbData: [{"text":"nA","link":"/nA-catA"},{"text":"nA123","link":"/nA... [Product Listing] Load More Products: id: {"type":"category","value":"A.123.456"} + [Viewconf Internal] Set Breadcrumb Data: + breadcrumbData: [{"text":"nA","link":"/nA-catA"},{"text":"nA123","link":"/nA... [Product Listing Internal] Load More Products For Params: id: {"type":"category","value":"A.123.456"} filters: undefined @@ -831,6 +841,8 @@ describe('Shopping Store', () => { event: {"id":2,"url":"/category/A.123.456"} [Product Listing] Load More Products: id: {"type":"category","value":"A.123.456"} + [Viewconf Internal] Set Breadcrumb Data: + breadcrumbData: [{"text":"nA","link":"/nA-catA"},{"text":"nA123","link":"/nA... `); })); @@ -1074,13 +1086,13 @@ describe('Shopping Store', () => { @ngrx/router-store/navigation: routerState: {"url":"/search/something","params":{"searchTerm":"something... event: {"id":1,"url":"/search/something"} - [Viewconf Internal] Set Breadcrumb Data: - breadcrumbData: [{"text":"search.breadcrumbs.your_search.label something"}] @ngrx/router-store/navigated: routerState: {"url":"/search/something","params":{"searchTerm":"something... event: {"id":1,"url":"/search/something"} [Product Listing] Load More Products: id: {"type":"search","value":"something"} + [Viewconf Internal] Set Breadcrumb Data: + breadcrumbData: [{"text":"search.breadcrumbs.your_search.label something"}] [Product Listing Internal] Load More Products For Params: id: {"type":"search","value":"something"} filters: undefined