refactored some components and seperated their API calls

src/components/FamilyAcc/Tabs/FamilyTasks.jsx

@@ -10,7 +10,6 @@ import LoadingSpinner from "../../Spinners/LoadingSpinner";
 export default function FamilyTasks({
   familyData,
   className,
-  loader,
   accountDetails,
 }) {
   let navigate = useNavigate();
@@ -19,17 +18,17 @@ export default function FamilyTasks({
   // ...
   const filteredFamilyData = useMemo(
     () =>
-      familyData?.result_list?.filter(
+      familyData?.data?.result_list?.filter(
         (data) => data?.family_uid === accountDetails?.family_uid
       ),
-    [familyData, accountDetails]
+    [familyData?.data, accountDetails]
   );
 
   const [currentPage, setCurrentPage] = useState(0);
   const indexOfFirstItem = Number(currentPage);
   const indexOfLastItem =
     Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
-  const currentTask = familyData?.result_list.slice(
+  const currentTask = familyData?.data?.result_list?.slice(
     indexOfFirstItem,
     indexOfLastItem
   );
@@ -43,21 +42,21 @@ export default function FamilyTasks({
         className || ""
       }`}
     >
-      {loader ? (
-        <div className="w-full h-full flex justify-center items-center lg:min-h-[470px]">
-          <LoadingSpinner size={16} color="sky-blue" />
+      {familyData.loading ? (
+        <div className="w-full h-full flex justify-center items-center">
+          <LoadingSpinner size={16} color="sky-blue" height='h-[30rem]' />
         </div>
       ) : (
         <>
-          {familyData && familyData?.result_list && (
+          {familyData?.data && familyData?.data?.result_list && (
             <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between h-full">
               <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
                 <tbody>
                   {
                     <>
-                      {familyData &&
-                      familyData?.result_list &&
-                      familyData.result_list.length > 0 ? (
+                      {familyData?.data &&
+                      familyData?.data?.result_list &&
+                      familyData?.data.result_list.length > 0 ? (
                         currentTask.map((value, index) => {
                           // find due date
                           const dueDate = value?.delivery_date.split(" ")[0];
@@ -67,7 +66,7 @@ export default function FamilyTasks({
                             value?.currency_code,
                             value?.currency
                           );
-                          let image = `${familyData.session_image_server}${localStorage.getItem('session_token')}/job/${value.job_uid}`
+                          let image = `${familyData?.data?.session_image_server}${localStorage.getItem('session_token')}/job/${value.job_uid}`
                           return (
                             <tr
                               key={index}
@@ -149,11 +148,11 @@ export default function FamilyTasks({
                 prev={currentPage == 0 ? true : false}
                 next={
                   currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
-                  familyData?.result_list.length
+                  familyData?.data?.result_list.length
                     ? true
                     : false
                 }
-                data={familyData?.result_list}
+                data={familyData?.data?.result_list}
                 start={indexOfFirstItem}
                 stop={indexOfLastItem}
               />