diff --git a/src/components/MyActiveJobs/ActiveJobMessage.jsx b/src/components/MyActiveJobs/ActiveJobMessage.jsx index 8717098..9aedbfb 100644 --- a/src/components/MyActiveJobs/ActiveJobMessage.jsx +++ b/src/components/MyActiveJobs/ActiveJobMessage.jsx @@ -8,1130 +8,55 @@ import SelectBox from "../Helpers/SelectBox"; import PaginatedList from "../Pagination/PaginatedList"; import { handlePagingFunc } from "../Pagination/HandlePagination"; -export default function ActiveJobMessage({ className }) { - const filterCategories = ["All Categories", "Explore", "Featured"]; - const [selectedCategory, setCategory] = useState(filterCategories[0]); - - let data = ['1', '2', '3', '4', '5', '6'] // to be replaced later by result from API CALL - +export default function ActiveJobMessage({ activeJobMesList }) { 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 currentActiveJobMesList = activeJobMesList?.data?.slice(indexOfFirstItem, indexOfLastItem); + const handlePagination = (e) => { - handlePagingFunc(e,setCurrentPage) + handlePagingFunc(e,setCurrentPage) } - return ( -
- {/*
*/} - {/*
*/} - {/*

*/} - {/* Products History*/} - {/*

*/} - {/*
*/} - {/* */} - {/*
*/} - {data.length && -
- - - {selectedCategory === "All Categories" ? ( - currentTask.map((item,index)=>( - - - - )) - ) : selectedCategory === "Explore" ? ( - currentTask.map((item,index)=>( - - - - )) - ) : ( - currentTask.map((item,index)=>( - - - - )) - )} + return ( +
+
-
-
-

- Mullican Joy -

- - Owned by Xoeyam - -
-
-
-
-
-

- Mullican Joy -

- - Owned by Xoeyam - -
-
-
-
-
- data -
-
-

- Mullican Computer Joy -

- - Owned by Xoeyam - -
-
-
+ + + + + + {activeJobMesList.data.length ? + ( + + {currentActiveJobMesList.map((item, index) => ( + + + + ))} + + ) + : + activeJobMesList.error ? + ( + + + + + + ) + : + + + + + + } +
Opps! an error occurred. Please try again!
No Purchase History Found!
- {/* {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 - - - - - - - - )} */} - - - - {/* PAGINATION BUTTON */} - = data.length ? true : false} data={data} start={indexOfFirstItem} stop={indexOfLastItem} /> - {/* END OF PAGINATION BUTTON */} -
- } -
- ); + {/* PAGINATION BUTTON */} + = activeJobMesList?.data?.length ? true : false} data={activeJobMesList?.data} start={indexOfFirstItem} stop={indexOfLastItem} /> + {/* END OF PAGINATION BUTTON */} + + ) } diff --git a/src/components/MyActiveJobs/ActiveJobs.jsx b/src/components/MyActiveJobs/ActiveJobs.jsx index 0a02d3e..cf50acc 100644 --- a/src/components/MyActiveJobs/ActiveJobs.jsx +++ b/src/components/MyActiveJobs/ActiveJobs.jsx @@ -1,28 +1,56 @@ import React, { useEffect, useState } from "react"; import { useSelector } from "react-redux"; -import ModalCom from "../Helpers/ModalCom"; import Layout from "../Partials/Layout"; -import { useLocation, useNavigate } from "react-router-dom"; +import { useNavigate } from "react-router-dom"; import ActiveJobMessage from "./ActiveJobMessage"; +import LoadingSpinner from "../Spinners/LoadingSpinner"; + +import usersService from "../../services/UsersService"; + +function ActiveJobs(props) { + const ApiCall = new usersService() -function ActiveJobs() { let { userDetails } = useSelector((state) => state.userDetails); let navigate = useNavigate() - let {state} = useLocation() - let [details, setDetails] = useState({}) + let [messageToSend, setMessageToSend] = useState('') // State to hold the value of message to be sent - // console.log(state, userDetails); + let [requestStatus, setRequestStatus] = useState({loading: false, status: false, message: ''}) - useEffect(()=>{ - if(!state){ - navigate('/my-active-jobs', {replace: true}) + // FUNCTION TO HANDLE MESSAGE CHANGE + const handleMessageChange = ({target:{value}}) => { + setMessageToSend(value) + } + + // 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) } - setDetails(state) - },[]) + 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) + }) + } + return ( - {/*
*/}
@@ -45,7 +73,7 @@ function ActiveJobs() {

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

{/* END of back btn and title */} @@ -53,11 +81,11 @@ function ActiveJobs() {

- {details.contract && details.contract} + {props.details?.contract && props.details.contract}

Description: - {details.description && details.description} + {props.details?.description && props.details.description}

Delivery Detail

@@ -67,15 +95,15 @@ function ActiveJobs() {

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

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

- {details.timeline_days && details.timeline_days} day(s) + {props.details?.timeline_days && props.details.timeline_days} day(s)

@@ -88,14 +116,39 @@ function ActiveJobs() { className="p-4 w-full text-base text-slate-600 border-y border-slate-300 outline-none" rows="10" style={{ resize: "none" }} + name='message' + onChange={handleMessageChange} + value={messageToSend} />
+ {/* ERROR DISPLAY AND SUBMIT BUTTON */} +
+ {/* error or success display */} + {requestStatus.message != "" && + (!requestStatus.status ? ( +
+ {requestStatus.message} +
+ ) : ( + requestStatus.status && ( +
+ {requestStatus.message} +
+ ) + ))} +
+ {/* End of error or success display */} + {/* Buttons Sections */}
-
+
-
+
@@ -140,14 +198,17 @@ function ActiveJobs() {

Message

- + {props.activeJobMesList.loading ? + + : + + }
- {/*
*/} ); } diff --git a/src/components/Pagination/PaginatedList.jsx b/src/components/Pagination/PaginatedList.jsx index 50d95cf..47e9c40 100644 --- a/src/components/Pagination/PaginatedList.jsx +++ b/src/components/Pagination/PaginatedList.jsx @@ -3,7 +3,7 @@ import { createRoutesFromChildren } from 'react-router-dom'; const PaginatedList = ({ onClick, prev, next, data, start, stop }) => { - if(data.length){ + if(data.length > process.env.REACT_APP_ITEM_PER_PAGE){ return (
{/* Render pagination buttons */} diff --git a/src/services/UsersService.js b/src/services/UsersService.js index 64530dd..75aaaac 100644 --- a/src/services/UsersService.js +++ b/src/services/UsersService.js @@ -472,6 +472,32 @@ class usersService { return this.postAuxEnd("/jobmanagerupdatejob", postData); } + // FUNCTION TO GET ACTIVE JOB MESSAGE LIST + activeJobMesList(reqData) { + var postData = { + uid: localStorage.getItem("uid"), + member_id: localStorage.getItem("member_id"), + sessionid: localStorage.getItem("session_token"), + limit: 30, + action: 14011, + offset: 0, + ...reqData + }; + return this.postAuxEnd("/activejobmsglist", postData); + } + + // FUNCTION TO SEND ACTIVE JOB TASK MESSAGE + sendTaskMessage(reqData) { + var postData = { + uid: localStorage.getItem("uid"), + member_id: localStorage.getItem("member_id"), + sessionid: localStorage.getItem("session_token"), + action: 14010, + ...reqData + }; + return this.postAuxEnd("/sendtaskmessage", postData); + } + // END POINT TO DELETE A JOB deleteJob(reqData) { var postData = { diff --git a/src/views/ManageActiveJobs.jsx b/src/views/ManageActiveJobs.jsx index a3021db..c700548 100644 --- a/src/views/ManageActiveJobs.jsx +++ b/src/views/ManageActiveJobs.jsx @@ -1,9 +1,45 @@ -import React from 'react' +import React, {useState, useEffect} from 'react' import ActiveJobs from '../components/MyActiveJobs/ActiveJobs' +import { useLocation, useNavigate } from 'react-router-dom' +import usersService from '../services/UsersService' function ManageActiveJobs() { + + const ApiCall = new usersService() + + let navigate = useNavigate() + let {state} = useLocation() + + let [details, setDetails] = useState({}) // to hold state values + + let [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 getActiveJobMesList = () => { // FUNCTION TO GET ACTIVE JOB MESSAGE LIST + setActiveJobMesList({loading: true, error: false, data: []}) + let contract = {contract: state.contract} + ApiCall.activeJobMesList(contract).then((res)=>{ + if(res.status != 200 || res.data.internal_return < 0){ + setActiveJobMesList({loading: false, error: false, data: []}) + return + } + setActiveJobMesList({loading: false, error: false, data: res.data.result_list}) + }).catch((error)=>{ + setActiveJobMesList({loading: false, error: true, data: []}) + }) + } + + useEffect(()=>{ + if(!state){ + navigate('/my-active-jobs', {replace: true}) + } + setDetails(state) + getActiveJobMesList() + },[activeJobMesListReload]) + return ( - + ) }