diff --git a/src/components/FamilyAcc/FamilyTable.jsx b/src/components/FamilyAcc/FamilyTable.jsx index 3a2a0fe..facd5f9 100644 --- a/src/components/FamilyAcc/FamilyTable.jsx +++ b/src/components/FamilyAcc/FamilyTable.jsx @@ -42,15 +42,15 @@ export default function FamilyTable({ className, familyList, loader }) { key={idx} > -
-
+
+
data
-
+

{`${firstname} ${lastname} (${age})`}

diff --git a/src/components/MyActiveJobs/MyActiveJobTable.jsx b/src/components/MyActiveJobs/MyActiveJobTable.jsx index 6ea5315..0e161c9 100644 --- a/src/components/MyActiveJobs/MyActiveJobTable.jsx +++ b/src/components/MyActiveJobs/MyActiveJobTable.jsx @@ -7,7 +7,7 @@ import { handlePagingFunc } from "../Pagination/HandlePagination"; import PaginatedList from "../Pagination/PaginatedList"; export default function MyActiveJobTable({ MyJobList, className }) { - const navigate = useNavigate() + const navigate = useNavigate(); const filterCategories = ["All Categories", "Explore", "Featured"]; const [selectedCategory, setCategory] = useState(filterCategories[0]); @@ -51,15 +51,15 @@ export default function MyActiveJobTable({ MyJobList, className }) { className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50" > -
-
+
+
data
-
+

{value.title}

@@ -100,7 +100,9 @@ export default function MyActiveJobTable({ MyJobList, className }) {
- {MyJobList.loading ? - - : - ( + {MyJobList.loading ? ( + + ) : (
@@ -115,15 +110,15 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) { > + + ))} + + } + +
-
-
+
+
data
-
+

{value.title}

diff --git a/src/components/MyPendingJobs/MyPendingJobTable.jsx b/src/components/MyPendingJobs/MyPendingJobTable.jsx index b63e091..d40c81e 100644 --- a/src/components/MyPendingJobs/MyPendingJobTable.jsx +++ b/src/components/MyPendingJobs/MyPendingJobTable.jsx @@ -1,112 +1,144 @@ import React, { 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 PendingJobsPopout from "../jobPopout/PendingJobsPopout"; -import PaginatedList from "../Pagination/PaginatedList"; import { handlePagingFunc } from "../Pagination/HandlePagination"; +import PaginatedList from "../Pagination/PaginatedList"; -export default function MyPendingJobTable({MyJobList, className }) { - const filterCategories = ["All Categories", "Explore", "Featured"]; - const [selectedCategory, setCategory] = useState(filterCategories[0]); +export default function MyPendingJobTable({ MyJobList, className }) { + const filterCategories = ["All Categories", "Explore", "Featured"]; + const [selectedCategory, setCategory] = useState(filterCategories[0]); + let [jobPopout, setJobPopout] = useState({ show: false, data: {} }); // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW - 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 [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) - } + const handlePagination = (e) => { + handlePagingFunc(e, setCurrentPage); + }; - return ( -
- {MyJobList && MyJobList?.result_list && -
- - - {/**/} - {/* */} - {/* */} - {/**/} + return ( +
+ {MyJobList && MyJobList?.result_list && ( +
+
All Product.
+ + {/**/} + {/* */} + {/* */} + {/**/} - { - <> - {MyJobList && MyJobList?.result_list && - MyJobList.result_list.length > 0 && - currentActiveJobList.map((value, index) => ( - - + - - - - - - - - ))} - - - - } - -
All Product.
-
-
- data -
-
-

- {value.title} -

-
- {value.description} -
- - Price: {value.price*0.01} - - - Duration: {value.timeline_days} day(s) - - - Expire: {value.expire} - - - Send to: {value.job_to} - + { + <> + {MyJobList && + MyJobList?.result_list && + MyJobList.result_list.length > 0 && + currentActiveJobList.map((value, index) => ( +
+
+
+ data +
+
+

+ {value.title} +

+
{value.description}
+ + Price:{" "} + + {value.price * 0.01} + + + + Duration:{" "} + + {" "} + {value.timeline_days} day(s) + + + + Expire:{" "} + + {" "} + {value.expire} + + + + Send to:{" "} + + {" "} + {value.job_to} + + +
+
+ 		- -
- {/* PAGINATION BUTTON */} - = MyJobList?.result_list.length ? true : false} data={MyJobList?.result_list} start={indexOfFirstItem} stop={indexOfLastItem} /> - {/* END OF PAGINATION BUTTON */} -
+
+ +
+ {/* PAGINATION BUTTON */} + = + MyJobList?.result_list.length + ? true + : false } - - {/* Active Job Popout */} - {jobPopout.show && - {setJobPopout({show:false, data:{}})}} situation={jobPopout.show} /> - } - {/* End of Active Job Popout */} + 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/MyTasks/MyJobTable.jsx b/src/components/MyTasks/MyJobTable.jsx index 679dd13..a069186 100644 --- a/src/components/MyTasks/MyJobTable.jsx +++ b/src/components/MyTasks/MyJobTable.jsx @@ -1,48 +1,42 @@ 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 PaginatedList from "../Pagination/PaginatedList"; import { handlePagingFunc } from "../Pagination/HandlePagination"; import usersService from "../../services/UsersService"; +import LoadingSpinner from "../Spinners/LoadingSpinner"; export default function MyJobTable({ className }) { - const filterCategories = ["All Categories", "Explore", "Featured"]; - const [selectedCategory, setCategory] = useState(filterCategories[0]); const [tasksData, setTasksData] = useState(null); + const [loader, setLoader] = useState(true); let apiCall = useMemo(() => new usersService(), []); const displayTasks = useCallback(async () => { try { const res = await apiCall.getMyActiveTaskList(); - console.log('Ebube step', res) let { - data: { result_list }, - internal_return, - statusText, - } = await res; + 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() - }, []) - - let data = ["1", "2", "3", "4", "5", "6"]; // to be replaced later by result from API CALL + displayTasks(); + }, []); const [currentPage, setCurrentPage] = useState(0); const indexOfFirstItem = Number(currentPage); const indexOfLastItem = Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE); - const currentTask = data.slice(indexOfFirstItem, indexOfLastItem); + const currentTask = tasksData?.slice(indexOfFirstItem, indexOfLastItem); const handlePagination = (e) => { handlePagingFunc(e, setCurrentPage); @@ -54,438 +48,29 @@ export default function MyJobTable({ className }) { className || "" }`} > - {tasksData && ( + {loader ? ( +
+ +
+ ) : (
- {/* - - - - - - - - - - - - {selectedCategory === "All Categories" - ? currentTask.map((item, index) => ( - - - - - - - - - - )) - : selectedCategory === "Explore" - ? currentTask.map((item, index) => ( - - - - - - - - - - )) - : currentTask.map((item, index) => ( - - - - - - - - - - ))} - -
All ProductValueUSD24H%BitsTimeStatus
-
-
- data -
-
-

- Mullican Computer Joy -

- - Owned by{" "} - Xoeyam - -
-
- 		-
- - - - - - - - - - - - - 7473 ETH - -
- 		-
- - - - - - - - - - 6392.99$ - -
- 		- - -24.75 (11.5%) - - - - 343 - - - - 2 Hours 1 min 30s - - - -
-
-
- data -
-
-

- Mullican Computer Joy -

- - Owned by{" "} - Xoeyam - -
-
- 		-
- - - - - - - - - - - - - 7473 ETH - -
- 		-
- - - - - - - - - - 6392.99$ - -
- 		- - -24.75 (11.5%) - - - - 343 - - - - 2 Hours 1 min 30s - - - -
-
-
- data -
-
-

- Mullican Computer Joy -

- - Owned by{" "} - Xoeyam - -
-
- 		-
- - - - - - - - - - - - - 7473 ETH - -
- 		-
- - - - - - - - - - 6392.99$ - -
- 		- - -24.75 (11.5%) - - - - 343 - - - - 2 Hours 1 min 30s - - - -
*/} - -
+
{tasksData?.length > 0 ? ( - tasksData?.map((task, idx) => ( + currentTask?.map((task, idx) => (
-
+
data
-
+

{task?.title}

@@ -494,19 +79,29 @@ export default function MyJobTable({ className }) { Price: - {task?.price} + + {task?.price} + Duration: - {Number(task?.timeline_days) === 1 ? `${task?.timeline_days} day` : `${task?.timeline_days} day(s)`} + + {Number(task?.timeline_days) === 1 + ? `${task?.timeline_days} day` + : `${task?.timeline_days} day(s)`} + Due Date: - {task?.delivery_date} + + {task?.delivery_date} + Confirmation: - {task?.contract} + + {task?.contract} +
@@ -537,11 +132,11 @@ export default function MyJobTable({ className }) { prev={currentPage == 0 ? true : false} next={ currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >= - data.length + tasksData?.length ? true : false } - data={data} + data={tasksData} start={indexOfFirstItem} stop={indexOfLastItem} /> diff --git a/src/components/jobPopout/EditJobPopout.jsx b/src/components/jobPopout/EditJobPopout.jsx index bb61b4d..72e9e7b 100644 --- a/src/components/jobPopout/EditJobPopout.jsx +++ b/src/components/jobPopout/EditJobPopout.jsx @@ -68,6 +68,7 @@ const EditJobPopOut = ({ details, onClose, situation, country }) => { job_uid: details.job_uid, ...values, }; + delete reqData?.country try { let res = await jobApi.jobManagerUpdateJob(reqData); let { data } = await res; @@ -268,7 +269,7 @@ const EditJobPopOut = ({ details, onClose, situation, country }) => { {/* inputs ends here */}
- {/* ERROR DISPLAY AND SUBMIT BUTTON */} + {/* ERROR DISPLAY AND SUBMIT BUTTON */}
{/* error or success display */} {requestStatus.message != "" && diff --git a/src/components/jobPopout/PendingJobsPopout.jsx b/src/components/jobPopout/PendingJobsPopout.jsx index ad9eb2a..2e09051 100644 --- a/src/components/jobPopout/PendingJobsPopout.jsx +++ b/src/components/jobPopout/PendingJobsPopout.jsx @@ -7,10 +7,10 @@ function PendingJobsPopout({details, onClose, situation}) { return (
-
- {/*

- Confirm -

*/} +
+

+ Manage Pending Item +