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={{