handle request in modal filters, selector sort, search city with one function and field-search & handle change all data in doctors filter with one function & change modal search location in home page & set data with diffrent key in url of page doctors

components/doctors/modal/ButtonApply.js

@@ -1,97 +1,16 @@
 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";
-import { degreeVal } from "@/helper";
 
-function ButtonApply({
-  data,
-  setConfirmedData,
-  matchedCity,
-  matchedState,
-  setOpen,
-  setDoctors,
-}) {
-  const router = useRouter();
+function ButtonApply({ sendReq, setOpen }) {
   const [loading, setLoading] = useState(false);
 
-  const sendReq = (requestData) => {
+  const handleClick = () => {
     setLoading(true);
 
-    request
-      .getDoctors(requestData)
-      .then((res) => {
-        if (res && res.data) setDoctors(res.data);
-      })
-      .catch(() => {})
-      .finally(() => {
-        setOpen(false);
-        setLoading(false);
-      });
-  };
-
-  const applyFilters = () => {
-    const current = new URLSearchParams();
-
-    const mappings = [
-      {
-        key: "field",
-        getValue: (name) => {
-          if (data.category) {
-            const children = specialties.filter(
-              (item) => item.parent === data.category.id
-            );
-            return children.length > 0
-              ? children.find((item) => item.name === data.specialties.name)[
-                  name || "id"
-                ]
-              : data.category[name || "id"];
-          }
-          return null;
-        },
-      },
-      {
-        key: "gender",
-        getValue: () => (data.gender === "زن" ? "woman" : "man" || null),
-      },
-      {
-        key: "degree",
-        getValue: (name) => {
-          const item = degreeVal.find((item) => item.name === data.degree);
-
-          return (item && item[name || "val"]) || null;
-        },
-      },
-      { key: "turn", getValue: () => data.turn },
-    ];
-
-    let requestData = {
-      city: matchedCity?.id || null,
-      state: matchedState?.id || null,
-    };
-
-    mappings.forEach(({ key, getValue }) => {
-      let value;
-      if (key === "field") {
-        value = getValue("name");
-      } else if (key === "gender") {
-        value = data.gender;
-      } else if ("degree") {
-        value = getValue("name");
-      }
-      current.set(key, value);
+    sendReq().finally(() => {
+      setOpen(false);
+      setLoading(false);
     });
-
-    mappings.forEach(({ key, getValue }) => {
-      let value = getValue();
-      requestData[key === "field" ? "specialty" : key] = value;
-    });
-
-    const queryString = current.toString();
-    setConfirmedData(data);
-    sendReq(requestData);
-    router.push(`/doctors?${queryString}`);
   };
 
   return (
@@ -99,7 +18,7 @@ function ButtonApply({
       <Button
         loading={loading}
         variant="contained"
-        onClick={applyFilters}
+        onClick={handleClick}
         className="!px-3 !py-2 !text-[16px] !font-medium"
       >
         اعمال تغییرات