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

components/doctor/detailDoctor/cards/comments/index.js

@@ -2,7 +2,7 @@ import Chart from "./chart";
 import Comment from "@/app/component/comment";
 import ModalAnswer from "./modal/ModalAnswer";
 
-function Comments({ doctor }) {
+function Comments({ doctor, comments }) {
   return (
     <div className="mt-[24px] sm:mt-[27px] md:mt-[29px] lg:mt-[32px]">
       <a
@@ -19,7 +19,7 @@ function Comments({ doctor }) {
         <ModalAnswer doctor={doctor} />
       </div>
       <Chart doctor={doctor} />
-      <Comment data={doctor} />
+      <Comment data={doctor} comments={comments} />
     </div>
   );
 }

components/doctor/detailDoctor/cards/comments/modal/ModalAnswer.js

@@ -7,12 +7,82 @@ import CloseModalD from "@/components/icons/CloseModalD";
 import Field from "@/app/component/fields/Field";
 import ArrowLeftD from "@/components/icons/ArrowLeftD";
 import ProgressChange from "@/app/component/ProgressChange";
+import ProgressDetail from "@/data/progress_detail.json";
 import Link from "next/link";
+import { request } from "@/services/response";
 
 function ModalAnswer({ doctor }) {
   const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
   const handleOpen = () => setOpen(true);
   const handleClose = () => setOpen(false);
+  const [comment, setComment] = useState({
+    rate: ProgressDetail,
+    detail: {
+      comment: "",
+      doctor_id: doctor?.id,
+    },
+  });
+  const changeData = (parent, child, value) => {
+    if (parent === "rate") {
+      setComment((prevComment) => ({
+        ...prevComment,
+        rate: prevComment.rate.map((item) =>
+          item.name === child ? { ...item, progress: value } : item
+        ),
+      }));
+    } else {
+      setComment((prevComment) => ({
+        ...prevComment,
+        [parent]: {
+          ...prevComment[parent],
+          [child]: value,
+        },
+      }));
+    }
+  };
+  const averageRate =
+    comment.rate.reduce((sum, item) => sum + item.progress, 0) /
+    comment.rate.length /
+    20;
+
+  const sendReq = () => {
+    setLoading(true);
+    request
+      .postDoctorComment(comment.detail)
+      .then((res) => {
+        console.log(res);
+        let newComment = comment.rate;
+        newComment = {
+          correct_diagnosis: newComment[1].progress,
+          doctor_skill: newComment[4].progress,
+          behavior_doctor: newComment[2].progress,
+          office_cleaning: newComment[3].progress,
+          time_in_office: newComment[0].progress,
+          doctor: doctor?.id,
+          rate: averageRate,
+        };
+        console.log(newComment);
+
+        request
+          .postDoctorRate(newComment)
+          .then((res) => {
+            setLoading(false);
+            setOpen(false);
+            console.log(res);
+          })
+          .catch((err) => {
+            setLoading(false);
+            setOpen(false);
+            console.log(err);
+          });
+      })
+      .catch((err) => {
+        setLoading(false);
+        setOpen(false);
+        console.log(err);
+      });
+  };
 
   return (
     <>
@@ -39,6 +109,7 @@ function ModalAnswer({ doctor }) {
           </div>
           <Rating
             className="!my-[24px]"
+            value={averageRate}
             dir="ltr"
             sx={{
               "& .MuiSvgIcon-root": {
@@ -48,8 +119,13 @@ function ModalAnswer({ doctor }) {
             }}
           />
           <ul className="flex w-full lg:w-fit flex-col items-start justify-start gap-1.5">
-            {doctor?.progress_detail?.map((item, idx) => (
-              <ProgressChange data={item} key={idx} />
+            {comment.rate?.map((item, idx) => (
+              <ProgressChange
+                key={idx}
+                data={item}
+                parent="rate"
+                changeData={changeData}
+              />
             ))}
           </ul>
           <div className="flex flex-col gap-[16px] justify-center items-start mt-[24px]">
@@ -57,19 +133,20 @@ function ModalAnswer({ doctor }) {
             <Field
               type="number"
               multiline={true}
+              handleChange={(_, val) => changeData("detail", "comment", val)}
               title="نظر خود را بنویسید..."
             />
-            <Link href={`/appointment/${doctor?.id}`} className="!mr-auto">
-              <Button
-                variant="contained"
-                className="!py-2.5 !px-4 gap-1 !text-[14px] !font-medium !mt-[32px] !shadownon"
-              >
-                دریافت نوبت
-                <div className="w-[20px] h-[20px]">
-                  <ArrowLeftD />
-                </div>
-              </Button>
-            </Link>
+            <Button
+              onClick={sendReq}
+              loading={loading}
+              variant="contained"
+              className="!py-2.5 !mr-auto !px-4 gap-1 !text-[14px] !font-medium !mt-[32px] !shadownon"
+            >
+              ثبت نظر
+              <div className="w-[20px] h-[20px]">
+                <ArrowLeftD />
+              </div>
+            </Button>
           </div>
         </Box>
       </Modal>

components/doctor/detailDoctor/index.js

@@ -5,7 +5,7 @@ import AboutDcotor from "./cards/AboutDcotor";
 import Comments from "./cards/comments";
 import Locations from "./cards/locations";
 
-function DetailDoctor({ doctor }) {
+function DetailDoctor({ doctor, comments }) {
   return (
     <div className="w-full lg:w-[59%]">
       <div className="hidden lg:flex">
@@ -15,7 +15,7 @@ function DetailDoctor({ doctor }) {
       <Link />
       <AboutDcotor doctor={doctor} />
       <Locations doctor={doctor} />
-      <Comments doctor={doctor} />
+      <Comments doctor={doctor} comments={comments} />
     </div>
   );
 }

components/doctor/index.js

@@ -2,9 +2,10 @@ import AppointmentList from "./appointmentList";
 import DetailDoctor from "./detailDoctor";
 import Share from "./detailDoctor/Share";
 import CustomLoading from "@/app/component/loading/Custom";
-import Poster from "./poster";
 
-function DoctorPage({ doctor, doctors }) {
+function DoctorPage({ doctor, doctors, comments }) {
+  console.log(comments);
+
   return (
     <div className="pt-[92px] sm:pt-[120px] mt:pt-[148px] lg:pt-[176px] mt-[px] padding-responsive">
       <div className="flex items-center justify-between">
@@ -24,7 +25,7 @@ function DoctorPage({ doctor, doctors }) {
         </div>
       </div>
       <div className="flex items-start justify-center gap-6 mt-[30px]">
-        <DetailDoctor doctor={doctor} />
+        <DetailDoctor doctor={doctor} comments={comments} />
         <AppointmentList doctors={doctors} />
       </div>
     </div>

components/doctors/index.js

@@ -23,8 +23,6 @@ function DoctorsPage({ params, matchedCity, matchedState, list }) {
   const findItem = (id) => specialties.find((item) => item.id === id);
   const isParent = findItem(fieldId) && findItem(fieldId).parent;
 
-  const findSpecial = (id) => specialties.find((item) => item.id === id);
-
   const [data, setData] = useState({
     category: isParent ? findItem(isParent) : findItem(fieldId),
     specialties: isParent && findItem(fieldId),

components/doctors/listDoctors/index.js

@@ -14,7 +14,7 @@ function ListDoctors({ loading, list }) {
           </ul>
         ) : (
           <p className="text-center py-10 text-gray-500">
-            هیچ دکتری وجود ندارد!
+            دکتری برای نمایش وجود ندارد.
           </p>
         )}
       </div>