ProductList.jsx
2.83 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
import React, { useState, useEffect } from 'react'
import { useSearchParams } from 'react-router-dom'
import { productService } from '../services/api/productService'
import ProductList from '../components/product/ProductList'
import ProductFilter from '../components/product/ProductFilter'
import Pagination from '../components/common/Pagination'
import LoadingSpinner from '../components/common/LoadingSpinner'
const ProductListPage = () => {
const [products, setProducts] = useState([])
const [loading, setLoading] = useState(true)
const [totalPages, setTotalPages] = useState(1)
const [searchParams, setSearchParams] = useSearchParams()
const page = parseInt(searchParams.get('page')) || 1
const search = searchParams.get('search') || ''
const category = searchParams.get('category') || ''
const sort = searchParams.get('sort') || ''
useEffect(() => {
const loadProducts = async () => {
try {
setLoading(true)
const params = {
page,
limit: 12,
search,
category,
sort
}
const response = await productService.getProducts(params)
setProducts(response.products)
setTotalPages(response.totalPages)
} catch (error) {
console.error('Failed to load products:', error)
} finally {
setLoading(false)
}
}
loadProducts()
}, [page, search, category, sort])
const handleFilterChange = (newFilters) => {
const params = new URLSearchParams(searchParams)
params.set('page', '1')
Object.entries(newFilters).forEach(([key, value]) => {
if (value) {
params.set(key, value)
} else {
params.delete(key)
}
})
setSearchParams(params)
}
const handlePageChange = (newPage) => {
const params = new URLSearchParams(searchParams)
params.set('page', newPage.toString())
setSearchParams(params)
}
if (loading) {
return <LoadingSpinner />
}
return (
<div className="product-list-page">
<div className="container">
<div className="page-header">
<h1>Products</h1>
{search && <p>Search results for: "{search}"</p>}
</div>
<div className="product-list-content">
<aside className="filters-sidebar">
<ProductFilter
onFilterChange={handleFilterChange}
currentFilters={{ search, category, sort }}
/>
</aside>
<main className="products-main">
<ProductList products={products} />
{products.length > 0 && (
<Pagination
currentPage={page}
totalPages={totalPages}
onPageChange={handlePageChange}
/>
)}
</main>
</div>
</div>
</div>
)
}
export default ProductListPage