From e59ba567e7c2d1a71af6919c4aed5fc2701b3efd Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Fri, 19 May 2023 14:44:14 +0100 Subject: [PATCH] made Job List Table to reload when user deletes or edits job --- src/components/MyJobs/MyJobTable.jsx | 20 +++++++++----- src/components/MyJobs/index.jsx | 2 +- src/components/jobPopout/DeleteJobPopout.jsx | 11 +++++--- src/components/jobPopout/EditJobPopout.jsx | 7 +++++ src/store/TableReloads.js | 29 ++++++++++++++++++++ src/store/store.js | 4 ++- src/views/MyJobsPage.jsx | 12 ++++++-- 7 files changed, 69 insertions(+), 16 deletions(-) create mode 100644 src/store/TableReloads.js diff --git a/src/components/MyJobs/MyJobTable.jsx b/src/components/MyJobs/MyJobTable.jsx index 2532860..0cd8c71 100644 --- a/src/components/MyJobs/MyJobTable.jsx +++ b/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" /> - {MyJobList && MyJobList?.result_list && ( + {MyJobList.loading ? + + : + (
@@ -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) => ( = - 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} /> )} diff --git a/src/components/MyJobs/index.jsx b/src/components/MyJobs/index.jsx index 339e678..c1ef1a0 100644 --- a/src/components/MyJobs/index.jsx +++ b/src/components/MyJobs/index.jsx @@ -40,7 +40,7 @@ export default function MyJobs(props) { > - + diff --git a/src/components/jobPopout/DeleteJobPopout.jsx b/src/components/jobPopout/DeleteJobPopout.jsx index 7dff2d8..a7dfd10 100644 --- a/src/components/jobPopout/DeleteJobPopout.jsx +++ b/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}) - onClose() - window.location.reload() - }, 1000) + dispatch(tableReload({type:'JOBTABLE'})) + navigate('/myjobs', {replace: true}) + onClose() + }, 1000) }).catch(error => { setRequestStatus({laoding: false, status:false, message: 'Opps! something went wrong, try again'}) }).finally(()=>{ diff --git a/src/components/jobPopout/EditJobPopout.jsx b/src/components/jobPopout/EditJobPopout.jsx index 0d5e3a9..bb61b4d 100644 --- a/src/components/jobPopout/EditJobPopout.jsx +++ b/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); diff --git a/src/store/TableReloads.js b/src/store/TableReloads.js new file mode 100644 index 0000000..486e258 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/src/store/store.js b/src/store/store.js index 07fbf4f..579e97d 100644 --- a/src/store/store.js +++ b/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 }, }); \ No newline at end of file diff --git a/src/views/MyJobsPage.jsx b/src/views/MyJobsPage.jsx index 6e85279..6faea5e 100644 --- a/src/views/MyJobsPage.jsx +++ b/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 (