get data with filter location for first time, get comment of doctor and show in doctor page, handle new comment

app/component/comment/ItemUser.js

@@ -13,10 +13,13 @@ 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.dislike--;
-    } else if (nameIsLike === "is_dislike" && data.is_like) {
-      data.is_like = false;
-      data.like--;
+      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--;
     }
     data[nameLike] = lengthLike;
     data[nameIsLike] = !data[nameIsLike];
@@ -28,14 +31,14 @@ function ItemUser({ update, setUpdate, isReply, list, setList, data }) {
       <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]"
-          src={data.profile}
+          src={data.author?.picture[0]?.url}
           width={40}
           height={40}
           alt="profile"
         />
         <div className="flex flex-col items-start justify-center gap-[8px]">
           <p className="text-[#343A40] text-[14px] md:text-[16px] font-medium">
-            {data.name}
+            {data.author.real_name}
           </p>
           <p className="text-[#7E7E7E] text-[12px] md:text-[14px] font-medium">
             3 روز پیش
@@ -52,17 +55,23 @@ function ItemUser({ update, setUpdate, isReply, list, setList, data }) {
               className="cursor-pointer"
               onClick={() =>
                 handleLike(
-                  data.is_like ? data.like - 1 : data.like + 1,
+                  data.like_status.current_user_like.like
+                    ? data.like_status.like_count - 1
+                    : data.like_status.like_count + 1,
                   data,
                   "like",
                   "is_like"
                 )
               }
             >
-              {data.is_like ? <BoldLikeComment /> : <LikeComment />}
+              {data.like_status.current_user_like.like ? (
+                <BoldLikeComment />
+              ) : (
+                <LikeComment />
+              )}
             </div>
             <p className="text-[#6C757D] text-[12px] font-normal select-none">
-              {data.like}
+              {data.like_status.like_count || ""}
             </p>
           </div>
           <div className="flex items-center justify-start gap-1">
@@ -70,7 +79,9 @@ function ItemUser({ update, setUpdate, isReply, list, setList, data }) {
               className="cursor-pointer"
               onClick={() =>
                 handleLike(
-                  data.is_dislike ? data.dislike - 1 : data.dislike + 1,
+                  data.is_dislike
+                    ? data.like_status.dislike_count - 1
+                    : data.like_status.dislike_count + 1,
                   data,
                   "dislike",
                   "is_dislike"
@@ -80,7 +91,7 @@ function ItemUser({ update, setUpdate, isReply, list, setList, data }) {
               {data.is_dislike ? <BoldDisLikeComment /> : <DisLikeComment />}
             </div>
             <p className="text-[#6C757D] text-[12px] font-normal select-none">
-              {data.dislike}
+              {data.like_status.dislike_count || ""}
             </p>
           </div>
           <Button
@@ -107,7 +118,7 @@ function ItemUser({ update, setUpdate, isReply, list, setList, data }) {
             ارسال پاسخ
           </Button>
         </div>
-        {!!data.replays.length && (
+        {!!data.replies.length && (
           <div className="flex items-center justify-start gap-1 my-2">
             <Button
               className="!text-[#0FA1B3] !text-[12px] !font-medium"
@@ -116,7 +127,7 @@ function ItemUser({ update, setUpdate, isReply, list, setList, data }) {
                 setUpdate(!update);
               }}
             >
-              مشاهده پاسخ ها ({data.replays.length})
+              مشاهده پاسخ ها ({data.replies.length})
               <div
                 className={`!mr-1 ${
                   data.is_open_reply ? "!rotate-0" : "!rotate-180"
@@ -128,10 +139,10 @@ function ItemUser({ update, setUpdate, isReply, list, setList, data }) {
           </div>
         )}
         <ul
-          className={`flex mr-12 flex-col justify-center transition-all duration-500 overflow-hidden items-start gap-12 w-full
-                    ${data.is_open_reply ? "max-h-screen mt-12" : "max-h-0"}`}
+          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.replays.map((item, idx) => (
+          {data.replies.map((item, idx) => (
             <ItemUser
               key={idx}
               data={item}

app/component/comment/index.js

@@ -2,7 +2,7 @@
 import { useState } from "react";
 import ItemUser from "./ItemUser";
 
-function Comment({ data }) {
+function Comment({ data, comments }) {
   const [list, setList] = useState(data?.comments);
   const [update, setUpdate] = useState(false);
 
@@ -12,9 +12,9 @@ function Comment({ data }) {
         false && "w-full"
       }`}
     >
-      {data &&
-        !!data?.comments?.length &&
-        data?.comments.map((item, idx) => (
+      {comments &&
+        comments.length &&
+        comments.map((item, idx) => (
           <ItemUser
             key={idx}
             list={list}