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?.data?.result_list &&
-                    MyJobList.result_list.length > 0 &&
+                    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>

src/components/jobPopout/DeleteJobPopout.jsx

@@ -3,8 +3,11 @@ import ModalCom from '../Helpers/ModalCom'
 import { useNavigate } from 'react-router-dom'
 import usersService from '../../services/UsersService'
 import LoadingSpinner from '../Spinners/LoadingSpinner'
+import { useDispatch } from 'react-redux'
+import { tableReload } from '../../store/TableReloads'
 
 function DeleteJobPopout({details, onClose, situation}) {
+  let dispatch = useDispatch()
     const navigate = useNavigate()
     const ApiCall = new usersService()
 
@@ -26,10 +29,10 @@ function DeleteJobPopout({details, onClose, situation}) {
             }
             setRequestStatus({laoding: false, status:true, message: 'Job deleted successfully'})
             setTimeout(()=>{
-                navigate('/myjobs', {replace: true})
+              dispatch(tableReload({type:'JOBTABLE'}))
-                onClose()
+              navigate('/myjobs', {replace: true})
-                window.location.reload()
+              onClose()
-            }, 1000)
+          }, 1000)
         }).catch(error => {
             setRequestStatus({laoding: false, status:false, message: 'Opps! something went wrong, try again'})
         }).finally(()=>{

src/components/jobPopout/EditJobPopout.jsx

@@ -7,7 +7,13 @@ import LoadingSpinner from "../Spinners/LoadingSpinner";
 import usersService from "../../services/UsersService";
 import { useNavigate } from "react-router-dom";
 
+import { tableReload } from "../../store/TableReloads";
+import { useDispatch } from "react-redux";
+
 const EditJobPopOut = ({ details, onClose, situation, country }) => {
+
+  const dispatch = useDispatch()
+
   let [requestStatus, setRequestStatus] = useState({
     loading: false,
     status: false,
@@ -68,6 +74,7 @@ const EditJobPopOut = ({ details, onClose, situation, country }) => {
         if (data?.internal_return < 0) return;
         setRequestStatus({ loading: false, message: null });
         setTimeout(() => {
+          dispatch(tableReload({type:'JOBTABLE'}))
           navigate("/myjobs", { replace: true });
           onClose();
         }, 1000);

src/store/TableReloads.js

@@ -0,0 +1,29 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const initialState = {
+  jobListTable: false,
+  pendingListTable: false
+};
+
+export const tableReloadSlice = createSlice({
+  name: "tableReload",
+  initialState,
+  reducers: {
+    tableReload: (state, action) => {
+      switch(action.payload.type){
+        case 'JOBTABLE':
+          state.jobListTable = !state.jobListTable;
+          return
+        case 'PENDINGTABLE' :
+          state.pendingListTable = !state.pendingListTable;
+          return
+        default:
+          return state
+      }
+    },
+  },
+});
+
+export const { tableReload } = tableReloadSlice.actions;
+
+export default tableReloadSlice.reducer;

src/store/store.js

@@ -3,11 +3,13 @@ import drawerReducer from "./drawer";
 
 import userDetailReducer from "./UserDetails";
 import jobReducer from "./jobLists";
+import tableReloadReducer from "./TableReloads";
 
 export default configureStore({
   reducer: {
     drawer: drawerReducer,
     userDetails: userDetailReducer,
-    jobLists: jobReducer
+    jobLists: jobReducer,
+    tableReload: tableReloadReducer
   },
 });

src/views/MyJobsPage.jsx

@@ -4,25 +4,31 @@ import React, { useContext,useState, useEffect } from "react";
 // import UsersService from "../services/UsersService";
 import usersService from "../services/UsersService";
 import MyJobs from "../components/MyJobs";
+import { useSelector } from "react-redux";
 
 export default function MyJobsPage() {
 
+    const {jobListTable} = useSelector((state) => state.tableReload)
+
     // const userApi = new usersService();
     // const activeJobList  = userApi.getMyJobList();
-    const [MyJobList, setMyJobList] = useState([]);
+    const [MyJobList, setMyJobList] = useState({loading: true, data:[]});
     const api = new usersService();
 
     const getMyJobList = async () => {
+        setMyJobList({loading: true, data:[]})
         try {
             const res = await api.getMyJobList();
-            setMyJobList(res.data);
+            setMyJobList({loading: false, data:res.data})
+            // setMyJobList(res.data);
         } catch (error) {
+            setMyJobList({loading: false, data:[]})
             console.log("Error getting mode");
         }
     };
     useEffect(() => {
         getMyJobList();
-    }, []);
+    }, [jobListTable]);
 
    // debugger;
     return (