diff --git a/src/Routers.jsx b/src/Routers.jsx index af3f32f..a25c6e1 100644 --- a/src/Routers.jsx +++ b/src/Routers.jsx @@ -45,6 +45,7 @@ import BlogPage from "./views/BlogPage"; import MyReviewDueJobsPage from "./views/MyReviewDueJobsPage"; import OffersInterestPage from "./views/OffersInterestPage"; import ManageInterestOfferPage from './views/ManageInterestOfferPage' +import MyWaitingJobsPage from "./views/MyWaitingJobsPage"; export default function Routers() { return ( @@ -93,6 +94,7 @@ export default function Routers() { } /> } /> } /> + } /> } /> } /> } /> diff --git a/src/assets/images/banner-coupons.jpg b/src/assets/images/banner-coupons.jpg index 8ead515..652d496 100644 Binary files a/src/assets/images/banner-coupons.jpg and b/src/assets/images/banner-coupons.jpg differ diff --git a/src/assets/images/banner-job-due.jpg b/src/assets/images/banner-job-due.jpg index 1bedc79..77af81f 100644 Binary files a/src/assets/images/banner-job-due.jpg and b/src/assets/images/banner-job-due.jpg differ diff --git a/src/components/MyWaitingJobs/MyWaitingJobTable.jsx b/src/components/MyWaitingJobs/MyWaitingJobTable.jsx new file mode 100644 index 0000000..04744fd --- /dev/null +++ b/src/components/MyWaitingJobs/MyWaitingJobTable.jsx @@ -0,0 +1,157 @@ +import React, { useState } from "react"; +import dataImage2 from "../../assets/images/data-table-user-2.png"; +import { handlePagingFunc } from "../Pagination/HandlePagination"; +import PaginatedList from "../Pagination/PaginatedList"; +import PendingJobsPopout from "../jobPopout/PendingJobsPopout"; +import { PriceFormatter } from "../Helpers/PriceFormatter"; + +export default function MyWaitingJobTable({ MyJobList, className }) { + let [jobPopout, setJobPopout] = useState({ show: false, data: {} }); // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW + + const [currentPage, setCurrentPage] = useState(0); + const indexOfFirstItem = Number(currentPage); + const indexOfLastItem = + Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE); + const currentActiveJobList = MyJobList?.result_list?.slice( + indexOfFirstItem, + indexOfLastItem + ); + + const handlePagination = (e) => { + handlePagingFunc(e, setCurrentPage); + }; + + return ( +
+ {MyJobList && MyJobList?.result_list && ( +
+ + + {/**/} + {/* */} + {/* */} + {/**/} + + { + <> + {MyJobList && + MyJobList?.result_list && + MyJobList.result_list.length > 0 ? ( + currentActiveJobList.map((value, index) => { + let deliveryDate = value?.expire?.split(" ")[0]; + let thePrice = PriceFormatter( + value?.price * 0.01, + value?.currency_code, + value?.currency + ); + return ( + + + + + + ); + }) + ) : ( + + + + )} + + } + +
All Product.
+
+
+ data +
+
+

+ {value.title} +

+
{value.description}
+ + Price:{" "} + + {thePrice} + + +
+ + Duration:{" "} + + {" "} + {value.timeline_days} day(s) + + + + Expire:{" "} + + {" "} + {deliveryDate} + + + + Sent to:{" "} + + {" "} + {value.job_to} + + +
+
+
+ 		+ +
No Pending Task!
+ {/* PAGINATION BUTTON */} + = + MyJobList?.result_list.length + ? true + : false + } + data={MyJobList?.result_list} + start={indexOfFirstItem} + stop={indexOfLastItem} + /> + {/* END OF PAGINATION BUTTON */} +
+ )} + + {/* Active Job Popout */} + {jobPopout.show && ( + { + setJobPopout({ show: false, data: {} }); + }} + situation={jobPopout.show} + /> + )} + {/* End of Active Job Popout */} +
+ ); +} diff --git a/src/components/MyWaitingJobs/index.jsx b/src/components/MyWaitingJobs/index.jsx new file mode 100644 index 0000000..2880095 --- /dev/null +++ b/src/components/MyWaitingJobs/index.jsx @@ -0,0 +1,43 @@ +import React, { useState } from "react"; +import { Link } from "react-router-dom"; +import Layout from "../Partials/Layout"; +import CommonHead from "../UserHeader/CommonHead"; +import MyWaitingJobTable from "./MyWaitingJobTable"; + +export default function MyWaitingJobs(props) { + const [selectTab, setValue] = useState("today"); + const filterHandler = (value) => { + setValue(value); + }; + console.log("AMEYE LOC1", props.MyJobList); + return ( + + +
+
+ {/* heading */} +
+
+

+ + Waiting Job(s) + +

+
+
+
filterHandler("today")} + className="relative" + >
+
+
+ +
+
+ + ); +} diff --git a/src/views/MyWaitingJobsPage.jsx b/src/views/MyWaitingJobsPage.jsx new file mode 100644 index 0000000..6bfd5c6 --- /dev/null +++ b/src/views/MyWaitingJobsPage.jsx @@ -0,0 +1,33 @@ +import React, { useContext, useState, useEffect } from "react"; +import usersService from "../services/UsersService"; +import MyPendingJobs from "../components/MyPendingJobs"; +import { useSelector } from "react-redux"; +import MyWaitingJobs from "../components/MyWaitingJobs"; + +export default function MyWaitingJobsPage() { + let { commonHeadBanner } = useSelector((state) => state.commonHeadBanner); + const [MyJobList, setMyJobList] = useState([]); + const api = new usersService(); + + const getMyJobList = async () => { + try { + const res = await api.getMyPendingJobList(); + setMyJobList(res.data); + } catch (error) { + console.log("Error getting mode"); + } + }; + useEffect(() => { + getMyJobList(); + }, []); + + // debugger; + return ( + <> + + + ); +} \ No newline at end of file