handle like comments data, req for update comments and add loading for like comment && search specialty with searchbar in doctors page && set category and specialty data

app/component/comment/AnswerField.js

@@ -0,0 +1,27 @@
+import ArrowUpComment from "@/components/icons/ArrowUpComment";
+import { Button } from "@mui/material";
+
+function AnswerField({ data, update, setUpdate }) {
+  return (
+    <div className="flex items-center justify-start gap-1 my-2">
+      <Button
+        className="!text-[#0FA1B3] !text-[12px] !font-medium"
+        onClick={() => {
+          data.is_open_reply = !data.is_open_reply;
+          setUpdate(!update);
+        }}
+      >
+        مشاهده پاسخ ها ({data.replies.length})
+        <div
+          className={`!mr-1 ${
+            data.is_open_reply ? "!rotate-0" : "!rotate-180"
+          }`}
+        >
+          <ArrowUpComment />
+        </div>
+      </Button>
+    </div>
+  );
+}
+
+export default AnswerField;

app/component/comment/Field.js

@@ -1,12 +1,13 @@
 import { TextField } from "@mui/material";
 
-function Field({ title, type, multiline, isPlaceHolder }) {
+function Field({ title, type, updateValue, value, multiline, isPlaceHolder }) {
   return (
     <TextField
       placeholder={isPlaceHolder && title}
       label={!isPlaceHolder ? title : ""}
       type={type || "text"}
       className="!w-full !mx-auto !bg-transparent"
+      onChange={(e) => updateValue(e.target.value)}
       sx={{
         "& .MuiFormLabel-root": {
           top: "-4px !important",

app/component/comment/ItemUser.js

@@ -1,28 +1,73 @@
 import Image from "next/image";
-import { Button, Skeleton } from "@mui/material";
-import Field from "./Field";
+import { Button, CircularProgress } from "@mui/material";
 
 // Icons
 import BoldDisLikeComment from "@/components/icons/BoldDisLikeComment";
 import BoldLikeComment from "@/components/icons/BoldLikeComment";
 import DisLikeComment from "@/components/icons/DisLikeComment";
-import ArrowUpComment from "@/components/icons/ArrowUpComment";
 import LikeComment from "@/components/icons/LikeComment";
+import Replies from "./Replies";
+import AnswerField from "./AnswerField";
+import SendAnswer from "./SendAnswer";
+import { timeAgo } from "@/helper";
+import { request } from "@/services/response";
+import { useState } from "react";
 
-function ItemUser({ update, setUpdate, isReply, list, setList, data }) {
-  const handleLike = (lengthLike, data, nameLike, nameIsLike) => {
-    if (nameIsLike === "is_like" && data.is_dislike) {
-      data.is_dislike = false;
-      data.like_status.dislike_count--;
-    } else if (
-      nameIsLike === "is_dislike" &&
-      data.like_status.current_user_like.like
-    ) {
-      data.like_status.current_user_like.like = false;
-      data.like_status.like_count--;
+function ItemUser({ update, setUpdate, data }) {
+  const [loadingLike, setLoadingLike] = useState(false);
+  const [loadingDislike, setLoadingDislike] = useState(false);
+
+  const SendReq = async (type) => {
+    if (type === "like") setLoadingLike(true);
+    else setLoadingDislike(true);
+
+    const body = {
+      comment_id: data.id,
+      like: type === "like" ? 1 : 0,
+    };
+
+    try {
+      const res = await request.postCommentsLike(body);
+      console.log(res);
+    } catch (err) {
+      console.log(err);
+    } finally {
+      if (type === "like") setLoadingLike(false);
+      else setLoadingDislike(false);
     }
-    data[nameLike] = lengthLike;
-    data[nameIsLike] = !data[nameIsLike];
+  };
+
+  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;
+        }
+      }
+    } 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;
+        }
+      }
+    }
+
     setUpdate(!update);
   };
 
@@ -30,7 +75,7 @@ function ItemUser({ update, setUpdate, isReply, list, setList, data }) {
     <li className="w-full">
       <div className="flex items-center justify-start gap-2">
         <Image
-          className="!w-[32px] !h-[32px] sm:!w-[35px] sm:!h-[35px] md:!h-[37px] md:!w-[37px] lg:!w-[40px] lg:!h-[40px]"
+          className="!w-[32px] !h-[32px]"
           src={data.author?.picture[0]?.url}
           width={40}
           height={40}
@@ -41,59 +86,60 @@ function ItemUser({ update, setUpdate, isReply, list, setList, data }) {
             {data.author.real_name}
           </p>
           <p className="text-[#7E7E7E] text-[12px] md:text-[14px] font-medium">
-            3 روز پیش
+            {timeAgo(data.created)}
           </p>
         </div>
       </div>
       <div className="mt-2">
-        <p className="text-[#495057] text-[12px] md:text-[14px] font-normal leading-[20px] sm:leading-[24px] md:leading-[28px] lg:leading-[30px]">
+        <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_status.current_user_like.like
-                    ? data.like_status.like_count - 1
-                    : data.like_status.like_count + 1,
-                  data,
-                  "like",
-                  "is_like"
-                )
-              }
+              onClick={() => handleLike(data, "like")}
             >
-              {data.like_status.current_user_like.like ? (
+              {loadingLike ? (
+                <CircularProgress
+                  className="!w-[24px] !h-[24px]"
+                  sx={{ color: "#7E7E7E" }}
+                />
+              ) : data.like_status.current_user_like.like ? (
                 <BoldLikeComment />
               ) : (
                 <LikeComment />
               )}
             </div>
-            <p className="text-[#6C757D] text-[12px] font-normal select-none">
+            <p className="text-[#6C757D] text-[12px] select-none">
               {data.like_status.like_count || ""}
             </p>
           </div>
+
+          {/* دیس‌لایک */}
           <div className="flex items-center justify-start gap-1">
             <div
               className="cursor-pointer"
-              onClick={() =>
-                handleLike(
-                  data.is_dislike
-                    ? data.like_status.dislike_count - 1
-                    : data.like_status.dislike_count + 1,
-                  data,
-                  "dislike",
-                  "is_dislike"
-                )
-              }
+              onClick={() => handleLike(data, "dislike")}
             >
-              {data.is_dislike ? <BoldDisLikeComment /> : <DisLikeComment />}
+              {loadingDislike ? (
+                <CircularProgress
+                  className="!w-[24px] !h-[24px]"
+                  sx={{ color: "#7E7E7E" }}
+                />
+              ) : data.like_status.current_user_like.dislike ? (
+                <BoldDisLikeComment />
+              ) : (
+                <DisLikeComment />
+              )}
             </div>
-            <p className="text-[#6C757D] text-[12px] font-normal select-none">
+            <p className="text-[#6C757D] text-[12px] select-none">
               {data.like_status.dislike_count || ""}
             </p>
           </div>
+
           <Button
             className="!text-[#495057] !text-[12px] !font-medium"
             onClick={() => {
@@ -105,53 +151,12 @@ function ItemUser({ update, setUpdate, isReply, list, setList, data }) {
             پاسخ
           </Button>
         </div>
-        <div
-          className={`flex flex-col mt-2 justify-center overflow-hidden transition duration-500 items-start gap-2 mb-2
-          ${data.is_open_answer ? "max-h-fit" : "max-h-0"}`}
-        >
-          <Field type="text" title="پاسخ شما..." isPlaceHolder={true} />
-          <Button
-            variant="contained"
-            className="!p-2 !h-10 !text-[12px] !font-medium !text-[#FFF] sm:!py-[10px] md:!px-[12px] !rounded-[8px] !bg-[#5559CE] 
-                !shadow-none sm:!shadow-[0px_4px_30px_0px_rgba(56,_160,_162,_0.30)]"
-          >
-            ارسال پاسخ
-          </Button>
-        </div>
+
+        <SendAnswer data={data} />
         {!!data.replies.length && (
-          <div className="flex items-center justify-start gap-1 my-2">
-            <Button
-              className="!text-[#0FA1B3] !text-[12px] !font-medium"
-              onClick={() => {
-                data.is_open_reply = !data.is_open_reply;
-                setUpdate(!update);
-              }}
-            >
-              مشاهده پاسخ ها ({data.replies.length})
-              <div
-                className={`!mr-1 ${
-                  data.is_open_reply ? "!rotate-0" : "!rotate-180"
-                }`}
-              >
-                <ArrowUpComment />
-              </div>
-            </Button>
-          </div>
+          <AnswerField data={data} update={update} setUpdate={setUpdate} />
         )}
-        <ul
-          className={`flex pr-12 flex-col justify-center transition-all duration-500 overflow-hidden items-start gap-12 w-full
-            ${data.is_open_reply ? "max-h-fit mt-12" : "max-h-0"}`}
-        >
-          {data.replies.map((item, idx) => (
-            <ItemUser
-              key={idx}
-              data={item}
-              isReply={true}
-              update={update}
-              setUpdate={setUpdate}
-            />
-          ))}
-        </ul>
+        <Replies data={data} update={update} setUpdate={setUpdate} />
       </div>
     </li>
   );

app/component/comment/Replies.js

@@ -0,0 +1,23 @@
+import React from "react";
+import ItemUser from "./ItemUser";
+
+function Replies({ data, update, setUpdate }) {
+  return (
+    <ul
+      className={`flex pr-12 flex-col justify-center transition-all duration-500 overflow-hidden items-start gap-12 w-full
+            ${data.is_open_reply ? "max-h-fit mt-12" : "max-h-0"}`}
+    >
+      {data.replies.map((item, idx) => (
+        <ItemUser
+          key={idx}
+          data={item}
+          isReply={true}
+          update={update}
+          setUpdate={setUpdate}
+        />
+      ))}
+    </ul>
+  );
+}
+
+export default Replies;

app/component/comment/SendAnswer.js

@@ -0,0 +1,59 @@
+import { Button } from "@mui/material";
+import Field from "./Field";
+import { useState } from "react";
+import { request } from "@/services/response";
+
+function SendAnswer({ data }) {
+  const [comment, setComment] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const resetData = () => {
+    setComment("");
+    setLoading(false);
+    data.is_open_answer = false;
+  };
+
+  const sendReq = () => {
+    setLoading(true);
+    const body = {
+      comment,
+      doctor_id: data?.doctor?.id,
+      parent: data?.parent,
+    };
+
+    request
+      .postDoctorComment(body)
+      .then(() => {
+        resetData();
+      })
+      .catch(() => {
+        resetData();
+      });
+  };
+
+  return (
+    <div
+      className={`flex flex-col mt-2 justify-center overflow-hidden transition duration-500 items-start gap-2 mb-2
+          ${data.is_open_answer ? "max-h-fit" : "max-h-0"}`}
+    >
+      <Field
+        type="text"
+        value={comment}
+        title="پاسخ شما..."
+        isPlaceHolder={true}
+        updateValue={(val) => setComment(val)}
+      />
+      <Button
+        loading={loading}
+        variant="contained"
+        onClick={sendReq}
+        className="!p-2 !h-10 !text-[12px] !font-medium sm:!py-[10px] md:!px-[12px] !rounded-[8px]
+        !shadow-none sm:!shadow-[0px_4px_30px_0px_rgba(56,_160,_162,_0.30)]"
+      >
+        ارسال پاسخ
+      </Button>
+    </div>
+  );
+}
+
+export default SendAnswer;

app/component/comment/index.js

@@ -17,10 +17,8 @@ function Comment({ data, comments }) {
         comments.map((item, idx) => (
           <ItemUser
             key={idx}
-            list={list}
             data={item}
             update={update}
-            setList={setList}
             setUpdate={setUpdate}
           />
         ))}