Skip to content

MS-245/Optimize product listing performance with new ProductCardDTO and server-side filtering

salaheddine zidani a demandé de fusionner feature/MS-245 vers develop

Summary

This MR introduces a major performance optimization for product listing pages by eliminating N+1 queries and moving filtering logic to the server.

Changes

New Types

  • ProductCardDTO: Optimized DTO with flattened category data and preOrderAuthorization
  • ProductCardSearchParams: Parameters for the new search endpoint
  • FilterCountsDTO: Dynamic counts for filters (in stock, on sale)
  • ProductCardPageResponse: Paginated response with filter counts

API Changes

  • Added searchProductCards() function calling /api/stock/products/cards/search
  • Updated getProductByCategory() to return Page<ProductCardDTO>
  • Updated getRelatedProducts() to return ProductCardDTO[]

Component Updates

  • ProductCard: Removed API call, uses props directly for availability
  • ProductListed: Updated props to include preOrderAuthorization
  • ProductsView: Added skeleton loaders, uses ProductCardDTO
  • ProductFilterCard: Added keyword search with debounce, filter counts display, reset button
  • ProductSearchByCategory/PageView: Unified implementation with new API
  • ProductSearchByNamePageView: Unified implementation with new API
  • RelatedProducts: Updated to use ProductCardDTO
  • ProductGridList: Updated to use ProductCardDTO
  • ProductSection: Updated to use ProductCardDTO

Performance Improvements

  • Eliminated N+1 query problem (was: 1 + N API calls, now: 1 API call)
  • Server-side filtering reduces client-side processing
  • Debounced inputs prevent excessive API calls

UX Improvements

  • Skeleton loaders during loading state
  • Dynamic filter counts show available options
  • Unified availability display across grid and list views

Breaking Changes

  • ProductCard props changed: now requires preOrderAuthorization instead of fetching internally
  • Components using CustomProductRequest for listings should migrate to ProductCardDTO

Testing

  • Verify product listing pages load correctly
  • Test all filter combinations (price, on sale, in stock, keyword)
  • Verify pagination works correctly
  • Test grid/list view toggle
  • Verify availability badge shows correctly

Backend Requirements

  • New endpoint: GET /api/stock/products/cards/search with query parameters
  • Endpoint should return ProductCardPageResponse with filter counts

Related Issues

Closes MS-245

Modification effectuée par salaheddine zidani

Rapports de requête de fusion