handle change data and update data in dashboard page for all tabs

components/dashboard/userAccount/detailUser/surgeries/ItemSurgeries.js

@@ -3,7 +3,7 @@ import TextLoading from "@/app/component/loading/Text";
 import { TableCell, TableRow } from "@mui/material";
 import ModalEditItem from "@/components/dashboard/userAccount/components/modal/ModalEditItem";
 import Content from "./modal/Content";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 function ItemSurgeries({ row, idx, changeData }) {
   const contentData = {
@@ -14,6 +14,14 @@ function ItemSurgeries({ row, idx, changeData }) {
   const [data, setData] = useState(contentData);
   const resetData = () => setData(contentData);
 
+  useEffect(() => {
+    setData({
+      type: row.type,
+      year: row.year,
+      hospital: row.hospital,
+    });
+  }, [row]);
+
   return (
     <TableRow
       key={idx}

components/dashboard/userAccount/detailUser/surgeries/index.js

@@ -4,7 +4,9 @@ import { useState } from "react";
 import ItemSurgeries from "./ItemSurgeries";
 import ModalAddSurgeries from "./modal";
 
-function Surgeries({ data, changeData }) {
+function Surgeries({ data, changeData, loading, updateData }) {
+  const { other } = data;
+  const { surgeries } = other && other[0];
   const tableHead = [
     "ردیف",
     "نوع جراحی",
@@ -21,16 +23,18 @@ function Surgeries({ data, changeData }) {
         <ModalAddSurgeries
           open={open}
           setOpen={setOpen}
+          loading={loading}
+          updateData={updateData}
           changeData={changeData}
         />
       </Head>
-      {data.surgeries.length ? (
+      {surgeries.length ? (
         <CustomTable
           zeroRadius={true}
           tableHead={tableHead}
           centerTable={centerTable}
         >
-          {data.surgeries.map((row, idx) => (
+          {surgeries.map((row, idx) => (
             <ItemSurgeries
               key={idx}
               row={row}

components/dashboard/userAccount/detailUser/surgeries/modal/index.js

@@ -6,7 +6,7 @@ import Content from "./Content";
 import { useState } from "react";
 import CloseModalD from "@/components/icons/CloseModalD";
 
-function ModalAddSurgeries({ open, setOpen, changeData }) {
+function ModalAddSurgeries({ open, setOpen, updateData, loading, changeData }) {
   const contentItem = {
     type: "",
     year: "",
@@ -26,7 +26,7 @@ function ModalAddSurgeries({ open, setOpen, changeData }) {
     <>
       {/* Button Modal */}
       <>
-        <UpdateBtn />
+        <UpdateBtn loading={loading} updateData={updateData} />
         <AddBtn handleOpen={handleOpen} />
       </>