diff --git a/marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-detail-feedback.component.spec.ts b/marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-detail-feedback.component.spec.ts index 628d0ad0..131db4f1 100644 --- a/marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-detail-feedback.component.spec.ts +++ b/marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-detail-feedback.component.spec.ts @@ -39,13 +39,13 @@ describe('ProductDetailFeedbackComponent', () => { mockProductFeedbackService = jasmine.createSpyObj( 'ProductFeedbackService', [ - 'initFeedbacks', + 'fetchFeedbacks', 'findProductFeedbackOfUser', 'loadMoreFeedbacks', 'areAllFeedbacksLoaded', 'totalElements' ], - {feedbacks: signal([] as Feedback[]), sort: signal('updatedAt,desc')} + { feedbacks: signal([] as Feedback[]), sort: signal('updatedAt,desc') } ); mockProductStarRatingService = jasmine.createSpyObj( 'ProductStarRatingService', diff --git a/marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-feedbacks-panel/product-feedback.service.spec.ts b/marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-feedbacks-panel/product-feedback.service.spec.ts index df7abd88..d326b086 100644 --- a/marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-feedbacks-panel/product-feedback.service.spec.ts +++ b/marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-feedbacks-panel/product-feedback.service.spec.ts @@ -62,20 +62,26 @@ describe('ProductFeedbackService', () => { it('should initialize feedbacks', () => { const mockResponse = { - _embedded: { feedbacks: [{ content: 'Great product!', rating: 5, productId: '123' }] }, + _embedded: { + feedbacks: [{ content: 'Great product!', rating: 5, productId: '123' }] + }, page: { totalPages: 2, totalElements: 5 } }; productDetailService.productId.and.returnValue('123'); - service.initFeedbacks(); - const req = httpMock.expectOne('api/feedback/product/123?page=0&size=8&sort=newest'); + service.fetchFeedbacks(); + const req = httpMock.expectOne( + 'api/feedback/product/123?page=0&size=8&sort=newest' + ); expect(req.request.method).toBe('GET'); req.flush(mockResponse); expect(service.totalPages()).toBe(2); expect(service.totalElements()).toBe(5); - expect(service.feedbacks()).toEqual([{ content: 'Great product!', rating: 5, productId: '123' }]); + expect(service.feedbacks()).toEqual([ + { content: 'Great product!', rating: 5, productId: '123' } + ]); }); it('should load more feedbacks', () => { @@ -85,17 +91,27 @@ describe('ProductFeedbackService', () => { const additionalFeedback: Feedback[] = [ { content: 'Another review', rating: 4, productId: '123' } ]; - + productDetailService.productId.and.returnValue('123'); - service.initFeedbacks(); - const initReq = httpMock.expectOne('api/feedback/product/123?page=0&size=8&sort=newest'); - initReq.flush({ _embedded: { feedbacks: initialFeedback }, page: { totalPages: 2, totalElements: 5 } }); - + service.fetchFeedbacks(); + const initReq = httpMock.expectOne( + 'api/feedback/product/123?page=0&size=8&sort=newest' + ); + initReq.flush({ + _embedded: { feedbacks: initialFeedback }, + page: { totalPages: 2, totalElements: 5 } + }); + service.loadMoreFeedbacks(); - const loadMoreReq = httpMock.expectOne('api/feedback/product/123?page=1&size=8&sort=newest'); + const loadMoreReq = httpMock.expectOne( + 'api/feedback/product/123?page=1&size=8&sort=newest' + ); loadMoreReq.flush({ _embedded: { feedbacks: additionalFeedback } }); - expect(service.feedbacks()).toEqual([...initialFeedback, ...additionalFeedback]); + expect(service.feedbacks()).toEqual([ + ...initialFeedback, + ...additionalFeedback + ]); }); it('should change sort and fetch feedbacks', () => { diff --git a/marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-feedbacks-panel/product-feedback.service.ts b/marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-feedbacks-panel/product-feedback.service.ts index d6fe89da..dba2bac0 100644 --- a/marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-feedbacks-panel/product-feedback.service.ts +++ b/marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-feedbacks-panel/product-feedback.service.ts @@ -70,7 +70,7 @@ export class ProductFeedbackService { }) .pipe( tap(() => { - this.initFeedbacks(); + this.fetchFeedbacks(); this.findProductFeedbackOfUser().subscribe(); this.productStarRatingService.fetchData(); }), @@ -100,7 +100,9 @@ export class ProductFeedbackService { return this.http .get(requestURL, { params: requestParams, - context: new HttpContext().set(SkipLoading, true).set(ForwardingError, true) + context: new HttpContext() + .set(SkipLoading, true) + .set(ForwardingError, true) }) .pipe( tap(response => { @@ -152,11 +154,9 @@ export class ProductFeedbackService { ); } - initFeedbacks(): void { - this.page.set(0); - this.findProductFeedbacksByCriteria().subscribe(response => { - this.totalPages.set(response.page.totalPages); - this.totalElements.set(response.page.totalElements); + fetchFeedbacks(): void { + this.getInitFeedbacksObservable().subscribe(response => { + this.setInitFeedbacksObservable(response); }); } @@ -174,4 +174,13 @@ export class ProductFeedbackService { private clearTokenCookie(): void { this.cookieService.delete(TOKEN_KEY); } + + handleFeedbackApiResponse(response: FeedbackApiResponse) { + this.totalPages.set(response.page.totalPages); + this.totalElements.set(response.page.totalElements); + } + getInitFeedbacksObservable() { + this.page.set(0); + return this.findProductFeedbacksByCriteria(); + } } \ No newline at end of file diff --git a/marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-star-rating-panel/product-star-rating.service.ts b/marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-star-rating-panel/product-star-rating.service.ts index c8af47d1..893c31cf 100644 --- a/marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-star-rating-panel/product-star-rating.service.ts +++ b/marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-star-rating-panel/product-star-rating.service.ts @@ -7,7 +7,7 @@ import { signal, WritableSignal } from '@angular/core'; -import { tap } from 'rxjs'; +import { Observable, tap } from 'rxjs'; import { StarRatingCounting } from '../../../../../shared/models/star-rating-counting.model'; import { ProductDetailService } from '../../product-detail.service'; import { SkipLoading } from '../../../../../core/interceptors/api.interceptor'; @@ -28,16 +28,7 @@ export class ProductStarRatingService { ); fetchData(productId: string = this.productDetailService.productId()): void { - const requestURL = `api/feedback/product/${productId}/rating`; - this.http - .get(requestURL, {context: new HttpContext().set(SkipLoading, true)}) - .pipe( - tap(data => { - this.sortByStar(data); - this.starRatings.set(data); - }) - ) - .subscribe(); + this.getRatingObservable(productId).subscribe(); } private sortByStar(starRatings: StarRatingCounting[]): void { @@ -64,4 +55,18 @@ export class ProductStarRatingService { return Math.round(reviewNumber * 10) / 10; } + + getRatingObservable(id: string): Observable { + const requestURL = `api/feedback/product/${id}/rating`; + return this.http + .get(requestURL, { + context: new HttpContext().set(SkipLoading, true) + }) + .pipe( + tap(data => { + this.sortByStar(data); + this.starRatings.set(data); + }) + ); + } } diff --git a/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.ts b/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.ts index 3435d1a8..53d760ea 100644 --- a/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.ts +++ b/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.ts @@ -157,20 +157,18 @@ export class ProductDetailComponent { const productId = this.route.snapshot.params[ROUTER.ID]; this.productDetailService.productId.set(productId); if (productId) { - const observable = forkJoin({ - productDetail: this.getProductContentObservable(productId) - }); - // const productDetail = this.getProductContentObservable(productId); forkJoin({ - productDetail: this.getProductContentObservable(productId) + productDetail: this.getProductDetailObservable(productId), + productFeedBack: this.productFeedbackService.getInitFeedbacksObservable(), + rating: this.productStarRatingService.getRatingObservable(productId), + }).subscribe(res => { - this.getProductContent(res.productDetail); + this.handleProductDetail(res.productDetail); + this.productFeedbackService.handleFeedbackApiResponse(res.productFeedBack); + res.rating; + this.updateDropdownSelection(); + this.checkMediaSize(); }); - this.getProductContent(productId); - this.productFeedbackService.initFeedbacks(); - this.productStarRatingService.fetchData(); - this.updateDropdownSelection(); - this.checkMediaSize(); this.getUserFeedBack(); } } @@ -189,7 +187,7 @@ export class ProductDetailComponent { }); } - getProductContentObservable(productId: string) { + getProductDetailObservable(productId: string): Observable { const isShowDevVersion = CommonUtils.getCookieValue( this.cookieService, SHOW_DEV_VERSION, @@ -198,7 +196,7 @@ export class ProductDetailComponent { return this.getProductById(productId, isShowDevVersion); } - getProductContent(productDetail: ProductDetail) { + handleProductDetail(productDetail: ProductDetail) { this.productDetail.set(productDetail); this.productModuleContent.set(productDetail.productModuleContent); this.metaProductJsonUrl = productDetail.metaProductJsonUrl;