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

components/doctors/modal/Content.js

@@ -1,27 +1,31 @@
 import specialties from "@/data/specialties.json";
 import Form from "./form";
 
-function Content({ data, setData }) {
-  const changeData = (value, name, isCategory, key) => {
-    const newData = { ...data, [name]: value };
+function Content({ filter, setFilter, updateData }) {
+  const changeSpecialty = (name, value) => {
+    const newFilter = { ...filter, [name]: value };
 
-    if (isCategory) {
+    if (name === "category") {
       const childrenList = specialties.filter((item) => item.parent);
       const filteredChildrenList = childrenList.filter(
         (item) => item.parent === value.id
       );
       const firstChildren = filteredChildrenList[0];
 
-      newData.specialties = firstChildren || "";
+      newFilter.specialty = firstChildren || "";
     }
 
-    setData(newData);
-    return newData;
+    setFilter(newFilter);
+    return newFilter;
   };
 
   return (
     <div className="mt-[50px] px-[0px] md:px-[19px] lg:px-[38px] mb-[32px]">
-      <Form data={data} changeData={changeData} />
+      <Form
+        filter={filter}
+        updateData={updateData}
+        changeSpecialty={changeSpecialty}
+      />
     </div>
   );
 }

components/doctors/modal/FilterModal.js

@@ -11,9 +11,12 @@ import ButtonApply from "./ButtonApply";
 
 function FilterModal({
   data,
+  filter,
   setData,
   children,
+  setFilter,
   setDoctors,
+  updateData,
   matchedCity,
   matchedState,
   confirmedData,
@@ -28,7 +31,7 @@ function FilterModal({
     setData(confirmedData);
   };
 
-  const deleteData = () => {
+  const resetFilter = () => {
     clearFilterParams(router, ["turn", "field", "degree", "gender"]);
 
     const defaultData = {
@@ -39,8 +42,20 @@ function FilterModal({
       degree: "متخصص",
     };
 
+    const newFilter = {
+      category: undefined,
+      specialty: undefined,
+      active: 0,
+      gender: "هر دو",
+      degree: "همه موارد",
+    };
+
     setData({ ...defaultData });
     setConfirmedData({ ...defaultData });
+    setFilter({
+      ...filter,
+      ...newFilter,
+    });
 
     handleClose();
   };
@@ -62,7 +77,7 @@ function FilterModal({
               <p className="text-[#3B3B3B] text-[20px] font-bold">فیلترها</p>
               <Button
                 className="cursor-pointer !p-0 flex items-center justify-center gap-1"
-                onClick={deleteData}
+                onClick={resetFilter}
                 variant="text"
               >
                 <CloseOrangeModal />
@@ -71,7 +86,11 @@ function FilterModal({
                 </p>
               </Button>
             </div>
-            <Content data={data} setData={setData} />
+            <Content
+              filter={filter}
+              setFilter={setFilter}
+              updateData={updateData}
+            />
           </div>
           <ButtonApply
             data={data}

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