112 lines
3.3 KiB
JavaScript
112 lines
3.3 KiB
JavaScript
import { useGetProductReviewsQuery } from '@/store/services'
|
||
|
||
import {
|
||
Pagination,
|
||
Icons,
|
||
ShowWrapper,
|
||
EmptyComment,
|
||
ReviewModal,
|
||
ReveiwSkeleton,
|
||
ReviewProductCard,
|
||
RedirectToLogin,
|
||
} from 'components'
|
||
|
||
import { useUrlQuery, useUserInfo, useDisclosure, useChangeRoute } from '@/hooks'
|
||
|
||
const Reviews = props => {
|
||
//? Props
|
||
const { numReviews, prdouctID, productTitle } = props
|
||
|
||
//? Assets
|
||
const query = useUrlQuery()
|
||
const changeRoute = useChangeRoute()
|
||
const page = query.page ? +query.page : 1
|
||
|
||
const { isVerify } = useUserInfo()
|
||
const [isShowRedirectModal, redirectModalHandlers] = useDisclosure()
|
||
|
||
//? Modals
|
||
const [isShowReviewModal, reviewModalHandlers] = useDisclosure()
|
||
|
||
//? Get Product-Reviews Query
|
||
const { data, isSuccess, isFetching, error, isError, refetch } = useGetProductReviewsQuery(
|
||
{
|
||
id: prdouctID,
|
||
page,
|
||
},
|
||
{ skip: numReviews > 0 ? false : true }
|
||
)
|
||
|
||
//? Handlers
|
||
const handleOpenCommentModal = () => {
|
||
if (!isVerify) return redirectModalHandlers.open()
|
||
reviewModalHandlers.open()
|
||
}
|
||
|
||
//? Render(s)
|
||
return (
|
||
<>
|
||
<RedirectToLogin
|
||
title="您尚未登录"
|
||
text=""
|
||
onClose={redirectModalHandlers.close}
|
||
isShow={isShowRedirectModal}
|
||
/>
|
||
<ReviewModal
|
||
isShow={isShowReviewModal}
|
||
onClose={reviewModalHandlers.close}
|
||
productTitle={productTitle}
|
||
prdouctID={prdouctID}
|
||
/>
|
||
<section className="px-3 py-3 space-y-4 lg:max-w-3xl xl:max-w-5xl" id="_productReviews">
|
||
<div className="flex items-center justify-between">
|
||
<h4 className="mb-3 lg:border-b-2 lg:border-red-500">商品评价</h4>
|
||
<span className="text-xs text-sky-500">{numReviews} 条评价</span>
|
||
</div>
|
||
<div className="lg:ml-10">
|
||
<div className="mb-8">
|
||
<button
|
||
type="button"
|
||
onClick={handleOpenCommentModal}
|
||
className="flex items-center w-full gap-x-5"
|
||
>
|
||
<Icons.Comment className="icon" />
|
||
<span className="text-sm text-black ">写下您对该商品的评价</span>
|
||
<Icons.ArrowRight2 className="ml-auto icon" />
|
||
</button>
|
||
<p className="mt-6 text-xs text-gray-500">提交确认后，通过将赠送积分。</p>
|
||
</div>
|
||
|
||
<ShowWrapper
|
||
error={error}
|
||
isError={isError}
|
||
refetch={refetch}
|
||
isFetching={isFetching}
|
||
isSuccess={isSuccess}
|
||
dataLength={data ? data?.data?.reviewsLength : 0}
|
||
emptyComponent={<EmptyComment />}
|
||
loadingComponent={<ReveiwSkeleton />}
|
||
>
|
||
<div className="py-3 space-y-4 divide-y-2 lg:px-6 sm:px-2">
|
||
{data?.data?.reviews?.map(item => <ReviewProductCard item={item} key={item._id} />)}
|
||
</div>
|
||
</ShowWrapper>
|
||
|
||
{data && data?.data?.reviewsLength > 5 && (
|
||
<div className="py-4 mx-auto lg:max-w-5xl">
|
||
<Pagination
|
||
pagination={data?.data?.pagination}
|
||
changeRoute={changeRoute}
|
||
section="_productReviews"
|
||
client
|
||
/>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</section>
|
||
</>
|
||
)
|
||
}
|
||
|
||
export default Reviews
|