diff --git a/src/components/History/index.jsx b/src/components/History/index.jsx index 3c01355..defea83 100644 --- a/src/components/History/index.jsx +++ b/src/components/History/index.jsx @@ -64,141 +64,153 @@ export default function History() {
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
+
+

+ + History + +

+
+
+ +
-
+ {/*
*/} + {/*
*/} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/*
*/} + {/*
*/} {/**/} {/* */}
diff --git a/src/components/MyTasks/MyJobTable.jsx b/src/components/MyTasks/MyJobTable.jsx index 2393e31..da369d1 100644 --- a/src/components/MyTasks/MyJobTable.jsx +++ b/src/components/MyTasks/MyJobTable.jsx @@ -8,40 +8,40 @@ import LoadingSpinner from "../Spinners/LoadingSpinner"; import {useNavigate, useLocation} from 'react-router-dom' -export default function MyJobTable({ className }) { +export default function MyJobTable({ className, ActiveJobList }) { let navigate = useNavigate() let {pathname} = useLocation() - const [tasksData, setTasksData] = useState(null); - const [loader, setLoader] = useState(true); + // const [tasksData, setTasksData] = useState(null); + // const [loader, setLoader] = useState(false); - let apiCall = useMemo(() => new usersService(), []); + // let apiCall = useMemo(() => new usersService(), []); - const displayTasks = useCallback(async () => { - try { - const res = await apiCall.getMyActiveTaskList(); - let { - 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]); + // const displayTasks = useCallback(async () => { + // try { + // const res = await apiCall.getMyActiveTaskList(); + // let { + // 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(); - }, []); + // useEffect(() => { + // displayTasks(); + // }, []); const [currentPage, setCurrentPage] = useState(0); const indexOfFirstItem = Number(currentPage); const indexOfLastItem = Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE); - const currentTask = tasksData?.slice(indexOfFirstItem, indexOfLastItem); + const currentTask = ActiveJobList?.data?.slice(indexOfFirstItem, indexOfLastItem); const handlePagination = (e) => { handlePagingFunc(e, setCurrentPage); @@ -53,22 +53,22 @@ export default function MyJobTable({ className }) { className || "" }`} > - {loader ? ( + {ActiveJobList.loading ? (
) : ( -
-
- {tasksData?.length > 0 ? ( +
+
+ {ActiveJobList?.data?.length > 0 ? ( currentTask?.map((task, idx) => (
-
+
-
+
data
-

+

{task?.title}

@@ -112,7 +112,7 @@ export default function MyJobTable({ className }) {
-
+
)) - ) : ( + ) + : + ( + ActiveJobList.status ?
No Tasks!
- )} + : +
+

+ Error Occurred! Unable to display Tasks! +

+
+ ) + }
{/* PAGINATION BUTTON */} @@ -142,11 +152,11 @@ export default function MyJobTable({ className }) { prev={currentPage == 0 ? true : false} next={ currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >= - tasksData?.length + ActiveJobList?.data?.length ? true : false } - data={tasksData} + data={ActiveJobList?.data} start={indexOfFirstItem} stop={indexOfLastItem} /> diff --git a/src/components/MyTasks/MyOffersTable.jsx b/src/components/MyTasks/MyOffersTable.jsx index 580f547..562045f 100644 --- a/src/components/MyTasks/MyOffersTable.jsx +++ b/src/components/MyTasks/MyOffersTable.jsx @@ -7,6 +7,7 @@ import Icons from "../Helpers/Icons"; import SliderCom from "../Helpers/SliderCom"; import OfferJobPopout from '../jobPopout/OfferJobPopout' +import LoadingSpinner from "../Spinners/LoadingSpinner"; export default function MyOffersTable({ className, MyActiveOffersList}) { @@ -48,6 +49,11 @@ export default function MyOffersTable({ className, MyActiveOffersList}) { // buySlider.current.slickNext(); // } }; + +// if ( !MyActiveOffersList || MyActiveOffersList?.result_list?.length == 0 ){ +// return(''); // want blank or no appear when no items +// } + return ( <>
@@ -107,42 +113,66 @@ export default function MyOffersTable({ className, MyActiveOffersList}) {
- - {MyActiveOffersList && - MyActiveOffersList?.result_list?.length > 0 && - MyActiveOffersList.result_list.map((value, index) => ( - -
- - {/* title */} -
-

- {value.title} -

-
- {/* username */} -
-

- {value.timeline_days} Days -

-
- {/* items */} -
-
- {value.price*0.01} {value.currency} + { MyActiveOffersList.loading ? + + : + MyActiveOffersList?.data?.length > 0 ? + MyActiveOffersList.data.map((value, index) => ( +
+
+ {/* title */} +
+

+ {value.title} +

+ {/* username */} +
+

+ {value.timeline_days} Days +

+
+ {value.price*0.01} {value.currency} +
+
+ {/* items */} + {/*
+
+ {value.price*0.01} {value.currency} +
+
*/} + +
- +
- ))} + )) + : + MyActiveOffersList.status ? + ( +
+
+ No Tasks! +
+
+ ) + : + ( +
+

+ Error Occurred! Unable to display Tasks! +

+
+ ) + } diff --git a/src/components/MyTasks/index.jsx b/src/components/MyTasks/index.jsx index 9eea234..4d341ee 100644 --- a/src/components/MyTasks/index.jsx +++ b/src/components/MyTasks/index.jsx @@ -6,7 +6,7 @@ import CommonHead from "../UserHeader/CommonHead"; import TopSellerTopBuyerSliderSection from "../Home/TopSellerTopBuyerSliderSection"; import MyOffersTable from "./MyOffersTable"; -export default function MyTasks({MyActiveOffersList, commonHeadData}) { +export default function MyTasks({MyActiveOffersList, ActiveJobList, commonHeadData}) { const [selectTab, setValue] = useState("today"); const filterHandler = (value) => { setValue(value); @@ -37,7 +37,7 @@ export default function MyTasks({MyActiveOffersList, commonHeadData}) { - +
diff --git a/src/components/Partials/RightSideBar.jsx b/src/components/Partials/RightSideBar.jsx index 4037a62..5d05f63 100644 --- a/src/components/Partials/RightSideBar.jsx +++ b/src/components/Partials/RightSideBar.jsx @@ -46,6 +46,8 @@ export default function RightSideBar() {
+ {userDetails && userDetails?.account_type !== "FAMILY" && ( + <>
{/* image */}
@@ -77,8 +79,7 @@ export default function RightSideBar() {
{/* action */}
- {userDetails && userDetails?.account_type !== "FAMILY" && ( - <> +
{/* image */}
@@ -122,42 +123,45 @@ export default function RightSideBar() {

-
- {/* image */} -
- - - - - -
- {/* name */} -
-

- Resources -

-
-
+ )} + +
+ {/* image */} +
+ + + + + +
+ {/* name */} +
+

+ Resources +

+
+
+
{/**/} diff --git a/src/components/jobPopout/OfferJobPopout.jsx b/src/components/jobPopout/OfferJobPopout.jsx index c1e010b..10f3c5d 100644 --- a/src/components/jobPopout/OfferJobPopout.jsx +++ b/src/components/jobPopout/OfferJobPopout.jsx @@ -1,9 +1,65 @@ -import React from 'react' +import React, {useState} from 'react' import Detail from './popoutcomponent/Detail' import ModalCom from '../Helpers/ModalCom' +import { useNavigate } from 'react-router-dom' +import usersService from '../../services/UsersService' +import LoadingSpinner from '../Spinners/LoadingSpinner' + +import { tableReload } from '../../store/TableReloads' +import { useDispatch } from 'react-redux' function OfferJobPopout({details, onClose, situation}) { + const apiUrl = new usersService() + const navigate = useNavigate() + const dispatch = useDispatch() + + const [requestStatus, setRequestStatus] = useState({loading: false, status: false, message: '', trigger: ''}) + + //FUNCTION TO HANDLE AN OFFER + const handleOffer = ({target:{name}}) => { + const reqData = { + // offer_result: 100, + offer_code: details.contract, + contract: details.contract + } + + //logic to determine the button pressed and set reqDate accordingly + if(name == 'accept'){ + setRequestStatus({loading: true, status: false, message: '', trigger: 'offer'}) + reqData.offer_result = 100 + } + if(name == 'reject'){ + setRequestStatus({loading: true, status: false, message: '', trigger: 'reject'}) + reqData.offer_result = 333 + } + if(name == 'cancel'){ + setRequestStatus({loading: true, status: false, message: '', trigger: 'cancel'}) + reqData.offer_result = 222 + } + + // API CALL + apiUrl.offersResponse(reqData).then(response => { + if(response.status != 200 || response.data.internal_return < 0){ + setRequestStatus({loading: false, status: false, message: `Unable to ${name} Offer, try again later`, trigger: ''}) + return + } + setRequestStatus({loading: false, status: true, message: `Offer ${name}ed Successfully`, trigger: ''}) + setTimeout(()=>{ + onClose() + dispatch(tableReload({type:'JOBTABLE'})) + navigate('/mytask', {replace:true}) + setRequestStatus({loading: false, status: false, message: '', trigger: ''}) + },2000) + }).catch(error => { + setRequestStatus({loading: false, status: false, message: `Opps! An Error Occurred`, trigger: ''}) + }).finally(()=>{ + setTimeout(()=>{ + setRequestStatus({loading: false, status: false, message: '', trigger: ''}) + },5000) + }) + } + return (
@@ -89,24 +145,65 @@ function OfferJobPopout({details, onClose, situation}) { {/* ACTION SECTION */}
- + {requestStatus.loading && requestStatus.trigger == 'offer' ? + + : + + }
- + {requestStatus.loading && requestStatus.trigger == 'reject' ? + + : + + }
+ + {/* ERROR DISPLAY AND SUBMIT BUTTON */} + {requestStatus.message != "" && ( + !requestStatus.status ? + (
+ {requestStatus.message} +
) + : + requestStatus.status && + (
+ {requestStatus.message} +
+ ) + )} + {/* End of error or success display */}
{/* close button */}
- + {requestStatus.loading && requestStatus.trigger == 'cancel' ? + + : + + }
{/* end of close button */}
diff --git a/src/index.css b/src/index.css index f5ff198..5a4e0ee 100644 --- a/src/index.css +++ b/src/index.css @@ -10,6 +10,15 @@ src: url("./assets/fonts/Product Sans Bold.ttf"); } +.offer-slide-item{ + background: rgb(2,0,36); + background: radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(3,51,2,0.782125350140056) 0%, rgba(0,212,255,0.07904411764705888) 0%, rgba(153,182,201,1) 99%); + margin: 5px; + border-radius: 15px; + padding: 15px; + height: 250px; + border-color: beige; +} .banner-630-340{ width: 630px; height: 340px; diff --git a/src/services/UsersService.js b/src/services/UsersService.js index 8408d2d..370da93 100644 --- a/src/services/UsersService.js +++ b/src/services/UsersService.js @@ -532,6 +532,18 @@ class usersService { return this.postAuxEnd("/verifysignuplink", reqData); } + // END POINT FOR OFFER RESPONSE (i.e TO ACCEPT, REJECT, CANCEL, ETC OFFER) + offersResponse(reqData) { + var postData = { + uid: localStorage.getItem("uid"), + member_id: localStorage.getItem("member_id"), + sessionid: localStorage.getItem("session_token"), + action: 15012, + ...reqData, + }; + return this.postAuxEnd("/offersresponse", postData); + } + /* - 20:27:30.118 FLOG_MAX [757411]: REQ_STRING(username) - 20:27:30.118 FLOG_MAX [757411]: REQ_STRING(password) diff --git a/src/views/MyTaskPage.jsx b/src/views/MyTaskPage.jsx index 11d517b..8b5ac2b 100644 --- a/src/views/MyTaskPage.jsx +++ b/src/views/MyTaskPage.jsx @@ -1,37 +1,44 @@ import React, { useContext,useState, useEffect } from "react"; import MyTasks from "../components/MyTasks"; -import UsersService from "../services/UsersService"; +// import UsersService from "../services/UsersService"; import usersService from "../services/UsersService"; -export default function MyTaskPage() { +import { useSelector } from "react-redux"; - const [MyActiveJobList, setMyActiveJobList] = useState([]); - const [MyActiveOffersList, setMyActiveOffersList] = useState([]); +export default function MyTaskPage() { + const {jobListTable} = useSelector((state) => state.tableReload) + + const [MyActiveJobList, setMyActiveJobList] = useState({loading: true, status:false, data:[]}); + const [MyActiveOffersList, setMyActiveOffersList] = useState({loading: true, status:false, data:[]}); const api = new usersService(); const commonHeadData =()=>{ console.log("COMMON HEAD DATA ----------------=====---------------------"); return 0; } const getMyActiveJobList = async () => { + setMyActiveJobList({loading: true, status:false, data:[]}); try { const res = await api.getMyActiveTaskList(); - setMyActiveJobList(res.data); + setMyActiveJobList({loading: false, status:true, data:res.data.result_list}); } catch (error) { + setMyActiveJobList({loading: false, status:false, data:[]}); console.log("Error getting tasks"); } }; const getMyActiveOffersList = async () => { + setMyActiveOffersList({loading: true, status:false, data:[]}); try { const res = await api.getOffersList(); - setMyActiveOffersList(res.data); + setMyActiveOffersList({loading: false, status:true, data:res.data.result_list}); } catch (error) { + setMyActiveOffersList({loading: false, status:false, data:[]}); console.log("Error getting offers"); } }; useEffect(() => { getMyActiveJobList(); getMyActiveOffersList(); - }, []); + }, [jobListTable]); //debugger; return (