get data from url and set in state & change default value & handle delete value of states & handle list and filter category and expertise in doctors page & handle search onchange & filter list clinics on change state

components/doctors/modal/Content.js

@@ -1,46 +1,50 @@
 import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
 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";
+import { filterList } from "@/helper";
 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);
+  const { parentList, childrenList } = filterList(data);
 
-  const changedParentList = addKeyToList(parentList, 'label', 'name') || [];
-  const changedChildrenList = addKeyToList(childrenList, 'label', 'name') || [];
-
-  const filteredChildrenList = changedChildrenList.filter(item => item.parent === data.category.id);
-
-  const changeData = (value, name) => {
+  const changeUrl = (value, name, removeExpertise) => {
     const current = new URLSearchParams(window.location.search);
     current.set(name, value.id || value);
+    if (removeExpertise) {
+      current.delete('expertise')
+    };
     const queryString = current.toString();
     router.push(`/doctors?${queryString}`)
-    setData({ ...data, [name]: value });
+  }
+
+  const changeData = (value, name, removeExpertise) => {
+    changeUrl(value, name, removeExpertise);
+    const newData = data;
+    newData[name] = value;
+    if (removeExpertise) {
+      newData.expertise = ''
+    };
+    setData(newData);
   }
 
   return (
     <div className="mt-[50px] px-[0px] md:px-[19px] lg:px-[38px] mb-[32px]">
       <AutoCompleteSelect
-        list={changedParentList}
-        updateData={changeData}
+        list={parentList}
+        updateData={(value, name) => changeData(value, name, true)}
         sendAll={true}
         value={data.category.name}
         label="دسته بندی"
         name="category"
       />
-      {!!filteredChildrenList.length && (
+      {!!childrenList.length && (
         <div className="mt-[24px]">
           <AutoCompleteSelect
-            list={filteredChildrenList}
+            list={childrenList}
             updateData={changeData}
             sendAll={true}
             value={data.expertise}
@@ -70,9 +74,10 @@ function Content({ data, setData }) {
           <FormControlLabel
             control={
               <Switch
-                // value={data.turn}
                 checked={data.turn}
-                onChange={(event) => changeData(event.target.checked, "turn")}
+                onChange={(event) => {
+                  changeData(event.target.checked ? 1 : 0, "turn")
+                }}
               />
             }
             sx={{

components/doctors/modal/FilterModal.js

@@ -6,27 +6,24 @@ import { Button, Modal } from "@mui/material";
 import { useState } from "react";
 import Content from "./Content";
 import { useRouter } from "next/navigation";
+import { clearFilterParams } from "@/helper";
 
-function FilterModal({ data, setData, children, defaultData }) {
+function FilterModal({ data, setData, children }) {
   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()
+    clearFilterParams(router, ['turn', 'expertise', 'degree', 'category', 'gender'])
+    setData({
+      category: "",
+      expertise: "",
+      turn: true,
+      gender: "هر دو",
+      degree: "متخصص",
+    });
     handleClose();
   }