From cc66ebbbde0cbb4104c5a22755fbbd05fdcaf405 Mon Sep 17 00:00:00 2001
From: Ebube <ebube.ojinta@chiefsoft.com>
Date: Wed, 5 Jul 2023 13:51:10 +0100
Subject: [PATCH] Family waitlist complete

---
 .../FamilyAcc/Tabs/FamilyWaitlist.jsx         | 142 ++++++++----------
 1 file changed, 59 insertions(+), 83 deletions(-)

diff --git a/src/components/FamilyAcc/Tabs/FamilyWaitlist.jsx b/src/components/FamilyAcc/Tabs/FamilyWaitlist.jsx
index 6ba062d..e46f0af 100644
--- a/src/components/FamilyAcc/Tabs/FamilyWaitlist.jsx
+++ b/src/components/FamilyAcc/Tabs/FamilyWaitlist.jsx
@@ -4,22 +4,20 @@ import { handlePagingFunc, PaginatedList } from "../../Pagination";
 import LoadingSpinner from "../../Spinners/LoadingSpinner";
 
 const FamilyWaitlist = ({ familyData, className, loader }) => {
-  let navigate = useNavigate();
-  let { pathname } = useLocation();
+  const navigate = useNavigate();
+  const { pathname } = useLocation();
 
   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 itemsPerPage = Number(process.env.REACT_APP_ITEM_PER_PAGE);
+  const indexOfFirstItem = currentPage;
+  const indexOfLastItem = currentPage + itemsPerPage;
+  const currentTask = familyData?.result_list?.slice(
     indexOfFirstItem,
     indexOfLastItem
   );
 
   const handlePagination = (e) => handlePagingFunc(e, setCurrentPage);
 
-  console.log("I am in family waitlist", familyData);
-
   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 ${
@@ -32,94 +30,72 @@ const FamilyWaitlist = ({ familyData, className, loader }) => {
         </div>
       ) : (
         <>
-          {familyData && familyData?.result_list && (
+          {familyData && familyData.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 &&
-                        currentTask.map((value, index) => {
-                          // find due date
-                        //   const dueDate = value?.delivery_date.split(" ")[0];
-                          // the price
-                          // let thePrice = PriceFormatter(
-                          //   value?.price * 0.01,
-                          //   value?.currency_code,
-                          //   value?.currency
-                          // );
-                          return (
-                            <tr
-                              // key={index}
-                              className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50 flex items-center"
-                            >
-                              <td className=" py-4">
-                                <div className="flex space-x-2 items-center w-full">
-                                  <div className="w-full h-[40px] overflow-hidden flex justify-center items-center flex-[0.1] max-w-[60px] min-w-[60px]">
-                                    <img
-                                      // src={dataImage2}
-                                      alt="data"
-                                      className="w-full h-full"
-                                    />
-                                  </div>
-                                </div>
-                              </td>
-                              <td className="py-4">
-                              <div className="flex flex-col flex-[0.9]">
-                                    <h1 className="font-bold text-xl text-dark-gray dark:text-white">
-                                      {/* {value.title} */}
-                                      title
-                                    </h1>
-                                    <div className="flex gap-4 items-center">
-                                      desd
-                                    </div>
-                                  </div>
-                              </td>
-                              <td className="flex flex-col gap-1 py-4">
-                                <span>Date</span>
-                                <span>Status</span>
-                              </td>
-                              <td className="text-right py-4 px-2">
-                                <button
-                                  type="button"
-                                  onClick={() => {
-                                    navigate("/manage-active-job", {
-                                      state: {
-                                        //   ...value,
-                                        pathname,
-                                        //   accountDetails
-                                      },
-                                    });
-                                  }}
-                                  className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                                >
-                                  View
-                                </button>
-                              </td>
-                            </tr>
-                          );
-                        })}
-                    </>
-                  }
+                  {currentTask.map((value) => {
+                    const addedDate = value?.added.split(" ")[0];
+                    const taskImg = require(`../../../assets/images/family/${
+                      value?.banner || "default.jpg"
+                    }`);
+                    return (
+                      <tr
+                        className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50"
+                        key={value.uid}
+                      >
+                        <td className="py-4">
+                          <div className="w-full flex justify-between items-center">
+                            <div className="account-name flex space-x-4 items-center">
+                              <div className="icon w-14 h-14 flex justify-center items-center">
+                                <img
+                                  src={taskImg}
+                                  alt="task_img"
+                                  className="w-full object-cover"
+                                />
+                              </div>
+                              <div className="">
+                                <p className="text-xl font-bold text-dark-gray dark:text-white mb-2 capitalize line-clamp-1">
+                                  {value.title}
+                                </p>
+                                <p className="text-sm text-thin-light-gray font-medium">
+                                  {value.description}
+                                </p>
+                              </div>
+                            </div>
+                            <div className="px-2">
+                              <p className="text-sm font-bold text-dark-gray dark:text-white">
+                                {addedDate}
+                              </p>
+                              <p className="text-sm text-dark-gray dark:text-white">
+                                Status: {value.status}
+                              </p>
+                            </div>
+                          </div>
+                        </td>
+                        <td className="text-right py-4 px-2">
+                          <button
+                            type="button"
+                            className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                          >
+                            View
+                          </button>
+                        </td>
+                      </tr>
+                    );
+                  })}
                 </tbody>
               </table>
-              {/* PAGINATION BUTTON */}
               <PaginatedList
                 onClick={handlePagination}
-                prev={currentPage == 0 ? true : false}
+                prev={currentPage === 0}
                 next={
-                  currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
-                  familyData?.result_list.length
-                    ? true
-                    : false
+                  currentPage + itemsPerPage >= familyData?.result_list.length
                 }
                 data={familyData?.result_list}
                 start={indexOfFirstItem}
                 stop={indexOfLastItem}
               />
-              {/* END OF PAGINATION BUTTON */}
             </div>
           )}
         </>