handle change data in doctor model, set previous data when user close modal, update list doctor after update data and change key name in url

app/component/modalSearchCity/index.js

@@ -24,6 +24,7 @@ function ModalSearchCity({
   const states = addLabelToList(statesData);
   const cities = addLabelToList(citiesData);
   const [filteredCities, setFilteredCities] = useState([]);
+  state;
 
   const handleClose = () => setOpen(false);
 

app/doctors/page.js

@@ -10,8 +10,8 @@ async function Doctors({ searchParams }) {
   try {
     const params = {};
 
-    if (matchedCity) params.city = matchedCity;
+    if (matchedCity) params.city = matchedCity?.id || null;
-    if (matchedState) params.state = matchedState;
+    if (matchedState) params.state = matchedState?.id || null;
     const response = await axios.get(
       "https://back-dev.clinic-pro.ir/api/v1/doctors",
       {
@@ -19,9 +19,7 @@ async function Doctors({ searchParams }) {
       }
     );
     doctors = response.data.data;
-  } catch (error) {
+  } catch (error) {}
-    // console.error("problem with req:", error.message);
-  }
 
   return (
     <Layout>

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

@@ -51,7 +51,6 @@ function ModalAnswer({ doctor }) {
     request
       .postDoctorComment(comment.detail)
       .then((res) => {
-        console.log(res);
         let newComment = comment.rate;
         newComment = {
           correct_diagnosis: newComment[1].progress,
@@ -62,25 +61,21 @@ function ModalAnswer({ doctor }) {
           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);
       });
   };
 

components/doctor/index.js

@@ -4,7 +4,7 @@ import Share from "./detailDoctor/Share";
 import CustomLoading from "@/app/component/loading/Custom";
 
 function DoctorPage({ doctor, doctors, comments }) {
-  console.log(comments);
+  comments;
 
   return (
     <div className="pt-[92px] sm:pt-[120px] mt:pt-[148px] lg:pt-[176px] mt-[px] padding-responsive">

components/doctors/index.js

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import SearchBar from "./search";
 import SortList from "./sortlist";
 import { Button } from "@mui/material";
@@ -14,6 +14,7 @@ import specialties from "@/data/specialties.json";
 function DoctorsPage({ params, matchedCity, matchedState, list }) {
   const fieldId = params.field;
   const [loading, setLoading] = useState(true);
+  const [doctors, setDoctors] = useState(list);
   const [open, setOpen] = useState(false);
   const [selected, setSelected] = useState({
     province: matchedState?.name || params?.province,
@@ -22,20 +23,16 @@ function DoctorsPage({ params, matchedCity, matchedState, list }) {
 
   const findItem = (id) => specialties.find((item) => item.id === id);
   const isParent = findItem(fieldId) && findItem(fieldId).parent;
-
+  const defaultData = {
-  const [data, setData] = useState({
     category: isParent ? findItem(isParent) : findItem(fieldId),
     specialties: isParent && findItem(fieldId),
     turn: params && params.hasOwnProperty("turn") ? JSON.parse(params.turn) : 1,
     gender: params.gender || "هر دو",
     degree: params.degree || "همه موارد",
-  });
+  };
 
-  useEffect(() => {
+  const [data, setData] = useState(defaultData);
-    setTimeout(() => {
+  const [confirmedData, setConfirmedData] = useState(defaultData);
-      setLoading(false);
-    }, 2000);
-  }, []);
 
   return (
     <div className="pt-[95px] sm:pt-[120px] padding-responsive">
@@ -44,6 +41,7 @@ function DoctorsPage({ params, matchedCity, matchedState, list }) {
           open={open}
           setOpen={setOpen}
           selected={selected}
+          state={matchedState}
           setSelected={setSelected}
         >
           <Button
@@ -60,11 +58,20 @@ function DoctorsPage({ params, matchedCity, matchedState, list }) {
           </Button>
         </ModalSearchCity>
         <div className="flex flex-col lg:flex-row items-start lg:items-center justify-center gap-[24px] lg:gap-[32px] w-full">
-          <SearchBar data={data} setData={setData} params={params} />
+          <SearchBar
+            data={data}
+            params={params}
+            setData={setData}
+            setDoctors={setDoctors}
+            matchedCity={matchedCity}
+            matchedState={matchedState}
+            confirmedData={confirmedData}
+            setConfirmedData={setConfirmedData}
+          />
           <SortList data={data} setData={setData} />
         </div>
       </div>
-      <ListDoctors loading={loading} list={list} />
+      <ListDoctors loading={loading} list={doctors} />
     </div>
   );
 }

components/doctors/modal/ButtonApply.js

@@ -0,0 +1,94 @@
+import { Button } from "@mui/material";
+import specialties from "@/data/specialties.json";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { request } from "@/services/response";
+
+function ButtonApply({
+  data,
+  setConfirmedData,
+  matchedCity,
+  matchedState,
+  setOpen,
+  setDoctors,
+}) {
+  const router = useRouter();
+  const [loading, setLoading] = useState(false);
+
+  const sendReq = () => {
+    setLoading(true);
+
+    const params = new URLSearchParams(window.location.search);
+    const field = params.get("field");
+    const gender = params.get("gender");
+    const degree = params.get("degree");
+    const turn = params.get("turn");
+
+    const requestData = {
+      field: field === "null" ? null : field,
+      gender,
+      degree,
+      turn,
+      city: matchedCity?.id || null,
+      state: matchedState?.id || null,
+    };
+
+    request
+      .getDoctors(requestData)
+      .then((res) => {
+        if (res && res.data) setDoctors(res.data);
+      })
+      .catch((err) => {})
+      .finally(() => {
+        setOpen(false);
+        setLoading(false);
+      });
+  };
+
+  const applyFilters = () => {
+    const current = new URLSearchParams();
+
+    const mappings = [
+      {
+        key: "field",
+        getValue: () => {
+          if (data.category) {
+            const children = specialties.filter(
+              (item) => item.parent === data.category.id
+            );
+            return children.length > 0 ? children[0].id : data.category.id;
+          }
+          return null;
+        },
+      },
+      { key: "gender", getValue: () => data.gender || null },
+      { key: "degree", getValue: () => data.degree || null },
+      { key: "turn", getValue: () => data.turn },
+    ];
+
+    mappings.forEach(({ key, getValue }) => {
+      const value = getValue();
+      current.set(key, value);
+    });
+
+    const queryString = current.toString();
+    setConfirmedData(data);
+    sendReq();
+    router.push(`/doctors?${queryString}`);
+  };
+
+  return (
+    <div className="flex justify-end w-full">
+      <Button
+        loading={loading}
+        variant="contained"
+        onClick={applyFilters}
+        className="!px-3 !py-2 !text-[16px] !font-medium"
+      >
+        اعمال تغییرات
+      </Button>
+    </div>
+  );
+}
+
+export default ButtonApply;

components/doctors/modal/Content.js

@@ -1,17 +1,7 @@
-import { useRouter } from "next/navigation";
 import specialties from "@/data/specialties.json";
 import Form from "./form";
 
 function Content({ data, setData }) {
-  const router = useRouter();
-
-  const changeUrl = (value, name) => {
-    const current = new URLSearchParams(window.location.search);
-    current.set(name, value.id || value);
-    const queryString = current.toString();
-    router.push(`/doctors?${queryString}`);
-  };
-
   const changeData = (value, name, isCategory, key) => {
     const newData = { ...data, [name]: value };
 
@@ -23,9 +13,6 @@ function Content({ data, setData }) {
       const firstChildren = filteredChildrenList[0];
 
       newData.specialties = firstChildren || "";
-      changeUrl(firstChildren || value, key);
-    } else {
-      changeUrl(value, key);
     }
 
     setData(newData);

components/doctors/modal/FilterModal.js

@@ -7,29 +7,44 @@ import { useState } from "react";
 import Content from "./Content";
 import { useRouter } from "next/navigation";
 import { clearFilterParams } from "@/helper";
+import ButtonApply from "./ButtonApply";
 
-function FilterModal({ data, setData, children }) {
+function FilterModal({
+  data,
+  setData,
+  children,
+  setDoctors,
+  matchedCity,
+  matchedState,
+  confirmedData,
+  setConfirmedData,
+}) {
   const router = useRouter();
   const [open, setOpen] = useState(false);
 
   const handleOpen = () => setOpen(true);
-  const handleClose = () => setOpen(false);
+  const handleClose = () => {
+    setOpen(false);
+    setData(confirmedData);
+  };
 
   const deleteData = () => {
     clearFilterParams(router, [
       "turn",
-      "specialties",
+      "field",
       "degree",
       "category",
       "gender",
     ]);
-    setData({
+    const defaultData = {
       category: "",
       specialties: "",
       turn: true,
       gender: "هر دو",
       degree: "متخصص",
-    });
+    };
+    setData(defaultData);
+    setConfirmedData(defaultData);
     handleClose();
   };
 
@@ -61,15 +76,14 @@ function FilterModal({ data, setData, children }) {
             </div>
             <Content data={data} setData={setData} />
           </div>
-          <div className="flex justify-end w-full">
+          <ButtonApply
-            <Button
+            data={data}
-              className="!px-3 !py-2 !text-[16px] !font-medium"
+            setOpen={setOpen}
-              onClick={handleClose}
+            setDoctors={setDoctors}
-              variant="contained"
+            matchedCity={matchedCity}
-            >
+            matchedState={matchedState}
-              اعمال تغییرات
+            setConfirmedData={setConfirmedData}
-            </Button>
+          />
-          </div>
         </div>
       </Modal>
     </>

components/doctors/modal/form/CateSelector.js

@@ -6,7 +6,7 @@ function CateSelector({ list, value, isError, updateData, label }) {
   return (
     <Autocomplete
       disablePortal
-      value={value}
+      value={value || null}
       options={list}
       getOptionLabel={(option) => option?.name}
       className="!w-full !rounded-lg auto-complete-selector"

components/doctors/modal/form/index.js

@@ -1,7 +1,6 @@
 import SwitchContent from "./SwitchContent";
 import RadioContent from "./RadioContent";
 import { filterList } from "@/helper";
-import { useState } from "react";
 import CateSelector from "./CateSelector";
 
 const gender = ["زن", "مرد", "هر دو"];

components/doctors/search/index.js

@@ -4,7 +4,16 @@ import ArrowBottomD from "@/components/icons/ArrowBottomD";
 import SearchD from "@/components/icons/SearchD";
 import FilterModal from "../modal/FilterModal";
 
-function SearchBar({ data, setData, params }) {
+function SearchBar({
+  data,
+  setData,
+  params,
+  setDoctors,
+  matchedCity,
+  matchedState,
+  confirmedData,
+  setConfirmedData,
+}) {
   return (
     <ButtonGroup
       variant="contained"
@@ -12,7 +21,15 @@ function SearchBar({ data, setData, params }) {
             flex items-center !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
             !h-[44px] sm:!h-[50px] md:!h-[57px] lg:!h-[64px]"
     >
-      <FilterModal data={data} setData={setData}>
+      <FilterModal
+        data={data}
+        setData={setData}
+        setDoctors={setDoctors}
+        matchedCity={matchedCity}
+        matchedState={matchedState}
+        confirmedData={confirmedData}
+        setConfirmedData={setConfirmedData}
+      >
         <Button
           className="!border-none !hidden lg:!flex !max-h-full !min-w-fit !h-[64px] !px-2 !bg-[#F8F8FF] !rounded-l-none"
           variant="contained"

components/home/search/modal/index.js

@@ -48,12 +48,12 @@ function ModalSearchCity() {
   useEffect(() => {
     if (selected.first) {
       const selectedState = states.find(
-        (state) => state.label === selected.first,
+        (state) => state.label === selected.first
       );
       if (selectedState) {
         const stateId = selectedState.id;
         const filteredCities = cities.filter(
-          (city) => city.province_id === stateId,
+          (city) => city.province_id === stateId
         );
         setFilteredCities(filteredCities);
       }

services/response.js

@@ -49,6 +49,13 @@ export const request = {
   getUserInfo: (headers) => api.get("oauth/userinfo", headers),
   getInsuranceType: () =>
     api.get("api/v1/categorys/insurance_type", removeTokenHead),
+  getDoctors: (params) =>
+    api.get("api/v1/doctors", {
+      params,
+      headers: {
+        Authorization: "",
+      },
+    }),
   getAppointmentNotAvailable: (doctor_id) =>
     api.get(`api/v1/appointment/not-available/${doctor_id}`, removeTokenHead),
   getAppointmentWeeklySchedule: (uuid) =>
@@ -77,5 +84,5 @@ export const request = {
   getDoctorServices: () =>
     api.get("api/v1/categorys/doctor_services", removeTokenHead),
   postDoctorComment: (data) => api.post("api/v1/clinicpro/comment", data),
-  postDoctorRate: (data) => api.post("api/v1/clinicpro/rate", data)
+  postDoctorRate: (data) => api.post("api/v1/clinicpro/rate", data),
 };