edit job complete with corrected image sizes

src/components/MyJobs/MyJobTable.jsx

@@ -1,19 +1,18 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
-import dataImage1 from "../../assets/images/data-table-user-1.png";
 import dataImage2 from "../../assets/images/data-table-user-2.png";
-import dataImage3 from "../../assets/images/data-table-user-3.png";
-import dataImage4 from "../../assets/images/data-table-user-4.png";
 import SelectBox from "../Helpers/SelectBox";
-import JobListPopout from "../jobPopout/JobListPopout";
 import DeleteJobPopout from "../jobPopout/DeleteJobPopout";
+import JobListPopout from "../jobPopout/JobListPopout";
+
+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";
+import usersService from "../../services/UsersService";
+import { handlePagingFunc } from "../Pagination/HandlePagination";
+import PaginatedList from "../Pagination/PaginatedList";
+import EditJobPopOut from "../jobPopout/EditJobPopout";
 
-export default function MyJobTable({ MyJobList, className }) {
+export default function MyJobTable({ MyJobList, reloadJobList, className }) {
   const [myCountry, setCountries] = useState("");
   const {
     userDetails: { country },
@@ -60,7 +59,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
   );
@@ -88,7 +87,9 @@ 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>
@@ -100,8 +101,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}
@@ -109,15 +110,15 @@ export default function MyJobTable({ MyJobList, className }) {
                       >
                         <td className="py-9">
                           <div className="sm:flex sm:space-x-2 sm:justify-between sm:items-center job-items">
-                            <div className="flex space-x-2 items-center job-items">
-                              <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
+                            <div className="flex space-x-2 items-center job-items w-full">
+                              <div className="w-full h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1] max-w-[60px]">
                                 <img
                                   src={dataImage2}
                                   alt="data"
                                   className="w-full h-full"
                                 />
                               </div>
-                              <div className="flex flex-col">
+                              <div className="flex flex-col flex-[0.9]">
                                 <h1 className="font-bold text-xl text-dark-gray dark:text-white">
                                   {value.title}
                                 </h1>
@@ -196,11 +197,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}
           />
@@ -227,6 +228,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>