Task: Implement Full Search, Filters, Sorting, and Pagination

Implement Full Search, Filters, Sorting, and Pagination

Objective

Wire the Products Listing page to use the filterProducts() function from the service layer instead of manually loading all products.

Why It Matters

Real e-commerce apps process filtering, sorting, and pagination server-side. Using a dedicated service function mirrors this pattern and keeps UI components clean.

Technical Requirements

• Import and call filterProducts() from src/services/productService.js
• Pass the current search, selectedCategory, sortBy, sortOrder, currentPage, and productsPerPage as parameters
• Update state with the returned { data, total, page, totalPages, limit } object
• Trigger a re-fetch when any filter, sort, or pagination value changes (use useEffect with proper dependencies)
• Remove the manual client-side slicing logic

Expected Behavior

• Typing in the search box filters products by title/description
• Selecting a category shows only products in that category
• Changing sort order reorders the results
• Pagination updates correctly based on filtered total
• All filters can be combined (e.g., search "leather" + category "Fashion" + price low-to-high)

Acceptance Criteria

• Search filters products in real-time (debounce optional)
• Category dropdown filters products
• Sort dropdown reorders products
• Pagination reflects filtered totals, not total product count
• Changing any filter resets pagination to page 1
• Empty search shows all products

Edge Cases

• Search query that matches zero products
• Selecting a category with only 1–2 products (pagination should hide)
• Rapid filter changes (no stale results displayed)

Hints

• Look at the filterProducts function signature in src/services/productService.js
• Use a single useEffect with all filter values in the dependency array
• Consider adding minPrice and maxPrice filter UI for bonus points