.

src/components/MyWaitingJobs/MyWaitingJobTable.jsx

@@ -1,13 +1,17 @@
-import React, { useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import dataImage2 from "../../assets/images/data-table-user-2.png";
 import { handlePagingFunc } from "../Pagination/HandlePagination";
 import PaginatedList from "../Pagination/PaginatedList";
 import PendingJobsPopout from "../jobPopout/PendingJobsPopout";
 import { PriceFormatter } from "../Helpers/PriceFormatter";
+import MarketPopUp from "../MarketPlace/PopUp/MarketPopUp";
+import usersService from "../../services/UsersService";
+import { useNavigate } from "react-router-dom";
 
 export default function MyWaitingJobTable({ MyJobList, className }) {
   let [jobPopout, setJobPopout] = useState({ show: false, data: {} }); // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW
-
+  const [manageInt, setManageInt] = useState(null);
+  
   const [currentPage, setCurrentPage] = useState(0);
   const indexOfFirstItem = Number(currentPage);
   const indexOfLastItem =
@@ -21,6 +25,31 @@ export default function MyWaitingJobTable({ MyJobList, className }) {
     handlePagingFunc(e, setCurrentPage);
   };
 
+  let navigate = useNavigate();
+
+  const apiCall = useMemo(() => new usersService(), []);
+
+  const marketInterestData = useCallback(async () => {
+    let { offer_code } = MyJobList;
+    let reqData = { offer_code };
+
+    try {
+      const manageInt = await apiCall.MarketInterest(reqData);
+      const manageIntRes = await manageInt?.data;
+      setManageInt(manageIntRes);
+    } catch (error) {
+      throw new Error(error);
+    }
+  }, [apiCall, MyJobList]);
+
+  useEffect(() => {
+    if (!MyJobList) {
+      navigate("/pend-interest", { replace: true });
+    }
+    marketInterestData();
+  }, []);
+
+
   return (
     <div
       className={`update-table w-full p-8 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow min-h-[520px] ${
@@ -138,11 +167,12 @@ export default function MyWaitingJobTable({ MyJobList, className }) {
 
       {/* Active Job Popout */}
       {jobPopout.show && (
-        <PendingJobsPopout
+        <MarketPopUp
           details={jobPopout.data}
           onClose={() => {
             setJobPopout({ show: false, data: {} });
           }}
+          marketInt={manageInt}
           situation={jobPopout.show}
         />
       )}