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

app/component/ItemDoctor.js

@@ -33,7 +33,11 @@ function ItemDoctor({ doctor }) {
           </TextLoading>
           <TextLoading width={120} height={15}>
             <p className="text-[#616161] text-[14px] font-normal">
-              تخصص: {doctor?.expertise}
+              تخصص:
+              {doctor?.specialties?.map(
+                (item, idx) =>
+                  `${item.name} ${doctor.specialties.length === idx + 1 ? "" : "|"} `
+              )}
             </p>
           </TextLoading>
           <CustomLoading width={100} height={25}>

app/component/ProgressChange.js

@@ -1,7 +1,7 @@
 import { Slider } from "@mui/material";
 import { useState } from "react";
 
-function ProgressChange({ data }) {
+function ProgressChange({ data, changeData, parent }) {
   const [value, setValue] = useState(70);
 
   return (
@@ -10,9 +10,12 @@ function ProgressChange({ data }) {
         {data.label}
       </p>
       <Slider
-        defaultValue={value}
+        defaultValue={data.progress}
         className="!w-full lg:!w-[265px] !rounded-[10px] !h-[11px]"
-        onChange={(e) => setValue(e.target.value)}
+        onChange={(e) => {
+          setValue(e.target.value);
+          changeData(parent, data.name, e.target.value);
+        }}
         sx={{
           "& .MuiSlider-rail": {
             background: "#E8E8E8",
@@ -32,7 +35,7 @@ function ProgressChange({ data }) {
           },
         }}
       />
-      <p className="text-[#525252] text-[20px] font-medium w-[30px] min-w-[32px]">
+      <p className="text-[#525252] text-[20px] font-medium w-[30px] min-w-[32px] text-center">
         {value}
       </p>
     </li>

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}

app/doctor/[slug]/page.js

@@ -5,6 +5,7 @@ import axios from "axios";
 async function Doctor({ params: { slug } }) {
   let doctors = null;
   let doctor = null;
+  let comments = null;
   try {
     const resDoctors = await axios.get(
       "https://back-dev.clinic-pro.ir/api/v1/doctors?active=1"
@@ -15,6 +16,12 @@ async function Doctor({ params: { slug } }) {
 
     doctor = resDoctor.data;
     doctors = resDoctors.data.data;
+    if (doctor) {
+      const resComments = await axios.get(
+        `https://back-dev.clinic-pro.ir/api/v1/clinicpro/comments/${doctor.id}`
+      );
+      comments = resComments?.data?.data;
+    }
   } catch (error) {
     // console.error("problem with req:", error.message);
     // return redirect("/unauthorized");
@@ -22,7 +29,7 @@ async function Doctor({ params: { slug } }) {
 
   return (
     <Layout>
-      <DoctorPage doctor={doctor} doctors={doctors} />
+      <DoctorPage doctor={doctor} doctors={doctors} comments={comments} />
     </Layout>
   );
 }

app/doctors/page.js

@@ -8,8 +8,15 @@ async function Doctors({ searchParams }) {
 
   let doctors = null;
   try {
+    const params = {};
+
+    if (matchedCity) params.city = matchedCity;
+    if (matchedState) params.state = matchedState;
     const response = await axios.get(
-      "https://back-dev.clinic-pro.ir/api/v1/doctors"
+      "https://back-dev.clinic-pro.ir/api/v1/doctors",
+      {
+        // params,
+      }
     );
     doctors = response.data.data;
   } catch (error) {