Fix minor issue from FE

axonivy-market · Jul 23, 2024 · 301fd27 · 301fd27
1 parent 6f36d4e
commit 301fd27
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 50 deletions.
diff --git a/.../product/product-detail/product-detail-feedback/product-detail-feedback.component.spec.ts b/.../product/product-detail/product-detail-feedback/product-detail-feedback.component.spec.ts
@@ -95,13 +95,6 @@ describe('ProductDetailFeedbackComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should initialize feedbacks and star ratings on ngOnInit', () => {
-    expect(
-      mockProductFeedbackService.findProductFeedbackOfUser
-    ).toHaveBeenCalled();
-    expect(mockProductStarRatingService.fetchData).toHaveBeenCalled();
-  });
-
   it('should render ProductStarRatingPanelComponent and ProductFeedbacksPanelComponent', () => {
     const starRatingPanel = fixture.debugElement.query(
       By.directive(ProductStarRatingPanelComponent)

diff --git a/...dules/product/product-detail/product-detail-feedback/product-detail-feedback.component.ts b/...dules/product/product-detail/product-detail-feedback/product-detail-feedback.component.ts
@@ -31,7 +31,7 @@ const MAX_ELEMENTS = 6;
   templateUrl: './product-detail-feedback.component.html',
   styleUrls: ['./product-detail-feedback.component.scss']
 })
-export class ProductDetailFeedbackComponent implements OnInit {
+export class ProductDetailFeedbackComponent {
   isMobileMode = input<boolean>();
   isShowBtnMore: Signal<boolean> = computed(() => {
     if (
@@ -46,18 +46,9 @@ export class ProductDetailFeedbackComponent implements OnInit {
 
   productFeedbackService = inject(ProductFeedbackService);
   appModalService = inject(AppModalService);
-  private readonly productStarRatingService = inject(ProductStarRatingService);
-  private readonly authService = inject(AuthService);
-  private readonly route = inject(ActivatedRoute);
-  private readonly router = inject(Router);
 
   showPopup!: boolean;
 
-  ngOnInit(): void {
-    this.productFeedbackService.findProductFeedbackOfUser();
-    this.productStarRatingService.fetchData();
-  }
-
   openShowFeedbacksDialog(): void {
     if (this.isMobileMode()) {
       this.productFeedbackService.loadMoreFeedbacks();

diff --git a/...t-detail/product-detail-feedback/product-feedbacks-panel/product-feedback.service.spec.ts b/...t-detail/product-detail-feedback/product-feedbacks-panel/product-feedback.service.spec.ts
@@ -112,22 +112,4 @@ describe('ProductFeedbackService', () => {
 
     expect(service.feedbacks()).toEqual([{ content: 'Sorting test', rating: 3, productId: '123' }]);
   });
-
-  it('should find product feedback of user', () => {
-    const mockFeedback: Feedback = {
-      content: 'User feedback',
-      rating: 5,
-      productId: '123'
-    };
-
-    authService.getUserId.and.returnValue('user123');
-    productDetailService.productId.and.returnValue('123');
-
-    service.findProductFeedbackOfUser();
-    const req = httpMock.expectOne('api/feedback?productId=123&userId=user123');
-    expect(req.request.method).toBe('GET');
-    req.flush(mockFeedback);
-
-    expect(service.userFeedback()).toEqual(mockFeedback);
-  });
 });
diff --git a/...roduct-detail/product-detail-feedback/product-feedbacks-panel/product-feedback.service.ts b/...roduct-detail/product-detail-feedback/product-feedbacks-panel/product-feedback.service.ts
@@ -96,13 +96,13 @@ export class ProductFeedbackService {
 
   findProductFeedbackOfUser(
     productId: string = this.productDetailService.productId()
-  ): void {
+  ): Observable<Feedback> {
     const params = new HttpParams()
       .set('productId', productId)
       .set('userId', this.authService.getUserId() ?? '');
     const requestURL = FEEDBACK_API_URL;
 
-    this.http
+    return this.http
       .get<Feedback>(requestURL, {
         params,
         context: new HttpContext().set(SkipLoading, true)
@@ -120,8 +120,7 @@ export class ProductFeedbackService {
           this.userFeedback.set(feedback);
           return of(feedback);
         })
-      )
-      .subscribe();
+      );
   }
 
   initFeedbacks(): void {

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
@@ -27,10 +27,9 @@ import { ProductFeedbackService } from './product-detail-feedback/product-feedba
 import { AppModalService } from '../../../shared/services/app-modal.service';
 import { AuthService } from '../../../auth/auth.service';
 import { ProductStarRatingNumberComponent } from './product-star-rating-number/product-star-rating-number.component';
-import {
-  ProductInstallationCountActionComponent
-} from "./product-installation-count-action/product-installation-count-action.component";
+import { ProductInstallationCountActionComponent } from './product-installation-count-action/product-installation-count-action.component';
 import { ProductTypeIconPipe } from '../../../shared/pipes/icon.pipe';
+import { ProductStarRatingService } from './product-detail-feedback/product-star-rating-panel/product-star-rating.service';
 
 export interface DetailTab {
   activeClass: string;
@@ -56,7 +55,7 @@ const DEFAULT_ACTIVE_TAB = 'description';
     MultilingualismPipe,
     ProductDetailFeedbackComponent,
     ProductInstallationCountActionComponent,
-    ProductTypeIconPipe,
+    ProductTypeIconPipe
   ],
   providers: [ProductService, MarkdownService],
   templateUrl: './product-detail.component.html',
@@ -70,6 +69,7 @@ export class ProductDetailComponent {
   languageService = inject(LanguageService);
   productDetailService = inject(ProductDetailService);
   productFeedbackService = inject(ProductFeedbackService);
+  productStarRatingService = inject(ProductStarRatingService);
   appModalService = inject(AppModalService);
   authService = inject(AuthService);
   elementRef = inject(ElementRef);
@@ -119,6 +119,7 @@ export class ProductDetailComponent {
           this.installationCount = productDetail.installationCount;
         });
       this.productFeedbackService.initFeedbacks();
+      this.productStarRatingService.fetchData();
     }
 
     const savedTab = localStorage.getItem(STORAGE_ITEM);
@@ -130,13 +131,16 @@ export class ProductDetailComponent {
 
   ngAfterViewInit(): void {
     this.checkMediaSize();
-    this.route.queryParams.subscribe(params => {
-      this.showPopup = params['showPopup'] === 'true';
-      if (this.showPopup && this.authService.getToken()) {
-        this.appModalService.openAddFeedbackDialog().then(
-          () => this.removeQueryParam()
-        );
-      }
+    this.productFeedbackService.findProductFeedbackOfUser().subscribe(() => {
+      this.route.queryParams.subscribe(params => {
+        this.showPopup = params['showPopup'] === 'true';
+        if (this.showPopup && this.authService.getToken()) {
+          this.appModalService
+            .openAddFeedbackDialog()
+            .then(() => this.removeQueryParam())
+            .catch(() => this.removeQueryParam());
+        }
+      });
     });
   }