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

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">
-            <Button
-              className="!px-3 !py-2 !text-[16px] !font-medium"
-              onClick={handleClose}
-              variant="contained"
-            >
-              اعمال تغییرات
-            </Button>
-          </div>
+          <ButtonApply
+            data={data}
+            setOpen={setOpen}
+            setDoctors={setDoctors}
+            matchedCity={matchedCity}
+            matchedState={matchedState}
+            setConfirmedData={setConfirmedData}
+          />
         </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 = ["زن", "مرد", "هر دو"];