change component file & set data in url & handle remove all variable

components/doctors/modal/Content.js

@@ -3,11 +3,14 @@ import RadioContent from "./RadioContent";
 import { FormControlLabel, Switch } from "@mui/material";
 import specialties from "@/data/specialties.json";
 import { addKeyToList } from "@/helper";
+import { useEffect } from "react";
+import { useRouter } from "next/navigation";
 const group1 = ["خانم", "آقا", "هر دو"];
 const group2 = ["فوق تخصص", "دکترای تخصصی", "متخصص", "دکتری"];
 
 
 function Content({ data, setData }) {
+  const router = useRouter();
   const parentList = specialties.filter(item => !item.parent);
   const childrenList = specialties.filter(item => item.parent);
 
@@ -16,33 +19,36 @@ function Content({ data, setData }) {
 
   const filteredChildrenList = changedChildrenList.filter(item => item.parent === data.category.id);
 
-  console.log(data);
   const changeData = (value, name) => {
-    console.log(value);
-    console.log(name);
-
-    setData({ ...data, [name]: value })
-  };
+    const current = new URLSearchParams(window.location.search);
+    current.set(name, value.id || value);
+    const queryString = current.toString();
+    router.push(`/doctors?${queryString}`)
+    setData({ ...data, [name]: value });
+  }
 
   return (
     <div className="mt-[50px] px-[0px] md:px-[19px] lg:px-[38px] mb-[32px]">
       <AutoCompleteSelect
         list={changedParentList}
         updateData={changeData}
+        sendAll={true}
         value={data.category.name}
         label="دسته بندی"
         name="category"
       />
-      <div className="mt-[24px]">
-        <AutoCompleteSelect
-          list={filteredChildrenList}
-          disabled={!data.category}
-          updateData={changeData}
-          value={data.expertise}
-          name="expertise"
-          label="تخصص"
-        />
-      </div>
+      {!!filteredChildrenList.length && (
+        <div className="mt-[24px]">
+          <AutoCompleteSelect
+            list={filteredChildrenList}
+            updateData={changeData}
+            sendAll={true}
+            value={data.expertise}
+            name="expertise"
+            label="تخصص"
+          />
+        </div>
+      )}
       <div className="mt-[40px] mb-[32px]">
         <RadioContent
           changeData={changeData}
@@ -61,17 +67,11 @@ function Content({ data, setData }) {
         />
         <span className="block mt-[16px] mb-[24px] w-full h-px bg-[#EFEFEF]"></span>
         <div className="flex items-center justify-start gap-[12px]">
-          {/* <p className="text-[#3B3B3B] text-[16px] font-medium">
-            فقط پزشکان دارای نوبت
-          </p> */}
-          {/* <Switch
-            onChange={(event) =>
-              changeData(event.target.checked, "turn")
-            }
-          /> */}
           <FormControlLabel
             control={
               <Switch
+                // value={data.turn}
+                checked={data.turn}
                 onChange={(event) => changeData(event.target.checked, "turn")}
               />
             }
@@ -81,12 +81,10 @@ function Content({ data, setData }) {
                 fontSize: "16px",
                 fontWeight: 500,
               },
-              ".MuiFormControlLabel-root.MuiFormControlLabel-labelPlacementStart": {
-                marginRight: '0 !important'
-              }
+              marginLeft: '0 !important',
             }}
             label="فقط پزشکان دارای نوبت"
-            labelPlacement="start" // متن را سمت راست یا چپ قرار می‌دهد
+            labelPlacement="start"
           />
         </div>
       </div>

components/doctors/modal/FilterModal.js

@@ -5,12 +5,31 @@ import { styleDefault } from "@/mui";
 import { Button, Modal } from "@mui/material";
 import { useState } from "react";
 import Content from "./Content";
+import { useRouter } from "next/navigation";
 
-function FilterModal({ data, setData, children }) {
+function FilterModal({ data, setData, children, defaultData }) {
+  const router = useRouter();
   const [open, setOpen] = useState(false);
+
   const handleOpen = () => setOpen(true);
   const handleClose = () => setOpen(false);
 
+  function clearFilterParams() {
+    const currentParams = new URLSearchParams(window.location.search);
+    const keysToRemove = ['turn', 'expertise', 'degree', 'category', 'gender'];
+    keysToRemove.forEach((key) => currentParams.delete(key));
+    const queryString = currentParams.toString();
+    const newUrl = queryString ? `/doctors?${queryString}` : '/doctors';
+
+    router.push(newUrl);
+  }
+
+  const deleteData = () => {
+    setData(defaultData);
+    clearFilterParams()
+    handleClose();
+  }
+
   return (
     <>
       {/* Button Modal */}
@@ -28,7 +47,7 @@ function FilterModal({ data, setData, children }) {
               <p className="text-[#3B3B3B] text-[20px] font-bold">فیلترها</p>
               <Button
                 className="cursor-pointer !p-0 flex items-center justify-center gap-1"
-                onClick={handleClose}
+                onClick={deleteData}
                 variant="text"
               >
                 <CloseOrangeModal />