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

components/dashboard/userAccount/detailUser/allergies/ItemAllergie.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 ItemAllergie({ row, idx, changeData }) {
   const contentData = {
@@ -11,9 +11,18 @@ function ItemAllergie({ row, idx, changeData }) {
     reaction: row.reaction,
     severity: row.severity,
   };
+
   const [data, setData] = useState(contentData);
   const resetData = () => setData(contentData);
 
+  useEffect(() => {
+    setData({
+      substance: row.substance,
+      reaction: row.reaction,
+      severity: row.severity,
+    });
+  }, [row]);
+
   return (
     <TableRow className="!border-0 !border-b !border-[#DBDBDB] dark:!border-transparent">
       <TableCell

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

@@ -4,7 +4,9 @@ import { useState } from "react";
 import ItemAllergie from "./ItemAllergie";
 import ModalAddAlergie from "./modal";
 
-function Allergies({ data, changeData }) {
+function Allergies({ data, changeData, updateData, loading }) {
+  const { other } = data;
+  const { allergies } = other && other[0];
   const tableHead = ["ردیف", "ماده آلرژی‌زا", "واکنش", "شدت", ""];
   const centerTable = [0];
   const [open, setOpen] = useState(false);
@@ -15,16 +17,18 @@ function Allergies({ data, changeData }) {
         <ModalAddAlergie
           open={open}
           setOpen={setOpen}
+          loading={loading}
+          updateData={updateData}
           changeData={changeData}
         />
       </Head>
-      {data.allergies.length ? (
+      {allergies.length ? (
         <CustomTable
           zeroRadius={true}
           tableHead={tableHead}
           centerTable={centerTable}
         >
-          {data.allergies.map((row, idx) => (
+          {allergies.map((row, idx) => (
             <ItemAllergie
               key={idx}
               row={row}

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

@@ -6,7 +6,7 @@ import Content from "./Content";
 import { useState } from "react";
 import CloseModalD from "@/components/icons/CloseModalD";
 
-function ModalAddAlergie({ open, setOpen, changeData }) {
+function ModalAddAlergie({ open, setOpen, loading, changeData, updateData }) {
   const contentItem = {
     substance: "",
     reaction: "",
@@ -30,7 +30,7 @@ function ModalAddAlergie({ open, setOpen, changeData }) {
     <>
       {/* Button Modal */}
       <>
-        <UpdateBtn />
+        <UpdateBtn updateData={updateData} loading={loading} />
         <AddBtn handleOpen={handleOpen} />
       </>
 
@@ -46,9 +46,9 @@ function ModalAddAlergie({ open, setOpen, changeData }) {
               <p className="text-[#3B3B3B] text-[20px] font-bold">
                 اضافه کردن آلرژی
               </p>
-            <Button onClick={handleClose} className="!p-1" variant="text">
-              <CloseModalD />
-            </Button>
+              <Button onClick={handleClose} className="!p-1" variant="text">
+                <CloseModalD />
+              </Button>
             </div>
             <Content setData={setNewItem} />
           </div>