design and handle modal add, edit and delete in all tabs dashboard & change list & update data profile_other

components/dashboard/userAccount/content/index.js

@@ -32,27 +32,45 @@ function ContentTabs({
   setValue,
   setIsOpenSide,
 }) {
-  const [loading, setLoading] = useState(true);
   const [tab, setTab] = useState(0);
-  const data = profileData[0];
+  const [data, setData] = useState(profileData[0]);
 
-  const handleChange = (_, newValue) => {
-    setTab(newValue);
+  const handleChange = (_, newValue) => setTab(newValue);
+  const changeData = (action, name, id, payload) => {
+    const newData = {
+      ...data,
+      [name]: [...data[name]],
+    };
+
+    switch (action) {
+      case "update":
+        newData[name][id] = payload;
+        break;
+
+      case "add":
+        newData[name].push(payload);
+        break;
+
+      case "delete":
+        newData[name].splice(id, 1);
+        break;
+
+      default:
+        console.warn(`Unknown action: ${action}`);
+        return;
+    }
+    console.log(newData);
+
+    setData(newData);
   };
 
-  useEffect(() => {
-    setTimeout(() => {
-      setLoading(false);
-    }, 2000);
-  }, []);
-
   const components = [
-    <Disease data={data} />,
-    <Allergies data={data} />,
-    <Medications data={data} />,
-    <Surgeries data={data} />,
-    <FamilyHistory data={data} />,
-    <Relatives data={data} />,
+    <Disease data={data} changeData={changeData} />,
+    <Allergies data={data} changeData={changeData} />,
+    <Medications data={data} changeData={changeData} />,
+    <Surgeries data={data} changeData={changeData} />,
+    <FamilyHistory data={data} changeData={changeData} />,
+    <Relatives data={data} changeData={changeData} />,
   ];
 
   return (
@@ -88,7 +106,6 @@ function ContentTabs({
         tab={tab}
         user={user}
         listTab={listTab}
-        loading={loading}
         components={components}
         handleChange={handleChange}
         isTurnsDetails={isTurnsDetails}