From 85b0456011ab902db580b181f8da383932db3b88 Mon Sep 17 00:00:00 2001 From: Ebube Date: Sat, 30 Sep 2023 07:18:23 +0100 Subject: [PATCH] Added price to review due task --- src/components/MyActiveJobs/ActiveJobs.jsx | 37 ++++++++---- .../MyActiveJobs/MyActiveJobTable.jsx | 18 +++--- .../MyActiveJobs/MyReviewDueJobs.jsx | 59 +++++++++---------- src/views/ManageActiveJobs.jsx | 26 ++++---- src/views/MyReviewDueJobsPage.jsx | 57 ++++++++++-------- 5 files changed, 108 insertions(+), 89 deletions(-) diff --git a/src/components/MyActiveJobs/ActiveJobs.jsx b/src/components/MyActiveJobs/ActiveJobs.jsx index 0b1b93a..2047d7e 100644 --- a/src/components/MyActiveJobs/ActiveJobs.jsx +++ b/src/components/MyActiveJobs/ActiveJobs.jsx @@ -10,24 +10,25 @@ import ActiveJobMessage from "./ActiveJobMessage"; import IndexJobActions from "./JobActions/IndexJobActions"; import usersService from "../../services/UsersService"; +import { PriceFormatter } from "../Helpers/PriceFormatter"; function ActiveJobs(props) { const ApiCall = new usersService(); - let navigate = useNavigate(); + const navigate = useNavigate(); - let { userDetails } = useSelector((state) => state.userDetails); + const { userDetails } = useSelector((state) => state.userDetails); - let [passDue, setPassDue] = useState( + const [passDue, setPassDue] = useState( new Date() > new Date(props.details?.delivery_date) ); // STATE TO KNOW IF TASK IS PASSED DUE TIME - let [messageToSend, setMessageToSend] = useState(""); // State to hold the value of message to be sent + const [messageToSend, setMessageToSend] = useState(""); // State to hold the value of message to be sent - let [filesToSend, setFilesToSend] = useState([]); // State to hold the value of files to be sent + const [filesToSend, setFilesToSend] = useState([]); // State to hold the value of files to be sent - let [tab, setTab] = useState("message"); + const [tab, setTab] = useState("message"); - let [requestStatus, setRequestStatus] = useState({ + const [requestStatus, setRequestStatus] = useState({ loading: false, status: false, message: "", @@ -248,7 +249,11 @@ function ActiveJobs(props) { } }, [passDue]); - console.log("AC JOBS >>", props); + let thePrice = PriceFormatter( + props.details?.price * 0.01, + props.details?.currency_code, + props.details?.currency + ); return ( @@ -311,10 +316,11 @@ function ActiveJobs(props) { Due: {props?.details && props.details.delivery_date.split(" ")[0]}

-

- {props?.delivery_date && - props.details.delivery_date.split(" ")[1]} -

+ {props?.delivery_date && ( +

+ {props.details.delivery_date.split(" ")[1]} +

+ )} ) : (
@@ -334,6 +340,13 @@ function ActiveJobs(props) {
)} +
+ + Price:{" "} + + {thePrice} +
+
Duration:{" "} diff --git a/src/components/MyActiveJobs/MyActiveJobTable.jsx b/src/components/MyActiveJobs/MyActiveJobTable.jsx index f716a0c..09b3d73 100644 --- a/src/components/MyActiveJobs/MyActiveJobTable.jsx +++ b/src/components/MyActiveJobs/MyActiveJobTable.jsx @@ -1,10 +1,9 @@ import React, { useState } from "react"; import { useLocation, useNavigate } from "react-router-dom"; -import dataImage2 from "../../assets/images/data-table-user-2.png"; +import localImgLoad from "../../lib/localImgLoad"; +import { PriceFormatter } from "../Helpers/PriceFormatter"; import { handlePagingFunc } from "../Pagination/HandlePagination"; import PaginatedList from "../Pagination/PaginatedList"; -import { PriceFormatter } from "../Helpers/PriceFormatter"; -import localImgLoad from "../../lib/localImgLoad"; export default function MyActiveJobTable({ MyJobList, className }) { const navigate = useNavigate(); @@ -33,11 +32,6 @@ export default function MyActiveJobTable({ MyJobList, className }) {
- {/**/} - {/* */} - {/* */} - {/**/} - { <> {MyJobList && @@ -59,7 +53,9 @@ export default function MyActiveJobTable({ MyJobList, className }) {
data @@ -115,7 +111,9 @@ export default function MyActiveJobTable({ MyJobList, className }) { }} className="px-4 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white" > - {value.owner_status == 'OWNER' ? 'Manage' : 'Send Updates'} + {value.owner_status == "OWNER" + ? "Manage" + : "Send Updates"}
diff --git a/src/components/MyActiveJobs/MyReviewDueJobs.jsx b/src/components/MyActiveJobs/MyReviewDueJobs.jsx index 784aff9..1bd69e3 100644 --- a/src/components/MyActiveJobs/MyReviewDueJobs.jsx +++ b/src/components/MyActiveJobs/MyReviewDueJobs.jsx @@ -1,42 +1,39 @@ import React, { useState } from "react"; -import { Link } from "react-router-dom"; import Layout from "../Partials/Layout"; import CommonHead from "../UserHeader/CommonHead"; import MyActiveJobTable from "./MyActiveJobTable"; export default function MyReviewDueJobs(props) { - const [selectTab, setValue] = useState("today"); - const filterHandler = (value) => { - setValue(value); - }; - return ( - - -
-
- {/* heading */} -
-
-

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

- Review Due Job(s) + Review Due Job(s) -

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

- - ); +
+
filterHandler("today")} + className="relative" + >
+
+
+ +
+
+ + ); } diff --git a/src/views/ManageActiveJobs.jsx b/src/views/ManageActiveJobs.jsx index 935a46b..5a8bfe7 100644 --- a/src/views/ManageActiveJobs.jsx +++ b/src/views/ManageActiveJobs.jsx @@ -1,31 +1,37 @@ -import React, { useState, useEffect } from "react"; -import ActiveJobs from "../components/MyActiveJobs/ActiveJobs"; +import React, { useEffect, useState } from "react"; import { useLocation, useNavigate } from "react-router-dom"; +import ActiveJobs from "../components/MyActiveJobs/ActiveJobs"; import usersService from "../services/UsersService"; +/** + * This code defines a React functional component called `ManageActiveJobs`. + * It fetches a list of active job messages and renders the `ActiveJobs` component with the necessary props. + */ function ManageActiveJobs() { const ApiCall = new usersService(); - let navigate = useNavigate(); - let { state } = useLocation(); + const navigate = useNavigate(); + const { state } = useLocation(); - let [details, setDetails] = useState({}); // to hold state values + const [details, setDetails] = useState({}); - let [activeJobMesList, setActiveJobMesList] = useState({ + const [activeJobMesList, setActiveJobMesList] = useState({ loading: true, error: false, data: [], }); - let [activeJobMesListReload, setActiveJobMesListReload] = useState(false); // state to determine when ACTIVE JOB MESSAGE LIST RELOADS/RE-RENDERS + const [activeJobMesListReload, setActiveJobMesListReload] = useState(false); + /** + * Fetches the active job message list. + */ const getActiveJobMesList = () => { - // FUNCTION TO GET ACTIVE JOB MESSAGE LIST setActiveJobMesList({ loading: true, error: false, data: [] }); - let contract = { contract: state.contract }; + const contract = { contract: state.contract }; ApiCall.activeJobMesList(contract) .then((res) => { - if (res.status != 200 || res.data.internal_return < 0) { + if (res.status !== 200 || res.data.internal_return < 0) { setActiveJobMesList({ loading: false, error: false, data: [] }); return; } diff --git a/src/views/MyReviewDueJobsPage.jsx b/src/views/MyReviewDueJobsPage.jsx index a20428d..1db207c 100644 --- a/src/views/MyReviewDueJobsPage.jsx +++ b/src/views/MyReviewDueJobsPage.jsx @@ -1,31 +1,36 @@ -import React, { useContext,useState, useEffect } from "react"; -import usersService from "../services/UsersService"; -import MyReviewDueJobs from "../components/MyActiveJobs/MyReviewDueJobs"; +import React, { useEffect, useState } from "react"; import { useSelector } from "react-redux"; +import MyReviewDueJobs from "../components/MyActiveJobs/MyReviewDueJobs"; +import usersService from "../services/UsersService"; +/** + * React component that fetches a list of review due jobs and renders the `MyReviewDueJobs` component with the fetched data. + */ export default function MyReviewDueJobsPage() { - let {commonHeadBanner} = useSelector(state => state.commonHeadBanner) - const [MyJobList, setMyJobList] = useState([]); - const api = new usersService(); - const getMyJobList = async () => { - try { - const res = await api.getMyReviewDueJobList(); - setMyJobList(res.data); - } catch (error) { - console.log("Error getting mode"); - } - }; - useEffect(() => { - getMyJobList(); - }, []); + const { commonHeadBanner } = useSelector((state) => state.commonHeadBanner); + const [myJobList, setMyJobList] = useState([]); - // debugger; - return ( - <> - - - ); + useEffect(() => { + const api = new usersService(); + + const getMyJobList = async () => { + try { + const res = await api.getMyReviewDueJobList(); + setMyJobList(res.data); + } catch (error) { + console.log("Error getting mode"); + } + }; + + getMyJobList(); + }, []); + + return ( + <> + + + ); }
All Product.