Optimizations and underlying fixes done yesterday

src/components/FamilyAcc/Tabs/FamilyAccount.jsx

@@ -1,56 +1,56 @@
-import { forwardRef } from 'react'
-import QRCode from 'react-qr-code';
+import { forwardRef } from "react";
+import QRCode from "react-qr-code";
 
 const FamilyAccount = forwardRef(({ familyData, myRef, handlePrint }, ref) => {
-    return (
-      <div
-        className="w-full lg:min-h-[500px] h-full flex flex-col items-center justify-center"
-        ref={myRef}
-      >
-        <div className="update-table w-full lg:min-h-[450px] h-full p-8 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow ">
-          <div className="flex items-center justify-around h-[380px]">
-            <div className="flex flex-col">
-              <h2 className="font-bold text-lg tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
-                Username:{" "}
-                <span className="ml-2 normal-case">
-                  {familyData?.username ? familyData?.username : "please wait..."}
-                </span>
-              </h2>
-              <h2 className="font-bold text-lg tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
-                Pin:{" "}
-                <span className="ml-2 normal-case">
-                  {familyData?.pin ? familyData?.pin : "please wait..."}
-                </span>
-              </h2>
-            </div>
-  
-            <span className="text-5xl text-gray-400 opacity-20 font-bold">
-              or
-            </span>
-  
-            <div className="max-w-[200px]">
-              <p className="text-xl tracking-wide mb-[15px] text-center font-bold text-dark-gray dark:text-white">
-                Scan the code from mobile app
-              </p>
-              <QRCode
-                size={256}
-                style={{ height: "auto", maxWidth: "100%", width: "100%" }}
-                value={`https://www.google.com`}
-                viewBox={`0 0 256 256`}
-              />
-            </div>
+  return (
+    <div
+      className="w-full lg:min-h-[500px] h-full flex flex-col items-center justify-center"
+      ref={myRef}
+    >
+      <div className="update-table w-full lg:min-h-[450px] h-full p-8 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow ">
+        <div className="flex items-center justify-around h-[380px]">
+          <div className="flex flex-col">
+            <h2 className="font-bold text-lg tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
+              Username:{" "}
+              <span className="ml-2 normal-case">
+                {familyData?.username ? familyData?.username : "please wait..."}
+              </span>
+            </h2>
+            <h2 className="font-bold text-lg tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
+              Pin:{" "}
+              <span className="ml-2 normal-case">
+                {familyData?.pin ? familyData?.pin : "please wait..."}
+              </span>
+            </h2>
           </div>
-          <div className="h-[50px] w-full flex justify-center items-center">
-            <button
-              className="btn-shine w-[116px] h-[46px] text-white rounded-full text-base bg-pink flex justify-center items-center"
-              onClick={handlePrint}
-            >
-              Print
-            </button>
+
+          <span className="text-5xl text-gray-400 opacity-20 font-bold">
+            or
+          </span>
+
+          <div className="max-w-[200px]">
+            <p className="text-xl tracking-wide mb-[15px] text-center font-bold text-dark-gray dark:text-white">
+              Scan the code from mobile app
+            </p>
+            <QRCode
+              size={256}
+              style={{ height: "auto", maxWidth: "100%", width: "100%" }}
+              value={`https://www.google.com`}
+              viewBox={`0 0 256 256`}
+            />
           </div>
         </div>
+        <div className="h-[50px] w-full flex justify-center items-center">
+          <button
+            className="btn-shine w-[116px] h-[46px] text-white rounded-full text-base bg-pink flex justify-center items-center"
+            onClick={handlePrint}
+          >
+            Print
+          </button>
+        </div>
       </div>
-    );
-  });
+    </div>
+  );
+});
 
-export default FamilyAccount
+export default FamilyAccount;

src/components/FamilyAcc/Tabs/FamilyPending.jsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { PaginatedList, handlePagingFunc } from "../../Pagination";
 import { PriceFormatter } from "../../Helpers/PriceFormatter";
 import dataImage2 from "../../../assets/images/data-table-user-2.png";
@@ -13,8 +13,12 @@ export default function FamilyPending({
 }) {
   let [jobPopout, setJobPopout] = useState({ show: false, data: {} }); // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW
 
-  let filteredFamilyData = familyData?.result_list?.filter(
-    (data) => data?.family_uid === accountDetails?.family_uid
+  let filteredFamilyData = useMemo(
+    () =>
+      familyData?.result_list?.filter(
+        (data) => data?.family_uid === accountDetails?.family_uid
+      ),
+    [accountDetails?.family_uid, familyData?.result_list]
   );
 
   const [currentPage, setCurrentPage] = useState(0);
@@ -51,7 +55,7 @@ export default function FamilyPending({
                         value?.currency_code,
                         value?.currency
                       );
-                      let image = value.banner ? value.banner : 'default.jpg'
+                      let image = value.banner ? value.banner : "default.jpg";
                       return (
                         <tr
                           key={index}
@@ -61,7 +65,9 @@ export default function FamilyPending({
                             <div className="flex space-x-2 items-center w-full">
                               <div className="w-[60px] h-[60px] p-2 bg-alice-blue rounded-full overflow-hidden flex justify-center items-center">
                                 <img
-                                  src={localImgLoad(`images/taskbanners/${image}`)}
+                                  src={localImgLoad(
+                                    `images/taskbanners/${image}`
+                                  )}
                                   alt="data"
                                   className="w-full h-full rounded-full"
                                 />

src/components/FamilyAcc/Tabs/FamilyWaitlist.jsx

@@ -1,31 +1,50 @@
-import { useState } from "react";
+import { useState, useMemo, memo } from "react";
 import { handlePagingFunc, PaginatedList } from "../../Pagination";
 import LoadingSpinner from "../../Spinners/LoadingSpinner";
 import SuggestTask from "../../FamilyPopup/SuggestTask";
 import AssignTaskPopout from "../FamilyPopout/AssignTaskPopout";
 
-const FamilyWaitlist = ({ familyData, className, accountDetails, loader }) => {
+const FamilyWaitlist = memo(({ familyData, className, accountDetails, loader }) => {
   const [popUp, setPopUp] = useState({ show: false, data: {} });
   const [continueTaskPopup, setContinueTaskPopup] = useState({
     show: false,
     data: {},
   });
-
-  let filteredFamilyData = familyData?.result_list?.filter(
-    (data) => data?.family_uid === accountDetails?.family_uid
+  const filteredFamilyData = useMemo(
+    () =>
+      familyData?.result_list?.filter(
+        (data) => data?.family_uid === accountDetails?.family_uid
+      ),
+    [familyData, accountDetails]
   );
 
   const [currentPage, setCurrentPage] = useState(0);
   const itemsPerPage = Number(process.env.REACT_APP_ITEM_PER_PAGE);
   const indexOfFirstItem = currentPage;
   const indexOfLastItem = currentPage + itemsPerPage;
-  const currentTask = filteredFamilyData?.slice(
-    indexOfFirstItem,
-    indexOfLastItem
+  const currentTask = useMemo(
+    () => filteredFamilyData?.slice(indexOfFirstItem, indexOfLastItem),
+    [filteredFamilyData, indexOfFirstItem, indexOfLastItem]
   );
 
   const handlePagination = (e) => handlePagingFunc(e, setCurrentPage);
 
+  const openPopUp = (value) => {
+    setPopUp({ show: true, data: { ...value } });
+  };
+
+  const closePopUp = () => {
+    setPopUp({ show: false, data: {} });
+  };
+
+  const openContinueTaskPopup = (value) => {
+    setContinueTaskPopup({ show: true, data: { ...value } });
+  };
+
+  const closeContinueTaskPopup = () => {
+    setContinueTaskPopup({ show: false, data: {} });
+  };
+
   return (
     <div
       className={`update-table w-full bg-white dark:bg-dark-white h-full lg:min-h-[450px] overflow-hidden rounded-2xl section-shadow ${
@@ -83,12 +102,7 @@ const FamilyWaitlist = ({ familyData, className, accountDetails, loader }) => {
                         </td>
                         <td className="text-right py-4 px-2">
                           <button
-                            onClick={() =>
-                              setPopUp({
-                                show: true,
-                                data: { ...value, selectedImage },
-                              })
-                            }
+                            onClick={() => openPopUp(value)}
                             className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
                           >
                             View
@@ -114,28 +128,21 @@ const FamilyWaitlist = ({ familyData, className, accountDetails, loader }) => {
       {popUp.show && (
         <SuggestTask
           details={popUp.data}
-          onClose={() => {
-            setPopUp({ show: false, data: {} });
-          }}
-          continuePopupData={(value) =>
-            setContinueTaskPopup({ show: true, data: { ...value } })
-          }
+          onClose={closePopUp}
+          continuePopupData={openContinueTaskPopup}
           situation={popUp.show}
         />
       )}
 
-      {/* Continue Task */}
       {continueTaskPopup.show && (
         <AssignTaskPopout
           details={continueTaskPopup.data}
-          action={() => {
-            setContinueTaskPopup({ show: false, data: {} });
-          }}
+          action={closeContinueTaskPopup}
           situation={continueTaskPopup.show}
         />
       )}
     </div>
   );
-};
+});
 
 export default FamilyWaitlist;