made Job List Table to reload when user deletes or edits job

src/components/MyJobs/MyJobTable.jsx

@@ -7,13 +7,15 @@ import SelectBox from "../Helpers/SelectBox";
 import JobListPopout from "../jobPopout/JobListPopout";
 import DeleteJobPopout from "../jobPopout/DeleteJobPopout";
 
+import LoadingSpinner from "../Spinners/LoadingSpinner";
+
 import PaginatedList from "../Pagination/PaginatedList";
 import { handlePagingFunc } from "../Pagination/HandlePagination";
 import EditJobPopOut from "../jobPopout/EditJobPopout";
 import usersService from "../../services/UsersService";
 import { useSelector } from "react-redux";
 
-export default function MyJobTable({ MyJobList, className }) {
+export default function MyJobTable({ MyJobList, reloadJobList, className }) {
   const [myCountry, setCountries] = useState("");
   const {
     userDetails: { country },
@@ -61,7 +63,7 @@ export default function MyJobTable({ MyJobList, className }) {
   const indexOfFirstItem = Number(currentPage);
   const indexOfLastItem =
     Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
-  const currentJobList = MyJobList?.result_list?.slice(
+  const currentJobList = MyJobList?.data?.result_list?.slice(
     indexOfFirstItem,
     indexOfLastItem
   );
@@ -89,7 +91,10 @@ export default function MyJobTable({ MyJobList, className }) {
           contentBodyClasses="w-auto min-w-max"
         />
       </div>
-      {MyJobList && MyJobList?.result_list && (
+      {MyJobList.loading ? 
+      <LoadingSpinner size='16' color='sky-blue' />
+      :
+      (
         <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between h-full">
           <table className="table-auto min-w-full text-sm text-left text-gray-500 dark:text-gray-400">
             <tbody>
@@ -101,8 +106,8 @@ export default function MyJobTable({ MyJobList, className }) {
               {selectedCategory === "All Categories" ? (
                 <>
                   {MyJobList &&
-                    MyJobList?.result_list &&
-                    MyJobList.result_list.length > 0 &&
+                    MyJobList?.data?.result_list &&
+                    MyJobList.data?.result_list.length > 0 &&
                     currentJobList.map((value, index) => (
                       <tr
                         key={index}
@@ -197,11 +202,11 @@ export default function MyJobTable({ MyJobList, className }) {
             prev={currentPage == 0 ? true : false}
             next={
               currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
-              MyJobList?.result_list?.length
+              MyJobList?.data?.result_list?.length
                 ? true
                 : false
             }
-            data={MyJobList?.result_list}
+            data={MyJobList?.data?.result_list}
             start={indexOfFirstItem}
             stop={indexOfLastItem}
           />
@@ -228,6 +233,7 @@ export default function MyJobTable({ MyJobList, className }) {
           onClose={() => {
             setDeleteJobPopout({ show: false, data: {} });
           }}
+          reloadJobList={reloadJobList}
           situation={deleteJobPopout.show}
         />
       )}

src/components/MyJobs/index.jsx

@@ -40,7 +40,7 @@ export default function MyJobs(props) {
               ></div>
             </div>
           </div>
-          <MyJobTable MyJobList={props.MyJobList} />
+          <MyJobTable MyJobList={props.MyJobList} reloadJobList={props.reloadJobList} />
         </div>
       </div>
     </Layout>