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

app/component/element/AutoCompleteSelect.js

@@ -10,7 +10,8 @@ function AutoCompleteSelect({
   name,
   label,
   disabled = false,
-  listboxProps
+  listboxProps,
+  sendAll
 }) {
   return (
     <Autocomplete
@@ -21,7 +22,7 @@ function AutoCompleteSelect({
       value={value || null}
       className="!w-full !rounded-lg auto-complete-selector"
       onChange={(e, newValue) => {
-        updateData && updateData(newValue || "", name);
+        updateData && updateData((newValue && sendAll) ? newValue : (newValue && !sendAll) && newValue.label || "", name);
       }}
       sx={{
         ...styleTextSelectRight,

components/doctors/index.js

@@ -8,6 +8,14 @@ import ListDoctors from "./listDoctors";
 import LocationD from "../icons/LocationD";
 import ModalSearchCity from "@/app/component/modalSearchCity";
 
+const defaultData = {
+  category: "",
+  expertise: "",
+  turn: true,
+  gender: "هر دو",
+  degree: "متخصص",
+}
+
 function DoctorsPage({ params, matchedCity, matchedState }) {
   const [loading, setLoading] = useState(true);
   const [open, setOpen] = useState(false);
@@ -16,13 +24,7 @@ function DoctorsPage({ params, matchedCity, matchedState }) {
     city: matchedCity?.name || params?.city,
   });
 
-  const [data, setData] = useState({
-    category: "",
-    expertise: "",
-    turn: true,
-    gender: "خانم",
-    degree: "فوق تخصص",
-  });
+  const [data, setData] = useState(defaultData);
 
   useEffect(() => {
     setTimeout(() => {
@@ -53,7 +55,7 @@ function DoctorsPage({ params, matchedCity, matchedState }) {
           </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} setData={setData} params={params} defaultData={defaultData} />
           <SortList data={data} setData={setData} />
         </div>
       </div>

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 />

components/doctors/search/index.js

@@ -4,7 +4,7 @@ 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, defaultData }) {
   return (
     <ButtonGroup
       variant="contained"
@@ -12,7 +12,7 @@ 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} defaultData={defaultData}>
         <Button
           className="!border-none !hidden lg:!flex !max-h-full !min-w-fit !h-[64px] !px-2 !bg-[#F8F8FF] !rounded-l-none"
           variant="contained"