feat(doctor): wire rich rating/review UI to multi-dimensional API
Connect the existing doctor-page review UI to the rebuilt backend contract
(see clinicpro feat/rating-multidimensional).
- page.js fetches the rating aggregate alongside comments and passes
rateAggregate down to the chart (point / satisfaction / 5 dimensions).
- Submit form sends the five dimensions with doctor_uuid; comment/reply
send {doctor_uuid, comment, parent}; 401/403 ERR_RATING_NOT_ELIGIBLE
surface friendly guidance.
- Like/dislike call POST /like/{uuid} with value and update from the
response; replies render nested.
- ModalAnswer gates the submit button on GET /rate/{uuid}/eligibility.
- services/response.js: getRateEligibility, postCommentsLike(uuid, value),
drop unused patchDoctorRate. Fix hardcoded modal title; empty-state for
no comments. Remove orphaned AnswerField.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
hamed
@@ -1,3 +1,5 @@
|
||||
"use client";
|
||||
|
||||
import Image from "next/image";
|
||||
import { imageUrl } from "@/helper";
|
||||
import { Button, CircularProgress } from "@mui/material";
|
||||
@@ -8,62 +10,53 @@ import BoldLikeComment from "@/components/icons/BoldLikeComment";
|
||||
import DisLikeComment from "@/components/icons/DisLikeComment";
|
||||
import LikeComment from "@/components/icons/LikeComment";
|
||||
import Replies from "./Replies";
|
||||
import AnswerField from "./AnswerField";
|
||||
import SendAnswer from "./SendAnswer";
|
||||
import { alert, isUserLoggedIn, timeAgo } from "@/helper";
|
||||
import { request } from "@/services/response";
|
||||
import { useState } from "react";
|
||||
|
||||
function ItemUser({ update, setUpdate, data }) {
|
||||
function ItemUser({ data, doctor, isReply = false }) {
|
||||
const [loadingLike, setLoadingLike] = useState(false);
|
||||
const [loadingDislike, setLoadingDislike] = useState(false);
|
||||
const [openAnswer, setOpenAnswer] = useState(false);
|
||||
const [status, setStatus] = useState({
|
||||
like_count: data.like_status?.like_count || 0,
|
||||
dislike_count: data.like_status?.dislike_count || 0,
|
||||
like: data.like_status?.current_user_like?.like || false,
|
||||
dislike: data.like_status?.current_user_like?.dislike || false,
|
||||
});
|
||||
|
||||
const SendReq = async (type) => {
|
||||
const sendReq = async (type) => {
|
||||
if (!isUserLoggedIn()) {
|
||||
alert("warning", "برای ثبت نظر باید ابتدا وارد حساب کاربری شوید.");
|
||||
return;
|
||||
}
|
||||
if (type === "like") setLoadingLike(true);
|
||||
else setLoadingDislike(true);
|
||||
|
||||
try {
|
||||
const res = await request.postCommentsLike(data.uuid ?? data.id);
|
||||
const res = await request.postCommentsLike(data.uuid, type === "like" ? 1 : -1);
|
||||
const d = res.data;
|
||||
setStatus({
|
||||
like_count: d.like_count,
|
||||
dislike_count: d.dislike_count,
|
||||
like: d.current_user_like.like,
|
||||
dislike: d.current_user_like.dislike,
|
||||
});
|
||||
} catch (err) {
|
||||
// err
|
||||
alert("error", "خطایی رخ داد! لطفاً دوباره تلاش کنید.");
|
||||
} finally {
|
||||
if (type === "like") setLoadingLike(false);
|
||||
else setLoadingDislike(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleLike = (data, type) => {
|
||||
SendReq(type);
|
||||
|
||||
const { current_user_like } = data.like_status;
|
||||
|
||||
if (type === "like") {
|
||||
if (current_user_like.like) {
|
||||
data.like_status.like_count -= 1;
|
||||
current_user_like.like = false;
|
||||
} else {
|
||||
data.like_status.like_count += 1;
|
||||
current_user_like.like = true;
|
||||
if (current_user_like.dislike) {
|
||||
data.like_status.dislike_count -= 1;
|
||||
current_user_like.dislike = false;
|
||||
}
|
||||
}
|
||||
const toggleAnswer = () => {
|
||||
if (isUserLoggedIn()) {
|
||||
setOpenAnswer((prev) => !prev);
|
||||
} else {
|
||||
if (current_user_like.dislike) {
|
||||
data.like_status.dislike_count -= 1;
|
||||
current_user_like.dislike = false;
|
||||
} else {
|
||||
data.like_status.dislike_count += 1;
|
||||
current_user_like.dislike = true;
|
||||
if (current_user_like.like) {
|
||||
data.like_status.like_count -= 1;
|
||||
current_user_like.like = false;
|
||||
}
|
||||
}
|
||||
alert("warning", "برای ارسال پاسخ باید ابتدا وارد حساب کاربری شوید.");
|
||||
}
|
||||
|
||||
setUpdate(!update);
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -78,7 +71,7 @@ function ItemUser({ update, setUpdate, data }) {
|
||||
/>
|
||||
<div className="flex flex-col items-start justify-center gap-[8px]">
|
||||
<p className="text-[#343A40] text-[14px] md:text-[16px] font-medium">
|
||||
{data.author.real_name}
|
||||
{data.author?.real_name}
|
||||
</p>
|
||||
<p className="text-[#7E7E7E] text-[12px] md:text-[14px] font-medium">
|
||||
{timeAgo(data.created)}
|
||||
@@ -86,79 +79,68 @@ function ItemUser({ update, setUpdate, data }) {
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-2">
|
||||
<p className="text-[#495057] text-[12px] md:text-[14px]">
|
||||
{data.comment}
|
||||
</p>
|
||||
<p className="text-[#495057] text-[12px] md:text-[14px]">{data.comment}</p>
|
||||
|
||||
<div className="flex items-center justify-start mt-2 gap-[28px]">
|
||||
{/* لایک */}
|
||||
<div className="flex items-center justify-start gap-1">
|
||||
<div
|
||||
className="cursor-pointer"
|
||||
onClick={() => handleLike(data, "like")}
|
||||
>
|
||||
<div className="cursor-pointer" onClick={() => sendReq("like")}>
|
||||
{loadingLike ? (
|
||||
<CircularProgress
|
||||
className="!w-[24px] !h-[24px]"
|
||||
sx={{ color: "#7E7E7E" }}
|
||||
/>
|
||||
) : data.like_status.current_user_like.like ? (
|
||||
) : status.like ? (
|
||||
<BoldLikeComment />
|
||||
) : (
|
||||
<LikeComment />
|
||||
)}
|
||||
</div>
|
||||
<p className="text-[#6C757D] text-[12px] select-none">
|
||||
{data.like_status.like_count || ""}
|
||||
{status.like_count || ""}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* دیسلایک */}
|
||||
<div className="flex items-center justify-start gap-1">
|
||||
<div
|
||||
className="cursor-pointer"
|
||||
onClick={() => handleLike(data, "dislike")}
|
||||
>
|
||||
<div className="cursor-pointer" onClick={() => sendReq("dislike")}>
|
||||
{loadingDislike ? (
|
||||
<CircularProgress
|
||||
className="!w-[24px] !h-[24px]"
|
||||
sx={{ color: "#7E7E7E" }}
|
||||
/>
|
||||
) : data.like_status.current_user_like.dislike ? (
|
||||
) : status.dislike ? (
|
||||
<BoldDisLikeComment />
|
||||
) : (
|
||||
<DisLikeComment />
|
||||
)}
|
||||
</div>
|
||||
<p className="text-[#6C757D] text-[12px] select-none">
|
||||
{data.like_status.dislike_count || ""}
|
||||
{status.dislike_count || ""}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
className="!text-[#495057] !text-[12px] !font-medium"
|
||||
onClick={() => {
|
||||
if (isUserLoggedIn()) {
|
||||
data.is_open_answer = !data.is_open_answer;
|
||||
setUpdate(!update);
|
||||
} else {
|
||||
alert(
|
||||
"warning",
|
||||
"برای ارسال کامنت باید ابتدا وارد حساب کاربری شوید."
|
||||
);
|
||||
}
|
||||
}}
|
||||
variant="text"
|
||||
>
|
||||
پاسخ
|
||||
</Button>
|
||||
{!isReply && (
|
||||
<Button
|
||||
className="!text-[#495057] !text-[12px] !font-medium"
|
||||
onClick={toggleAnswer}
|
||||
variant="text"
|
||||
>
|
||||
پاسخ
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<SendAnswer data={data} />
|
||||
{!!data.replies.length && (
|
||||
<AnswerField data={data} update={update} setUpdate={setUpdate} />
|
||||
{!isReply && openAnswer && (
|
||||
<SendAnswer
|
||||
doctor={doctor}
|
||||
parentUuid={data.uuid}
|
||||
onSent={() => setOpenAnswer(false)}
|
||||
/>
|
||||
)}
|
||||
{!isReply && data.replies?.length > 0 && (
|
||||
<Replies data={data} doctor={doctor} />
|
||||
)}
|
||||
<Replies data={data} update={update} setUpdate={setUpdate} />
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user