Almost complete

src/components/FamilyAcc/index.jsx

@@ -1,4 +1,4 @@
-import React, { useId, useMemo, useState } from "react";
+import React, { useCallback, useEffect, useId, useMemo, useState } from "react";
 import CustomPopUp from "../Helpers/CustomPopUp";
 import InputCom from "../Helpers/Inputs/InputCom";
 import Layout from "../Partials/Layout";
@@ -8,6 +8,8 @@ import SiteService from "../../services/SiteService";
 export default function FamilyAcc() {
   const [selectTab, setValue] = useState("today");
   const [selectedAge, setSelectedAge] = useState(undefined);
+  const [familyList, setFamilyList] = useState([]);
+  const [isOpen, setIsOpen] = useState(false);
   const [loader, setLoader] = useState(false);
   const [msgErr, setMsgErr] = useState("");
   const [formData, setFormData] = useState({
@@ -41,12 +43,13 @@ export default function FamilyAcc() {
     setFormData({ ...formData, [name]: value });
   };
 
+  //   Add member
   const addMember = async () => {
-    let { first_name, last_name } = formData;
+    const { first_name, last_name } = formData;
     setLoader(true);
     try {
       if (first_name !== "" && last_name !== "") {
-        const reqData = {
+        let reqData = {
           member_id: localStorage.getItem("member_id"),
           uid: localStorage.getItem("uid"),
           session_id: localStorage.getItem("session_token"),
@@ -54,11 +57,15 @@ export default function FamilyAcc() {
           lastname: last_name,
           age: selectedAge,
         };
-        const res = await apiCall.addFamily(reqData);
+        console.log(reqData);
+        let res = await apiCall.addFamily(reqData);
         const { data } = res;
-        if (data.internal_return > 0 && data.status == "OK") {
+        if (data?.internal_return > 0 && data?.status == "OK") {
           setLoader(false);
-          console.log(data);
+          setIsOpen(false);
+        } else {
+          setLoader(false);
+          setMsgErr("Sorry, something went wrong");
         }
       } else {
         setLoader(false);
@@ -67,6 +74,7 @@ export default function FamilyAcc() {
     } catch (error) {
       setLoader(false);
       setMsgErr("An error occurred");
+      throw new Error(error);
     } finally {
       setTimeout(() => {
         setMsgErr(null);
@@ -74,6 +82,33 @@ export default function FamilyAcc() {
     }
   };
 
+  useEffect(() => {
+    // member listing
+    const memberList = async () => {
+      try {
+        let reqData = {
+          member_id: localStorage.getItem("member_id"),
+          uid: localStorage.getItem("uid"),
+          sessionid: localStorage.getItem("session_token"),
+          limit: 20,
+          offset: 1,
+          action: 22010,
+        };
+
+        let res = await apiCall.familyListings(reqData);
+        const { data } = res;
+        if (data?.internal_return >= 0 && data?.status == "OK") {
+          let { result_list } = data;
+          setFamilyList(result_list);
+        } else return;
+      } catch (error) {
+        throw new Error(error);
+      }
+    };
+    memberList();
+  }, []);
+  console.log(familyList);
+
   return (
     <Layout>
       {/*<CommonHead />*/}
@@ -93,6 +128,8 @@ export default function FamilyAcc() {
                   btn_class="text-purple"
                   key={id}
                   title="Add members"
+                  isOpen={isOpen}
+                  setIsOpen={setIsOpen}
                 >
                   <FamilyForm
                     value={formData}
@@ -114,7 +151,7 @@ export default function FamilyAcc() {
               ></div>
             </div>
           </div>
-          <FamilyTable />
+          <FamilyTable familyList={familyList} />
         </div>
       </div>
     </Layout>
@@ -187,7 +224,7 @@ const FamilyForm = ({
           </div>
         </div>
         {msgErr && (
-          <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px]">
+          <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-xs font-light leading-[19.5px]">
             {msgErr}
           </div>
         )}