From 0c21f953ee7a5ccd685cf6e8c9318636e8a1fc7c Mon Sep 17 00:00:00 2001 From: Ebube Date: Wed, 17 May 2023 00:20:41 +0100 Subject: [PATCH] Called the api and structured the component --- src/components/MyActiveJobs/index.jsx | 56 +- src/components/MyJobs/index.jsx | 72 +- src/components/MyTasks/MyJobTable.jsx | 1985 ++++++--------------- src/components/MyTasks/index.jsx | 54 +- src/components/Partials/MobileSideBar.jsx | 74 +- 5 files changed, 661 insertions(+), 1580 deletions(-) diff --git a/src/components/MyActiveJobs/index.jsx b/src/components/MyActiveJobs/index.jsx index 7de7b38..2380e6c 100644 --- a/src/components/MyActiveJobs/index.jsx +++ b/src/components/MyActiveJobs/index.jsx @@ -5,37 +5,37 @@ import CommonHead from "../UserHeader/CommonHead"; import MyActiveJobTable from "./MyActiveJobTable"; export default function MyActiveJobs(props) { - const [selectTab, setValue] = useState("today"); - const filterHandler = (value) => { - setValue(value); - }; - console.log("AMEYE LOC1", props.MyJobList); - return ( - - -
-
- {/* heading */} -
-
-

+ const [selectTab, setValue] = useState("today"); + const filterHandler = (value) => { + setValue(value); + }; + console.log("AMEYE LOC1", props.MyJobList); + return ( + + +
+
+ {/* heading */} +
+
+

Active Job(s) - -

-
-
-
filterHandler("today")} className="relative"> - -
-
-
- -
+

- - ); +
+
filterHandler("today")} + className="relative" + >
+
+
+ +
+
+ + ); } diff --git a/src/components/MyJobs/index.jsx b/src/components/MyJobs/index.jsx index a370474..3ff3da9 100644 --- a/src/components/MyJobs/index.jsx +++ b/src/components/MyJobs/index.jsx @@ -5,40 +5,44 @@ import MyJobTable from "./MyJobTable"; import CommonHead from "../UserHeader/CommonHead"; export default function MyJobs(props) { - const [selectTab, setValue] = useState("today"); - const filterHandler = (value) => { - setValue(value); - }; - console.log("AMEYE LOC1", props.MyJobList); - return ( - - -
-
- {/* heading */} -
-
-

- - My Jobs - + const [selectTab, setValue] = useState("today"); + const filterHandler = (value) => { + setValue(value); + }; + console.log("AMEYE LOC1", props.MyJobList); + return ( + + +
+
+ {/* heading */} +
+
+

+ + My Jobs + - - Add Job - -

-
-
-
filterHandler("today")} className="relative"> - -
-
-
- -
+ + Add Job + +

- - ); +
+
filterHandler("today")} + className="relative" + >
+
+
+ +
+
+ + ); } diff --git a/src/components/MyTasks/MyJobTable.jsx b/src/components/MyTasks/MyJobTable.jsx index b5979a5..679dd13 100644 --- a/src/components/MyTasks/MyJobTable.jsx +++ b/src/components/MyTasks/MyJobTable.jsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +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"; @@ -7,1470 +7,549 @@ import SelectBox from "../Helpers/SelectBox"; import PaginatedList from "../Pagination/PaginatedList"; import { handlePagingFunc } from "../Pagination/HandlePagination"; +import usersService from "../../services/UsersService"; export default function MyJobTable({ className }) { - const filterCategories = ["All Categories", "Explore", "Featured"]; - const [selectedCategory, setCategory] = useState(filterCategories[0]); + const filterCategories = ["All Categories", "Explore", "Featured"]; + const [selectedCategory, setCategory] = useState(filterCategories[0]); + const [tasksData, setTasksData] = useState(null); - let data = ['1', '2', '3', '4', '5', '6'] // to be replaced later by result from API CALL + let apiCall = useMemo(() => new usersService(), []); - 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 handlePagination = (e) => { - handlePagingFunc(e,setCurrentPage) + const displayTasks = useCallback(async () => { + try { + const res = await apiCall.getMyActiveTaskList(); + console.log('Ebube step', res) + let { + data: { result_list }, + internal_return, + statusText, + } = await res; + if (internal_return < 0 || statusText !== "OK") return; + setTasksData(result_list); + } catch (error) { + throw new Error(error); } - - return ( -
-
-
-

- Products History -

-
- -
- {data.length && -
- - - - - - - - - - + }, [apiCall]); + + useEffect(() => { + displayTasks() + }, []) + + let data = ["1", "2", "3", "4", "5", "6"]; // to be replaced later by result from API CALL + + 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 handlePagination = (e) => { + handlePagingFunc(e, setCurrentPage); + }; + + return ( +
+ {tasksData && ( +
+ {/*
All ProductValueUSD24H%BitsTimeStatus
+ + + + + + + + + + + + {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 + + + +
*/} - {selectedCategory === "All Categories" ? ( - currentTask.map((item,index)=>( - - -
-
- data -
-
-

- Mullican Computer Joy -

- - Owned by Xoeyam +
+ {tasksData?.length > 0 ? ( + tasksData?.map((task, idx) => ( +
+
+
+
+ data +
+
+

+ {task?.title} +

+ + {task?.description} -
-
- - -
- - - - - - - - - - - - - 7473 ETH - -
- - -
- - - - - - - - - - 6392.99$ - -
- - - - -24.75 (11.5%) - - - - - 343 - - - - - 2 Hours 1 min 30s - - - - - - - )) - ) : selectedCategory === "Explore" ? ( - currentTask.map((item,index)=>( - - -
-
- data -
-
-

- Mullican Computer Joy -

- - Owned by Xoeyam + + Price: + {task?.price} -
-
- - -
- - - - - - - - - - - - - 7473 ETH - -
- - -
- - - - - - - - - - 6392.99$ - -
- - - - -24.75 (11.5%) - - - - - 343 - - - - - 2 Hours 1 min 30s - - - - - - - )) - ) : ( - currentTask.map((item,index)=>( - - -
-
- data -
-
-

- Mullican Computer Joy -

- - Owned by Xoeyam + + Duration: + {Number(task?.timeline_days) === 1 ? `${task?.timeline_days} day` : `${task?.timeline_days} day(s)`} -
-
- - -
- - - - - - - - - - - - - 7473 ETH - -
- - -
- - - - - - - - - - 6392.99$ - -
- - - - -24.75 (11.5%) - - - - - 343 - - - - - 2 Hours 1 min 30s - - - - - - - )) - )} + + Due Date: + {task?.delivery_date} + + + Confirmation: + {task?.contract} + +
+
+
- {/* {selectedCategory === "All Categories" ? ( - <> - - -
-
- 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 - - - - - - - - -
-
- data -
-
-

- Mullican Computer Joy -

- - Owned by Xoeyam - -
-
- - -
- - - - - - - - - - - - - 7473 ETH - -
- - -
- - - - - - - - - - 6392.99$ - -
- - - - -24.75 (11.5%) - - - - - 343 - - - - - 2 Hours 1 min 30s - - - - - - - - ) : selectedCategory === "Explore" ? ( - <> - - -
-
- 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 - - - - - - - - -
-
- data -
-
-

- Mullican Computer Joy -

- - Owned by Xoeyam - -
-
- - -
- - - - - - - - - - - - - 7473 ETH - -
- - -
- - - - - - - - - - 6392.99$ - -
- - - - -24.75 (11.5%) - - - - - 343 - - - - - 2 Hours 1 min 30s - - - - - - - - )} */} - - +
+ +
+
+ )) + ) : ( + + + No Tasks! + + + )} +
- {/* PAGINATION BUTTON */} - = data.length ? true : false} data={data} start={indexOfFirstItem} stop={indexOfLastItem} /> - {/* END OF PAGINATION BUTTON */} -
+ {/* PAGINATION BUTTON */} + = + data.length + ? true + : false } + data={data} + start={indexOfFirstItem} + stop={indexOfLastItem} + /> + {/* END OF PAGINATION BUTTON */}
- ); + )} + + ); } + +/* */ diff --git a/src/components/MyTasks/index.jsx b/src/components/MyTasks/index.jsx index 0af38b7..39e0612 100644 --- a/src/components/MyTasks/index.jsx +++ b/src/components/MyTasks/index.jsx @@ -5,36 +5,36 @@ import MyJobTable from "./MyJobTable"; import CommonHead from "../UserHeader/CommonHead"; export default function MyTasks() { - const [selectTab, setValue] = useState("today"); - const filterHandler = (value) => { - setValue(value); - }; - return ( - - -
-
- {/* heading */} -
-
-

+ const [selectTab, setValue] = useState("today"); + const filterHandler = (value) => { + setValue(value); + }; + return ( + + +
+
+ {/* heading */} +
+
+

My Tasks - -

-
-
-
filterHandler("today")} className="relative"> - -
-
-
- -
+

- - ); +
+
filterHandler("today")} + className="relative" + >
+
+
+ +
+
+ + ); } diff --git a/src/components/Partials/MobileSideBar.jsx b/src/components/Partials/MobileSideBar.jsx index db0415d..9abe391 100644 --- a/src/components/Partials/MobileSideBar.jsx +++ b/src/components/Partials/MobileSideBar.jsx @@ -163,19 +163,20 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler }) { - {!userDetails.post_jobs ? + {!userDetails.post_jobs ? (
-
- - - Enable Job Post - - +
+ + + Enable Job Post + + +
-
- : - jobLists?.result_list?.length ? - ( + ) : jobLists?.result_list?.length ? (

My Jobs

@@ -224,33 +225,30 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler }) {
- ) - : - ( -
-
-

My Jobs

-
-
-
    -
  • - - - - - - My Jobs - - -
    • -
-
+ ) : ( +
+
+

My Jobs

- ) - } +
+
    +
  • + + + + + + My Jobs + + +
    • +
+
+
+ )}
{/* signout area */} {sidebar ? ( @@ -345,4 +343,4 @@ const ListItem = ({ sidebar, route, title, bubble }) => { ); -}; \ No newline at end of file +};