132 lines
3.8 KiB
JavaScript
132 lines
3.8 KiB
JavaScript
'use client'
|
|
|
|
import {
|
|
ProductCard,
|
|
Pagination,
|
|
Sort,
|
|
ProductsAside,
|
|
SubCategories,
|
|
Filter,
|
|
ProductSkeleton,
|
|
} from 'components'
|
|
|
|
import { useChangeRoute, useMediaQuery } from 'hooks'
|
|
|
|
import { useUrlQuery } from '@/hooks'
|
|
import { useGetCategoriesQuery, useGetProductsQuery } from '@/store/services'
|
|
|
|
const ProductsHome = () => {
|
|
//? Assets
|
|
const query = useUrlQuery()
|
|
|
|
const category = query?.category?.toString() ?? ''
|
|
const page_size = query?.page_size?.toString() ?? ''
|
|
const page = query?.page?.toString() ?? ''
|
|
const sort = query?.sort?.toString() ?? ''
|
|
const search = query?.search?.toString() ?? ''
|
|
const inStock = query?.inStock?.toString() ?? ''
|
|
const discount = query?.discount?.toString() ?? ''
|
|
const price = query?.price?.toString() ?? ''
|
|
|
|
const isDesktop = useMediaQuery('(min-width:1280px)')
|
|
|
|
//? Handlers
|
|
const changeRoute = useChangeRoute()
|
|
|
|
const handleChangeRoute = newQueries => {
|
|
changeRoute({
|
|
...query,
|
|
page: 1,
|
|
...newQueries,
|
|
})
|
|
}
|
|
|
|
//? Querirs
|
|
//* Get Products Data
|
|
const { data, isFetching: isFetchingProduct } = useGetProductsQuery({
|
|
category,
|
|
page_size,
|
|
page,
|
|
sort,
|
|
search,
|
|
inStock,
|
|
discount,
|
|
price,
|
|
})
|
|
|
|
//* Get childCategories Data
|
|
const { isLoading: isLoadingCategories, childCategories } = useGetCategoriesQuery(undefined, {
|
|
selectFromResult: ({ isLoading, data }) => {
|
|
const currentCategory = data?.data?.categories.find(cat => cat.slug === query?.category)
|
|
const childCategories = data?.data?.categories.filter(
|
|
cat => cat.parent === currentCategory?._id
|
|
)
|
|
return { childCategories, isLoading }
|
|
},
|
|
})
|
|
|
|
//? Render(s)
|
|
return (
|
|
<>
|
|
<main className="lg:px-3 container xl:mt-32">
|
|
<SubCategories childCategories={childCategories} isLoading={isLoadingCategories} />
|
|
|
|
<div className="px-1 lg:flex lg:gap-x-0 xl:gap-x-3">
|
|
<ProductsAside
|
|
mainMaxPrice={data?.data?.mainMaxPrice}
|
|
mainMinPrice={data?.data?.mainMinPrice}
|
|
handleChangeRoute={handleChangeRoute}
|
|
/>
|
|
<div id="_products" className="w-full p-4 mt-3 ">
|
|
{/* Filters & Sort */}
|
|
<div className="divide-y-2 ">
|
|
<div className="flex py-2 gap-x-3">
|
|
{!isDesktop && (
|
|
<Filter
|
|
mainMaxPrice={data?.mainMaxPrice}
|
|
mainMinPrice={data?.mainMinPrice}
|
|
handleChangeRoute={handleChangeRoute}
|
|
/>
|
|
)}
|
|
|
|
<Sort handleChangeRoute={handleChangeRoute} />
|
|
</div>
|
|
|
|
<div className="flex justify-between py-2">
|
|
<span>所有商品</span>
|
|
<span className="">{data?.data?.productsLength} 件商品</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Products */}
|
|
{isFetchingProduct ? (
|
|
<ProductSkeleton />
|
|
) : data && data?.data?.products.length > 0 ? (
|
|
<section className="sm:grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
|
|
{data?.data?.products.map(item => <ProductCard product={item} key={item._id} />)}
|
|
</section>
|
|
) : (
|
|
<section className="text-center text-red-500 xl:border xl:border-gray-200 xl:rounded-md xl:py-4">
|
|
没有找到商品
|
|
</section>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{data && data?.data?.productsLength > 10 && (
|
|
<div className="py-4 mx-auto lg:max-w-5xl">
|
|
<Pagination
|
|
pagination={data?.data?.pagination}
|
|
changeRoute={handleChangeRoute}
|
|
section="_products"
|
|
client
|
|
/>
|
|
</div>
|
|
)}
|
|
</main>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default ProductsHome
|