From 984cdeaa24a0d00e92464524176a5b900b821ab4 Mon Sep 17 00:00:00 2001 From: Ebube Date: Tue, 13 Jun 2023 18:00:40 +0100 Subject: [PATCH 1/2] Data added --- .../MyActiveJobs/MyActiveJobTable.jsx | 157 +++++++------ src/components/MyActiveJobs/index.jsx | 4 +- src/components/MyTasks/MyJobTable.jsx | 207 +++++++++--------- 3 files changed, 184 insertions(+), 184 deletions(-) diff --git a/src/components/MyActiveJobs/MyActiveJobTable.jsx b/src/components/MyActiveJobs/MyActiveJobTable.jsx index 500ff6c..d4a838f 100644 --- a/src/components/MyActiveJobs/MyActiveJobTable.jsx +++ b/src/components/MyActiveJobs/MyActiveJobTable.jsx @@ -1,17 +1,12 @@ import React, { useState } from "react"; import dataImage2 from "../../assets/images/data-table-user-2.png"; - import { useNavigate, useLocation } from "react-router-dom"; - import { handlePagingFunc } from "../Pagination/HandlePagination"; import PaginatedList from "../Pagination/PaginatedList"; export default function MyActiveJobTable({ MyJobList, className }) { const navigate = useNavigate(); - let {pathname} = useLocation() - - const filterCategories = ["All Categories", "Explore", "Featured"]; - const [selectedCategory, setCategory] = useState(filterCategories[0]); + let { pathname } = useLocation(); const [currentPage, setCurrentPage] = useState(0); const indexOfFirstItem = Number(currentPage); @@ -44,82 +39,86 @@ export default function MyActiveJobTable({ MyJobList, className }) { { <> {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} - - -
-
- + MyJobList?.result_list && + MyJobList.result_list.length > 0 ? ( + currentActiveJobList.map((value, index) => { + let deliveryDate = value?.delivery_date?.split(" ")[0]; - -
- -
- - - )) - : + return ( + + +
+
+ data +
+
+

+ {value.title} +

+
{value.description}
+ + Price:{" "} + + {value.price * 0.01} + + + + Duration:{" "} + + {" "} + {value.timeline_days} day(s) + + + + Expire:{" "} + + {" "} + {deliveryDate} + + + + Send to:{" "} + + {" "} + {value.job_to === null + ? "(pending)" + : value.job_to} + + +
+
+ + + +
+ +
+ + + ); + }) + ) : ( - - No Active Task! - + No Active Task! - } + )} } diff --git a/src/components/MyActiveJobs/index.jsx b/src/components/MyActiveJobs/index.jsx index 35ecdf7..46b9259 100644 --- a/src/components/MyActiveJobs/index.jsx +++ b/src/components/MyActiveJobs/index.jsx @@ -12,9 +12,7 @@ export default function MyActiveJobs(props) { console.log("AMEYE LOC1", props.MyJobList); return ( - +
{/* heading */} diff --git a/src/components/MyTasks/MyJobTable.jsx b/src/components/MyTasks/MyJobTable.jsx index 67cadb8..a7c7ed6 100644 --- a/src/components/MyTasks/MyJobTable.jsx +++ b/src/components/MyTasks/MyJobTable.jsx @@ -45,123 +45,126 @@ export default function MyJobTable({ className, ActiveJobList }) { : "none", }} > + {/* Adding this dark overlay in order to see the texts properly */} {!ActiveJobList?.data.length && (
)} - {ActiveJobList.loading ? ( + {ActiveJobList?.data.length > 0 && ActiveJobList.loading && (
- ) : ( -
-
- {ActiveJobList?.data?.length > 0 ? ( - currentTask?.map((task, idx) => ( -
-
-
-
- data -
-
-

- {task?.title} -

- - {task?.description} + )} + +
+
+ {ActiveJobList?.data?.length > 0 && + currentTask?.map((task, idx) => ( +
+
+
+
+ data +
+
+

+ {task?.title} +

+ + {task?.description} + + + Price: + + {Number(task?.price) * 0.01} - - Price: - - {Number(task?.price) * 0.01} - + + + Duration: + + {Number(task?.timeline_days) === 1 + ? `${task?.timeline_days} day` + : `${task?.timeline_days} day(s)`} - - Duration: - - {Number(task?.timeline_days) === 1 - ? `${task?.timeline_days} day` - : `${task?.timeline_days} day(s)`} - + + + Due Date: + + {task?.delivery_date} - - Due Date: - - {task?.delivery_date} - + + + Confirmation: + + {task?.contract} - - Confirmation: - - {task?.contract} - - -
+
- -
- -
- )) - ) : ActiveJobList.status ? ( -
-
- You currently have "0" task -
- -
- ) : ( -
-

Error Occurred! Unable to display Tasks!

-
- )} -
- {/* PAGINATION BUTTON */} - = - ActiveJobList?.data?.length - ? true - : false - } - data={ActiveJobList?.data} - start={indexOfFirstItem} - stop={indexOfLastItem} - /> - {/* END OF PAGINATION BUTTON */} +
+ +
+
+ ))} + + {ActiveJobList?.data?.length <= 0 && ( +
+
+ You currently have "0" task +
+ +
+ )} + {ActiveJobList?.internal_return < 0 && ( +
+

Error Occurred! Unable to display Tasks!

+
+ )}
- )} + + {/* PAGINATION BUTTON */} + = + ActiveJobList?.data?.length + ? true + : false + } + data={ActiveJobList?.data} + start={indexOfFirstItem} + stop={indexOfLastItem} + /> + {/* END OF PAGINATION BUTTON */} +
); } From 7074347289e27e44b4cb34c0c5cdc39c931c4c5a Mon Sep 17 00:00:00 2001 From: Ebube Date: Tue, 13 Jun 2023 18:26:41 +0100 Subject: [PATCH 2/2] New Changes to ActiveJobs --- src/components/MyActiveJobs/ActiveJobs.jsx | 1031 +++++++++-------- .../MyActiveJobs/MyActiveJobTable.jsx | 42 +- 2 files changed, 598 insertions(+), 475 deletions(-) diff --git a/src/components/MyActiveJobs/ActiveJobs.jsx b/src/components/MyActiveJobs/ActiveJobs.jsx index 53f000b..867462b 100644 --- a/src/components/MyActiveJobs/ActiveJobs.jsx +++ b/src/components/MyActiveJobs/ActiveJobs.jsx @@ -12,22 +12,28 @@ import { useReactToPrint } from "react-to-print"; import usersService from "../../services/UsersService"; function ActiveJobs(props) { - const ApiCall = new usersService() - let navigate = useNavigate() + const ApiCall = new usersService(); + let navigate = useNavigate(); let { userDetails } = useSelector((state) => state.userDetails); - let [passDue, setPassDue] = useState(new Date() > new Date(props.details?.delivery_date)) // STATE TO KNOW IF TASK IS PASSED DUE TIME + let [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 + let [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 + let [filesToSend, setFilesToSend] = useState([]); // State to hold the value of files to be sent - let [tab, setTab] = useState('message') + let [tab, setTab] = useState("message"); - let [requestStatus, setRequestStatus] = useState({loading: false, status: false, message: ''}) + let [requestStatus, setRequestStatus] = useState({ + loading: false, + status: false, + message: "", + }); - let [popUp, setPopUp] = useState(false) // STATE FOR POPOUT MODAL + let [popUp, setPopUp] = useState(false); // STATE FOR POPOUT MODAL const printRef = useRef(); // to handle printing @@ -35,418 +41,511 @@ function ActiveJobs(props) { content: () => printRef.current, }); - const popUpHandler = () => { // FUNCTION TO HANDLE POPOUT - setPopUp(prev => !prev) - } + const popUpHandler = () => { + // FUNCTION TO HANDLE POPOUT + setPopUp((prev) => !prev); + }; // FUNCTION TO HANDLE MESSAGE CHANGE - const handleMessageChange = ({target:{value}}) => { - setMessageToSend(value) - } + const handleMessageChange = ({ target: { value } }) => { + setMessageToSend(value); + }; // FUNCTION TO HANDLE FILE UPlOAD CHANGE - const handleFileChange = ({target:{files}}) => { - setRequestStatus({loading: false, status: false, message: ''}) // State to determine error state - - if(!files[0]) { // IF NO FILE SELECTED RETURN - return + const handleFileChange = ({ target: { files } }) => { + setRequestStatus({ loading: false, status: false, message: "" }); // State to determine error state + + if (!files[0]) { + // IF NO FILE SELECTED RETURN + return; } - if(files[0].size > Number(process.env.REACT_APP_MAX_FILE_SIZE)){ - setRequestStatus({loading: false, status: false, message: 'File must be <= 1mb'}) - setTimeout(()=>{ - setRequestStatus({loading: false, status: false, message: ''}) - }, 5000) - return + if (files[0].size > Number(process.env.REACT_APP_MAX_FILE_SIZE)) { + setRequestStatus({ + loading: false, + status: false, + message: "File must be <= 1mb", + }); + setTimeout(() => { + setRequestStatus({ loading: false, status: false, message: "" }); + }, 5000); + return; } - if(filesToSend.length >= Number(process.env.REACT_APP_TOTAL_NUM_FILE)){ - setRequestStatus({loading: false, status: false, message: `Total number of attachment is ${Number(process.env.REACT_APP_TOTAL_NUM_FILE)}`}) - setTimeout(()=>{ - setRequestStatus({loading: false, status: false, message: ''}) - }, 5000) - return + if (filesToSend.length >= Number(process.env.REACT_APP_TOTAL_NUM_FILE)) { + setRequestStatus({ + loading: false, + status: false, + message: `Total number of attachment is ${Number( + process.env.REACT_APP_TOTAL_NUM_FILE + )}`, + }); + setTimeout(() => { + setRequestStatus({ loading: false, status: false, message: "" }); + }, 5000); + return; } // INCLUDE FILE IF NO ERROR - setFilesToSend(prev => ([...prev, files[0]])) - } + setFilesToSend((prev) => [...prev, files[0]]); + }; // FUNCTION TO CLEAR ALL TYPED MESSAGE OR FILES - const handleClearAll = ({target:{name}}) => { - if(tab == 'message'){ - setMessageToSend('') - }else if(tab=='files'){ - setFilesToSend([]) - }else{ - return - } - } + const handleClearAll = ({ target: { name } }) => { + if (tab == "message") { + setMessageToSend(""); + } else if (tab == "files") { + setFilesToSend([]); + } else { + return; + } + }; // FUNCTION TO REMOVE AND IMAGE const handleRemoveImage = (imageToDelete) => { - setFilesToSend(prev => prev.filter(item => item.name != imageToDelete.name)) - } + setFilesToSend((prev) => + prev.filter((item) => item.name != imageToDelete.name) + ); + }; // FUNCTION TO SEND TASK MESSAGE const sendTaskMessage = () => { - let reqData={message: messageToSend, msg_type: 'TEXT', contract:props.details.contract} - if(!reqData.message){ - setRequestStatus({loading: false, status: false, message: 'Message is empty'}) - return setTimeout(()=>{ - setRequestStatus({loading: false, status: false, message: ''}) - }, 5000) + let reqData = { + message: messageToSend, + msg_type: "TEXT", + contract: props.details.contract, + }; + if (!reqData.message) { + setRequestStatus({ + loading: false, + status: false, + message: "Message is empty", + }); + return setTimeout(() => { + setRequestStatus({ loading: false, status: false, message: "" }); + }, 5000); } - setRequestStatus({loading: true, status: false, message: ''}) - ApiCall.sendTaskMessage(reqData).then((res)=>{ - if(res.status != 200 || res.data.internal_return < 0){ - setRequestStatus({loading: false, status: false, message: 'Message could not be sent, try again later'}) - return - } - setRequestStatus({loading: false, status: true, message: 'Message Sent Successfully'}) - props.reloadActiveJobList(prev => !prev) // MAKES ACTIVE JOB MESSAGE LIST TO RELOAD - setMessageToSend('') // SENDS MESSAGE TO SEND BACK TO EMPTY STRINGS - }).catch(error => { - setRequestStatus({loading: false, status: false, message: 'Opps! something went wrong'}) - }).finally(()=>{ - setTimeout(()=>{ - setRequestStatus({loading: false, status: false, message: ''}) - }, 5000) - }) - } + setRequestStatus({ loading: true, status: false, message: "" }); + ApiCall.sendTaskMessage(reqData) + .then((res) => { + if (res.status != 200 || res.data.internal_return < 0) { + setRequestStatus({ + loading: false, + status: false, + message: "Message could not be sent, try again later", + }); + return; + } + setRequestStatus({ + loading: false, + status: true, + message: "Message Sent Successfully", + }); + props.reloadActiveJobList((prev) => !prev); // MAKES ACTIVE JOB MESSAGE LIST TO RELOAD + setMessageToSend(""); // SENDS MESSAGE TO SEND BACK TO EMPTY STRINGS + }) + .catch((error) => { + setRequestStatus({ + loading: false, + status: false, + message: "Opps! something went wrong", + }); + }) + .finally(() => { + setTimeout(() => { + setRequestStatus({ loading: false, status: false, message: "" }); + }, 5000); + }); + }; - // FUNCTION TO SEND FILES - const sendFile = async () => { - setRequestStatus({loading: true, status: false, message: ''}) + // FUNCTION TO SEND FILES + const sendFile = async () => { + setRequestStatus({ loading: true, status: false, message: "" }); - if(!filesToSend.length){ // checks if file to send is empty - setRequestStatus({loading: false, status: false, message: 'No File(s) selected'}) - return setTimeout(()=>{ - setRequestStatus({loading: false, status: false, message: ''}) - }, 5000) - } + if (!filesToSend.length) { + // checks if file to send is empty + setRequestStatus({ + loading: false, + status: false, + message: "No File(s) selected", + }); + return setTimeout(() => { + setRequestStatus({ loading: false, status: false, message: "" }); + }, 5000); + } - for(let i=0; i<=filesToSend.length-1; i++){ // Loops through files to send array and trigger upload API call - - const fileToBase64 = async () =>{ // Converts file data to base64 string - try { - const base64String = await convertFileToBase64(filesToSend[i]); - return base64String; - } catch (error) { - return false; - } - } + for (let i = 0; i <= filesToSend.length - 1; i++) { + // Loops through files to send array and trigger upload API call - // if(await !fileToBase64()){ - // return - // } + const fileToBase64 = async () => { + // Converts file data to base64 string + try { + const base64String = await convertFileToBase64(filesToSend[i]); + return base64String; + } catch (error) { + return false; + } + }; - let reqData={file_name: filesToSend[i].name, file_size: filesToSend[i].size, file_type: 'image/png', file_data: await fileToBase64(), msg_type: 'FILE', contract:props.details.contract} - - ApiCall.sendFiles(reqData).then((res)=>{ - // if(res.status != 200 || res.data.internal_return < 0){ - // setRequestStatus({loading: false, status: false, message: 'Files(s) could not be sent, try again later'}) - // return - // } - // setRequestStatus({loading: false, status: true, message: 'File(s) Uploaded Successfully'}) - // props.reloadActiveJobList(prev => !prev) // MAKES ACTIVE JOB MESSAGE LIST TO RELOAD - // setFilesToSend([]) // SETS FILES TO SEND TO SEND BACK TO EMPTY ARRAY - }).catch(error => { - // setRequestStatus({loading: false, status: false, message: 'Opps! something went wrong'}) - }).finally(()=>{ - if(i==filesToSend.length-1){ - setRequestStatus({loading: false, status: true, message: 'File(s) Uploaded Successfully'}) - setFilesToSend([]) // SETS FILES TO SEND TO SEND BACK TO EMPTY ARRAY - props.reloadActiveJobList(prev => !prev) // MAKES ACTIVE JOB MESSAGE LIST TO RELOAD - setTimeout(()=>{ - setRequestStatus({loading: false, status: false, message: ''}) - }, 5000) - } - }) - } - } + // if(await !fileToBase64()){ + // return + // } + let reqData = { + file_name: filesToSend[i].name, + file_size: filesToSend[i].size, + file_type: "image/png", + file_data: await fileToBase64(), + msg_type: "FILE", + contract: props.details.contract, + }; + + ApiCall.sendFiles(reqData) + .then((res) => { + // if(res.status != 200 || res.data.internal_return < 0){ + // setRequestStatus({loading: false, status: false, message: 'Files(s) could not be sent, try again later'}) + // return + // } + // setRequestStatus({loading: false, status: true, message: 'File(s) Uploaded Successfully'}) + // props.reloadActiveJobList(prev => !prev) // MAKES ACTIVE JOB MESSAGE LIST TO RELOAD + // setFilesToSend([]) // SETS FILES TO SEND TO SEND BACK TO EMPTY ARRAY + }) + .catch((error) => { + // setRequestStatus({loading: false, status: false, message: 'Opps! something went wrong'}) + }) + .finally(() => { + if (i == filesToSend.length - 1) { + setRequestStatus({ + loading: false, + status: true, + message: "File(s) Uploaded Successfully", + }); + setFilesToSend([]); // SETS FILES TO SEND TO SEND BACK TO EMPTY ARRAY + props.reloadActiveJobList((prev) => !prev); // MAKES ACTIVE JOB MESSAGE LIST TO RELOAD + setTimeout(() => { + setRequestStatus({ loading: false, status: false, message: "" }); + }, 5000); + } + }); + } + }; // FUNCTION TO CHECK IF TASK PASS DUE IS REACHED let isPassedDue = () => { // console.log('TESTING',new Date() > new Date(props.details?.delivery_date) ) - if(new Date() > new Date(props.details?.delivery_date)){ - setPassDue(true) - }else{ - setPassDue(false) + if (new Date() > new Date(props.details?.delivery_date)) { + setPassDue(true); + } else { + setPassDue(false); } - } + }; - - useEffect(()=>{ - if(!passDue){ - let passDueInterval = setInterval(()=>{ - isPassedDue() - },1000) - return ()=>{ - clearInterval(passDueInterval) - } + useEffect(() => { + if (!passDue) { + let passDueInterval = setInterval(() => { + isPassedDue(); + }, 1000); + return () => { + clearInterval(passDueInterval); + }; } - },[passDue]) + }, [passDue]); return ( - -
- {/* job title */} -
-
- -

- {props.details?.title && props.details.title} -

-
- -
-

- {userDetails.firstname && userDetails.firstname} -

-
-

Description:

-

{props.details?.description && props.details.description}

-
-
-
- {/* end of job title */} - - {/* job details */} -
-

Delivery Detail

- {passDue ? - ( -
-

- Due: - {props.details?.delivery_date && - props.details.delivery_date.split(" ")[0]} -

-

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

-
- ) - : - ( -
-

Due:

-
-

- -

-
- Hrs - Min - Sec -
-
-
- ) +
+ {/* job title */} +
+
+ +

+ {props.details?.title && props.details.title} +

+
-
- Duration: - {props.details?.timeline_days && props.details.timeline_days} day(s) -
-
- No: - {props.details?.contract && props.details.contract} +
+

+ {userDetails.firstname && userDetails.firstname} +

+
+

Description:

+

+ {props.details?.description && props.details.description} +

+
+
+
+ {/* end of job title */} + + {/* job details */} +
+

Delivery Detail

+ {passDue ? ( +
+

+ Due: + {props.details?.delivery_date && + props.details.delivery_date.split(" ")[0]} +

+

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

+
+ ) : ( +
+

Due:

+
+

+ +

+
+ Hrs + Min + Sec +
- {/* end of job details */} -
+ )} -
-
-
-

Actions

- {/*

+

+ Duration: + + {props.details?.timeline_days && props.details.timeline_days}{" "} + day(s) + +
+
+ No: + + {props.details?.contract && props.details.contract} + +
+
+ {/* end of job details */} +
+ +
+
+
+

+ Actions +

+ {/*

Waiting for the completion message from the client before you can approve.

*/} - -
+ +
- {/* TEXTAREA SECTION */} -
-
- {/*

Message(s)

*/} -
- - -
- {tab == 'message' ? - ( -