handle change data step office information

components/panel/addDoctor/index.js

@@ -25,6 +25,8 @@ function AddDoctorPage() {
       phone: { value: 1741025645, isEdit: false },
       office_number1: { value: "", isEdit: false },
       office_number2: { value: "", isEdit: false },
+      state: { value: "", isEdit: false },
+      city: { value: "", isEdit: false },
     },
     work_day: [
       { name: "شنبه", morning_time: ["", ""], evening_time: ["", ""] },
@@ -43,12 +45,15 @@ function AddDoctorPage() {
       setData={setData}
       setValue={setValue}
     />,
-    <OfficeInformation data={data} setData={setData} setValue={setValue} />,
+    <OfficeInformation
+      parent="office"
+      data={data}
+      setData={setData}
+      setValue={setValue}
+    />,
     <WorkingDays data={data} setData={setData} setValue={setValue} />,
   ];
 
-  console.log(data);
-
   return (
     <div className="opacity-page">
       <p className="text-[#525252] dark:text-[#D7D8ED] text-[20px] font-bold hidden md:flex">

components/panel/addDoctor/listMenu/officeInformation/Form.js

@@ -1,41 +1,32 @@
 "use client";
 
-import { useState } from "react";
-
 import { city, state } from "./listSelector";
 import EditField from "@/app/component/EditField";
 import ContentText from "@/app/component/ContentText";
 import AddLocationP from "@/components/icons/AddLocationP";
 import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
 
-function Form() {
-  const [data, setData] = useState({
-    address: { value: "", isEdit: false },
-    phone: { value: 1741025645, isEdit: false },
-    office_number1: { value: "", isEdit: false },
-    office_number2: { value: "", isEdit: false },
-  });
-  const [selected, setSelected] = useState({
-    state: "",
-    city: "",
-  });
-  const updateSelect = (event, name) =>
-    setSelected({ ...selected, [name]: event });
-
-  const changeData = (value, type, name) =>
-    setData({
-      ...data,
-      [name]: {
-        ...data[name],
-        [type]: value,
-      },
+function Form({ parent, data, setData }) {
+  const changeData = (value, type, name) => {
+    setData((prev) => {
+      return {
+        ...prev,
+        [parent]: {
+          ...prev[parent],
+          [name]: {
+            ...prev[parent][name],
+            [type]: value,
+          },
+        },
+      };
     });
+  };
 
   return (
     <div className="mt-[24px] grid grid-cols-1 md:grid-cols-2 gap-x-[48px] gap-y-[24px]">
       <ContentText text="استان">
         <AutoCompleteSelect
-          updateData={updateSelect}
+          updateData={changeData}
           label="انتخاب کنید..."
           name="state"
           list={state}
@@ -43,7 +34,7 @@ function Form() {
       </ContentText>
       <ContentText text="شهر">
         <AutoCompleteSelect
-          updateData={updateSelect}
+          updateData={changeData}
           label="انتخاب کنید..."
           name="city"
           list={city}

components/panel/addDoctor/listMenu/officeInformation/index.js

@@ -2,10 +2,10 @@ import ArrowLeftPA from "@/components/icons/ArrowLeftPA";
 import { Button } from "@mui/material";
 import Form from "./Form";
 
-function OfficeInformation({ setValue }) {
+function OfficeInformation({ setValue, parent, data, setData }) {
   return (
     <div className="opacity-page pb-[24px]">
-      <Form />
+      <Form parent={parent} setData={setData} data={data.office} />
       <div className="mt-[40px] w-full flex justify-end">
         <Button
           className="!bg-[#5559CE] !w-full md:!w-fit !shadow-none !rounded-[4px] !gap-[4px] !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium"