change function of fliter sort, modal and locate set new data and change it and update

components/doctors/modal/form/CateSelector.js

@@ -2,7 +2,7 @@ import BottomSelect from "@/components/icons/BottomSelect";
 import { Autocomplete, Button, TextField } from "@mui/material";
 import { styleTextSelectRight } from "@/mui";
 
-function CateSelector({ list, value, isError, updateData, label }) {
+function CateSelector({ name, list, value, isError, updateData, label }) {
   return (
     <Autocomplete
       disablePortal
@@ -10,7 +10,7 @@ function CateSelector({ list, value, isError, updateData, label }) {
       options={list}
       getOptionLabel={(option) => option?.name}
       className="!w-full !rounded-lg auto-complete-selector"
-      onChange={(_, newValue) => updateData(newValue)}
+      onChange={(_, newValue) => updateData(name, newValue)}
       sx={{
         ...styleTextSelectRight,
         // Hide Icon Number

components/doctors/modal/form/RadioContent.js

@@ -1,12 +1,12 @@
 import Radios from "./Radios";
 
-function RadioContent({ group, text, value, changeData, name }) {
+function RadioContent({ group, text, value, updateData, name }) {
   return (
     <div>
       <p className="text-[16px] font-medium text-[#3B3B3B]">{text}</p>
       <div className="mt-[16px]">
         <Radios
-          changeData={changeData}
+          updateData={updateData}
           group={group}
           value={value}
           name={name}

components/doctors/modal/form/Radios.js

@@ -1,11 +1,11 @@
 import { FormControlLabel, Radio, RadioGroup } from "@mui/material";
 
-function Radios({ group, value, changeData, name }) {
+function Radios({ group, value, updateData, name }) {
   return (
     <RadioGroup
       value={value}
       className="radio-mui"
-      onChange={(e) => changeData(e.target.value, name, false, name)}
+      onChange={(e) => updateData(name, e.target.value)}
       sx={{
         "& .MuiFormControlLabel-root": {
           marginRight: "0 !important",

components/doctors/modal/form/SwitchContent.js

@@ -1,14 +1,14 @@
 import { FormControlLabel, Switch } from "@mui/material";
 
-function SwitchContent({ data, changeData }) {
+function SwitchContent({ filter, updateData }) {
   return (
     <div className="flex items-center justify-start gap-[12px]">
       <FormControlLabel
         control={
           <Switch
-            checked={data.turn}
+            checked={filter.active}
             onChange={(event) =>
-              changeData(event.target.checked ? 1 : 0, "turn", false, "turn")
+              updateData("active", event.target.checked ? 1 : 0)
             }
           />
         }

components/doctors/modal/form/index.js

@@ -6,47 +6,47 @@ import CateSelector from "./CateSelector";
 const gender = ["زن", "مرد", "هر دو"];
 const degree = ["پزشک عمومی", "پزشک متخصص", "پزشک فوق تخصص", "همه موارد"];
 
-function Form({ data, changeData }) {
-  const { parentList, childrenList } = filterList(data);
+function Form({ filter, changeSpecialty, updateData }) {
+  const { parentList, childrenList } = filterList(filter);
 
   return (
     <>
       <CateSelector
+        name="category"
         list={parentList}
         label="دسته بندی"
-        value={data.category}
-        updateData={(value) => changeData(value, "category", true, "specialty")}
+        value={filter.category}
+        updateData={changeSpecialty}
       />
-      {!!childrenList.length && (
-        <div className="mt-[24px]">
-          <CateSelector
-            list={childrenList}
-            updateData={(value) =>
-              changeData(value, "specialties", false, "specialty")
-            }
-            value={data.specialties}
-            label="تخصص"
-          />
-        </div>
-      )}
+      <div
+        className={`${!!childrenList.length ? "max-h-32 mt-[24px]" : "max-h-0 mt-0"} overflow-hidden transition-all duration-500`}
+      >
+        <CateSelector
+          name="specialty"
+          list={childrenList}
+          updateData={updateData}
+          value={filter.specialty}
+          label="تخصص"
+        />
+      </div>
       <div className="mt-[40px] mb-[32px]">
         <RadioContent
-          changeData={changeData}
-          value={data.gender}
+          updateData={updateData}
+          value={filter.gender}
           text="جنسیت پزشک"
           group={gender}
           name="gender"
         />
         <span className="block mt-[16px] mb-[24px] w-full h-px bg-[#EFEFEF]"></span>
         <RadioContent
-          changeData={changeData}
-          value={data.degree}
+          updateData={updateData}
+          value={filter.degree}
           text="درجه علمی"
           group={degree}
           name="degree"
         />
         <span className="block mt-[16px] mb-[24px] w-full h-px bg-[#EFEFEF]"></span>
-        <SwitchContent data={data} changeData={changeData} />
+        <SwitchContent filter={filter} updateData={updateData} />
       </div>
     </>
   );