danak/shop-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

questions

Browse Source
This commit is contained in:
hamid zarghami
2025-10-29 16:27:25 +03:30
parent 364188fbf0
commit 816b172704
3 changed files with 104 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/product/components/Questions.tsx
+27 -67
View File
@@ -2,31 +2,25 @@
import { FC, Fragment, useMemo, useState } from 'react'
import { Button } from '@/components/ui/button'
import { ArrowDown2, MessageQuestion } from 'iconsax-react'
import { Product, Question } from '@/types/product.types'
import { MessageQuestion } from 'iconsax-react'
import { Product } from '@/types/product.types'
import AddQuestion from './AddQuestion'
import { PRIMARY_COLOR } from '@/config/const'
import { useGetProductQuestion } from '../hooks/useProductData'
import moment from 'moment-jalaali'
interface QuestionsProps {
product: Product
questions?: Question[]
}
const Questions: FC<QuestionsProps> = ({ questions = [] }) => {
const [sort, setSort] = useState<'new' | 'answers'>('new')
const [expandedId, setExpandedId] = useState<string | null>(null)
const Questions: FC<QuestionsProps> = ({ product }) => {
const { data: questionsData, isLoading } = useGetProductQuestion(product._id)
const [open, setOpen] = useState(false)
const sorted = useMemo(() => {
if (sort === 'new') {
return [...questions].sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
}
return [...questions].sort((a, b) => b.answers.length - a.answers.length)
}, [sort, questions])
const formatDate = (dateString: string) => {
const date = new Date(dateString)
return date.toLocaleDateString('fa-IR')
}
const sorted = useMemo(() => {
const apiQuestions = questionsData?.results?.questions || []
if (!apiQuestions.length) return []
return [...apiQuestions].sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
}, [questionsData?.results?.questions])
return (
<div className="mt-12 sm:mt-16 w-full">
@@ -37,30 +31,12 @@ const Questions: FC<QuestionsProps> = ({ questions = [] }) => {
<div className="mt-4 sm:mt-6 grid grid-cols-12 gap-4 sm:gap-6">
<div className="col-span-12 md:col-span-9 md:order-last">
<div className="flex flex-col sm:flex-row sm:items-center justify-end gap-2 sm:gap-4 text-xs sm:text-sm text-[#7F7F7F]">
<span>مرتب سازی بر اساس:</span>
<div className="flex items-center gap-4 sm:gap-6">
<button
type="button"
onClick={() => setSort('new')}
className={sort === 'new' ? 'text-primary font-medium' : 'text-[#B2B2B2] hover:text-primary'}
>
جدیدترین
</button>
<button
type="button"
onClick={() => setSort('answers')}
className={
sort === 'answers' ? 'text-primary font-medium' : 'text-[#B2B2B2] hover:text-primary'
}
>
بیشترین پاسخ
</button>
</div>
</div>
<div className="mt-4 sm:mt-6 rounded-xl bg-white divide-y divide-[#E6E6E6]">
{sorted.length > 0 ? (
{isLoading ? (
<div className="px-4 sm:px-6 py-8 text-center text-[#999999] text-sm">
در حال بارگذاری...
</div>
) : sorted.length > 0 ? (
sorted.map((question) => (
<Fragment key={question._id}>
<div className="px-4 sm:px-6 py-4 sm:py-5">
@@ -70,40 +46,24 @@ const Questions: FC<QuestionsProps> = ({ questions = [] }) => {
<MessageQuestion size={14} color="#2F80ED" className="sm:w-[18px] sm:h-[18px]" />
</div>
</div>
<div className="text-[#333333] text-xs sm:text-sm leading-6 sm:leading-7 text-right flex-1">
{question.question}
<div className="text-[#333333] flex gap-2 items-center text-xs sm:text-sm leading-6 sm:leading-7 text-right flex-1">
{question.content}
<div className="text-xs text-[#999999]">
{moment(question.createdAt, 'jYYYY/jMM/jDD HH:mm:ss').format('jYYYY/jMM/jD')}
</div>
</div>
</div>
<div className="mt-2 text-xs text-[#999999]">
{question.user.name} • {formatDate(question.date)}
</div>
{question.answers.length === 0 && (
<div className="mt-3 text-primary text-xs cursor-pointer w-fit">ثبت پاسخ</div>
)}
{question.answers.length > 0 && (
<div className="mt-3 sm:mt-4 text-[#7F7F7F]">
{(expandedId === question._id ? question.answers : question.answers.slice(0, 1)).map((answer) => (
<div key={answer._id} className='flex gap-2 items-start mt-2 first:mt-0'>
<div className="text-xs shrink-0">پاسخ</div>
<div className="text-xs leading-6 sm:leading-7 text-right text-[#333333]">
{answer.answer}
</div>
{question.answers && question.answers.length > 0 && (
<div className="mt-2 pr-8 sm:pr-11">
{question.answers.map((answer, index) => (
<div key={index} className="text-[#666666] text-xs sm:text-sm leading-6 sm:leading-7 text-right mt-2">
<span className="text-primary font-medium">پاسخ: </span>
{answer.content}
</div>
))}
{question.answers.length > 1 && (
<button
type="button"
onClick={() => setExpandedId(expandedId === question._id ? null : question._id)}
className="mt-3 flex items-center gap-1 text-xs text-primary"
>
{expandedId === question._id ? 'بستن پاسخ‌ها' : 'مشاهده پاسخ های دیگر'}
<ArrowDown2 size={12} color={PRIMARY_COLOR} className={expandedId === question._id ? 'rotate-180 transition' : 'transition sm:w-[14px] sm:h-[14px]'} />
</button>
)}
</div>
)}
</div>
src/app/product/service/Service.ts
+5 -2
View File
@@ -3,6 +3,7 @@ import { ProductDetailResponse } from "@/types/product.types";
import {
AddCommentProps,
AddQuestionProps,
AddQuestionResponse,
SubmitReportProps,
PriceHistoryResponse,
ProductQuestionsResponse,
@@ -24,7 +25,9 @@ export const addComment = async (params: AddCommentProps) => {
return data;
};
export const addQuestion = async (params: AddQuestionProps) => {
export const addQuestion = async (
params: AddQuestionProps
): Promise<AddQuestionResponse> => {
const { data } = await axios.post(
`/product/${params.productId}/questions`,
params
@@ -52,7 +55,7 @@ export const getPriceHistory = async (
export const getProductQuestion = async (
productId: number
): Promise<ProductQuestionsResponse> => {
const { data } = await axios.get(`/product/${productId}/report/questions`);
const { data } = await axios.get(`/product/${productId}/questions`);
return data;
};
src/app/product/types/Types.ts
+72 -5
View File
@@ -47,13 +47,69 @@ export type PriceHistoryResponse = {
results: PriceHistoryResults;
};
export type ProductQuestion = {
export type QuestionAnswer = {
content: string;
};
export type QuestionUser = {
fullName: string;
};
export type QuestionProductBrand = {
_id: string;
status: string;
title_en: string;
title_fa: string;
images: string[];
logoUrl: string;
};
export type QuestionProductCategory = {
_id: string;
title_fa: string;
title_en: string;
icon: string;
imageUrl: string;
theme: string;
description: string;
leaf: boolean;
parent: string | null;
};
export type QuestionProductImages = {
cover: string;
list: string[];
};
export type QuestionProduct = {
_id: number;
title: string;
type: string;
placeholder: string | null;
url: string;
title_fa: string;
title_en: string;
seoTitle: string;
seoDescription: string | null;
source: string;
description: string;
metaDescription: string;
tags: string[];
advantages: string[];
disAdvantages: string[];
imagesUrl: QuestionProductImages;
isFake: string;
voice: string | null;
specifications: unknown[];
brand: QuestionProductBrand;
category: QuestionProductCategory;
};
export type ProductQuestion = {
_id: string;
content: string;
status: string;
product: QuestionProduct;
user: QuestionUser;
answers: QuestionAnswer[];
createdAt: string;
updatedAt: string;
};
export type ProductQuestionsResults = {
@@ -71,3 +127,14 @@ export type SaveReportTypes = {
description: string;
productId: string;
};
export type AddQuestionResults = {
message: string;
content: string;
};
export type AddQuestionResponse = {
status: number;
success: boolean;
results: AddQuestionResults;
};