src/components/MyTasks/MyJobTable.jsx

@@ -8,40 +8,40 @@ import LoadingSpinner from "../Spinners/LoadingSpinner";
 
 import {useNavigate, useLocation} from 'react-router-dom'
 
-export default function MyJobTable({ className }) {
+export default function MyJobTable({ className, ActiveJobList }) {
   let navigate = useNavigate()
   let {pathname} = useLocation()
 
-  const [tasksData, setTasksData] = useState(null);
+  // const [tasksData, setTasksData] = useState(null);
-  const [loader, setLoader] = useState(true);
+  // const [loader, setLoader] = useState(false);
 
-  let apiCall = useMemo(() => new usersService(), []);
+  // let apiCall = useMemo(() => new usersService(), []);
 
-  const displayTasks = useCallback(async () => {
+  // const displayTasks = useCallback(async () => {
-    try {
+  //   try {
-      const res = await apiCall.getMyActiveTaskList();
+  //     const res = await apiCall.getMyActiveTaskList();
-      let {
+  //     let {
-        data: { result_list },
+  //       data: { result_list },
-        internal_return,
+  //       internal_return,
-        statusText,
+  //       statusText,
-      } = await res;
+  //     } = await res;
-      if (internal_return < 0 || statusText !== "OK") return;
+  //     if (internal_return < 0 || statusText !== "OK") return;
-      setTasksData(result_list);
+  //     setTasksData(result_list);
-      setLoader(false);
+  //     setLoader(false);
-    } catch (error) {
+  //   } catch (error) {
-      throw new Error(error);
+  //     throw new Error(error);
-    }
+  //   }
-  }, [apiCall]);
+  // }, [apiCall]);
 
-  useEffect(() => {
+  // useEffect(() => {
-    displayTasks();
+  //   displayTasks();
-  }, []);
+  // }, []);
 
   const [currentPage, setCurrentPage] = useState(0);
   const indexOfFirstItem = Number(currentPage);
   const indexOfLastItem =
     Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
-  const currentTask = tasksData?.slice(indexOfFirstItem, indexOfLastItem);
+  const currentTask = ActiveJobList?.data?.slice(indexOfFirstItem, indexOfLastItem);
 
   const handlePagination = (e) => {
     handlePagingFunc(e, setCurrentPage);
@@ -53,14 +53,14 @@ export default function MyJobTable({ className }) {
         className || ""
       }`}
     >
-      {loader ? (
+      {ActiveJobList.loading ? (
         <div className="w-full h-[500px] flex items-center justify-center">
           <LoadingSpinner size="16" color="sky-blue" />
         </div>
       ) : (
         <div className="relative w-full overflow-x-auto sm:rounded-lg">
           <div className="overflow-y-auto h-auto w-full">
-            {tasksData?.length > 0 ? (
+            {ActiveJobList?.data?.length > 0 ? (
               currentTask?.map((task, idx) => (
                 <div
                   className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] w-full flex justify-between items-center hover:bg-gray-50"
@@ -127,13 +127,23 @@ export default function MyJobTable({ className }) {
                   </div>
                 </div>
               ))
-            ) : (
+            ) 
+            : 
+            (
+            ActiveJobList.status ?
               <div className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
                 <div className="p-2">
                   No Tasks!
                 </div>
               </div>
-            )}
+            :
+            <div className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
+              <p className="p-2">
+                Error Occurred! Unable to display Tasks!
+              </p>
+            </div>
+            )
+            }
           </div>
 
           {/* PAGINATION BUTTON */}
@@ -142,11 +152,11 @@ export default function MyJobTable({ className }) {
             prev={currentPage == 0 ? true : false}
             next={
               currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
-              tasksData?.length
+              ActiveJobList?.data?.length
                 ? true
                 : false
             }
-            data={tasksData}
+            data={ActiveJobList?.data}
             start={indexOfFirstItem}
             stop={indexOfLastItem}
           />

src/components/MyTasks/index.jsx

@@ -6,7 +6,7 @@ import CommonHead from "../UserHeader/CommonHead";
 import TopSellerTopBuyerSliderSection from "../Home/TopSellerTopBuyerSliderSection";
 import MyOffersTable from "./MyOffersTable";
 
-export default function MyTasks({MyActiveOffersList, commonHeadData}) {
+export default function MyTasks({MyActiveOffersList, ActiveJobList, commonHeadData}) {
   const [selectTab, setValue] = useState("today");
   const filterHandler = (value) => {
     setValue(value);
@@ -37,7 +37,7 @@ export default function MyTasks({MyActiveOffersList, commonHeadData}) {
           <MyOffersTable
               MyActiveOffersList={MyActiveOffersList}
               className="mb-10" />
-          <MyJobTable />
+          <MyJobTable ActiveJobList={ActiveJobList} />
         </div>
       </div>
     </Layout>

src/components/jobPopout/OfferJobPopout.jsx

@@ -6,9 +6,13 @@ import { useNavigate } from 'react-router-dom'
 import usersService from '../../services/UsersService'
 import LoadingSpinner from '../Spinners/LoadingSpinner'
 
+import { tableReload } from '../../store/TableReloads'
+import { useDispatch } from 'react-redux'
+
 function OfferJobPopout({details, onClose, situation}) {
   const apiUrl = new usersService()
   const navigate = useNavigate()
+  const dispatch = useDispatch()
 
   const [requestStatus, setRequestStatus] = useState({loading: false, status: false, message: '', trigger: ''})
 
@@ -43,6 +47,8 @@ function OfferJobPopout({details, onClose, situation}) {
       setRequestStatus({loading: false, status: true, message: `Offer ${name}ed Successfully`, trigger: ''})
       setTimeout(()=>{
         onClose()
+        dispatch(tableReload({type:'JOBTABLE'}))
+        navigate('/mytask', {replace:true})
         setRequestStatus({loading: false, status: false, message: '', trigger: ''})
       },2000)
     }).catch(error => {

src/views/MyTaskPage.jsx

@@ -1,11 +1,14 @@
 import React, { useContext,useState, useEffect } from "react";
 import MyTasks from "../components/MyTasks";
-import UsersService from "../services/UsersService";
+// import UsersService from "../services/UsersService";
 import usersService from "../services/UsersService";
 
-export default function MyTaskPage() {
+import { useSelector } from "react-redux";
 
-    const [MyActiveJobList, setMyActiveJobList] = useState([]);
+export default function MyTaskPage() {
+    const {jobListTable} = useSelector((state) => state.tableReload)
+
+    const [MyActiveJobList, setMyActiveJobList] = useState({loading: true, status:false, data:[]});
     const [MyActiveOffersList, setMyActiveOffersList] = useState([]);
     const api = new usersService();
     const commonHeadData =()=>{
@@ -13,10 +16,12 @@ export default function MyTaskPage() {
     return 0;
     }
     const getMyActiveJobList = async () => {
+        setMyActiveJobList({loading: true, status:false, data:[]});
         try {
             const res = await api.getMyActiveTaskList();
-            setMyActiveJobList(res.data);
+            setMyActiveJobList({loading: false, status:true, data:res.data.result_list});
         } catch (error) {
+            setMyActiveJobList({loading: false, status:false, data:[]});
             console.log("Error getting tasks");
         }
     };
@@ -31,7 +36,7 @@ export default function MyTaskPage() {
     useEffect(() => {
         getMyActiveJobList();
         getMyActiveOffersList();
-    }, []);
+    }, [jobListTable]);
 
     //debugger;
     return (