From 2155954ba36fff5704a908761ab922cd7b74ae25 Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Mon, 29 May 2023 12:36:34 +0100 Subject: [PATCH] active task list table reloads on accept or reject of offer job --- src/components/MyTasks/MyJobTable.jsx | 68 ++++++++++++--------- src/components/MyTasks/index.jsx | 4 +- src/components/jobPopout/OfferJobPopout.jsx | 6 ++ src/views/MyTaskPage.jsx | 15 +++-- 4 files changed, 57 insertions(+), 36 deletions(-) diff --git a/src/components/MyTasks/MyJobTable.jsx b/src/components/MyTasks/MyJobTable.jsx index 60f42ad..9c79fa6 100644 --- a/src/components/MyTasks/MyJobTable.jsx +++ b/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 [loader, setLoader] = useState(true); + // const [tasksData, setTasksData] = useState(null); + // const [loader, setLoader] = useState(false); - let apiCall = useMemo(() => new usersService(), []); + // let apiCall = useMemo(() => new usersService(), []); - const displayTasks = useCallback(async () => { - try { - const res = await apiCall.getMyActiveTaskList(); - let { - data: { result_list }, - internal_return, - statusText, - } = await res; - if (internal_return < 0 || statusText !== "OK") return; - setTasksData(result_list); - setLoader(false); - } catch (error) { - throw new Error(error); - } - }, [apiCall]); + // const displayTasks = useCallback(async () => { + // try { + // const res = await apiCall.getMyActiveTaskList(); + // let { + // data: { result_list }, + // internal_return, + // statusText, + // } = await res; + // if (internal_return < 0 || statusText !== "OK") return; + // setTasksData(result_list); + // setLoader(false); + // } catch (error) { + // throw new Error(error); + // } + // }, [apiCall]); - useEffect(() => { - displayTasks(); - }, []); + // useEffect(() => { + // 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 ? (
) : (
- {tasksData?.length > 0 ? ( + {ActiveJobList?.data?.length > 0 ? ( currentTask?.map((task, idx) => (
)) - ) : ( + ) + : + ( + ActiveJobList.status ?
No Tasks!
- )} + : +
+

+ Error Occurred! Unable to display Tasks! +

+
+ ) + }
{/* 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} /> diff --git a/src/components/MyTasks/index.jsx b/src/components/MyTasks/index.jsx index 9eea234..4d341ee 100644 --- a/src/components/MyTasks/index.jsx +++ b/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}) { - +
diff --git a/src/components/jobPopout/OfferJobPopout.jsx b/src/components/jobPopout/OfferJobPopout.jsx index 78f699f..10f3c5d 100644 --- a/src/components/jobPopout/OfferJobPopout.jsx +++ b/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 => { diff --git a/src/views/MyTaskPage.jsx b/src/views/MyTaskPage.jsx index 11d517b..d57608e 100644 --- a/src/views/MyTaskPage.jsx +++ b/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 (