diff --git a/src/components/MarketPlace/MainSection.jsx b/src/components/MarketPlace/MainSection.jsx index c10a623..6d5e4fe 100644 --- a/src/components/MarketPlace/MainSection.jsx +++ b/src/components/MarketPlace/MainSection.jsx @@ -9,7 +9,7 @@ export default function MainSection({ }) { // Creating All cart.. let marketCategories = useMemo( - () => ({ All: "All", ...categories }), + () => ({ All: "All Categories", ...categories }), [categories] ); const [tab, setTab] = useState(marketCategories.All); @@ -42,6 +42,7 @@ export default function MainSection({
{mappedArray.map(({ key, value }) => ( tabHandler(key)} className={`md:text-[18px] text-md text-dark-gray dark:text-white hover:text-pink border-b hover:border-pink font-medium cursor-pointer ${ tab === key diff --git a/src/components/MyJobs/MyJobTable.jsx b/src/components/MyJobs/MyJobTable.jsx index be596aa..e9b7487 100644 --- a/src/components/MyJobs/MyJobTable.jsx +++ b/src/components/MyJobs/MyJobTable.jsx @@ -1,11 +1,9 @@ -import React, { useCallback, useEffect, useMemo, useState } from "react"; +import { useCallback, useEffect, useMemo, useState } from "react"; import dataImage2 from "../../assets/images/data-table-user-2.png"; import SelectBox from "../Helpers/SelectBox"; import DeleteJobPopout from "../jobPopout/DeleteJobPopout"; import JobListPopout from "../jobPopout/JobListPopout"; - import LoadingSpinner from "../Spinners/LoadingSpinner"; - import { useSelector } from "react-redux"; import usersService from "../../services/UsersService"; import { handlePagingFunc } from "../Pagination/HandlePagination"; @@ -14,6 +12,23 @@ import EditJobPopOut from "../jobPopout/EditJobPopout"; import { PriceFormatter } from "../Helpers/PriceFormatter"; export default function MyJobTable({ MyJobList, reloadJobList, className }) { + // Getting the categories + const currentJobCart = MyJobList?.data?.categories; + // DropDown Box + const filterCategories = { All: "All Categories", ...currentJobCart }; + + const [selectedCategory, setCategory] = useState( + Object.keys(filterCategories)[0] + ); + + let [jobPopout, setJobPopout] = useState({ show: false, data: {} }); // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW + + let [deleteJobPopout, setDeleteJobPopout] = useState({ + show: false, + data: {}, + }); // STATE TO HOLD THE VALUE OF THE ITEM DETAILS TO DELETE AND DETERMINE WHEN TO SHOW + const [editJob, setEditJob] = useState({ show: false, data: {} }); + const [myCountry, setCountries] = useState(""); const { userDetails: { country }, @@ -45,22 +60,25 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) { getCountryList(); }, [getCountryList]); - const filterCategories = ["All Categories", "Explore", "Featured"]; - const [selectedCategory, setCategory] = useState(filterCategories[0]); - - let [jobPopout, setJobPopout] = useState({ show: false, data: {} }); // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW - - let [deleteJobPopout, setDeleteJobPopout] = useState({ - show: false, - data: {}, - }); // STATE TO HOLD THE VALUE OF THE ITEM DETAILS TO DELETE AND DETERMINE WHEN TO SHOW - const [editJob, setEditJob] = useState({ show: false, data: {} }); - + // Handle Pagination const [currentPage, setCurrentPage] = useState(0); const indexOfFirstItem = Number(currentPage); const indexOfLastItem = Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE); - const currentJobList = MyJobList?.data?.result_list?.slice( + + // Handle Filter Job List + const filterJobList = () => { + if (selectedCategory === "All") return MyJobList?.data?.result_list; + else + return MyJobList?.data?.result_list?.filter((item) => + item.category.includes(selectedCategory) + ); + }; + + const currentJobList = filterJobList(); + + // Handling Filter Pagination + const filteredCurrentJobList = currentJobList?.slice( indexOfFirstItem, indexOfLastItem ); @@ -69,6 +87,96 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) { handlePagingFunc(e, setCurrentPage); }; + // Handles the category selection + const handleSetCategory = (value) => { + setCurrentPage(0); + for (let i in filterCategories) { + if (filterCategories[i] == value) { + setCategory(i); + } + } + }; + + const JobListItem = ({ value, index }) => { + let thePrice = PriceFormatter( + value?.price * 0.01, + value?.currency_code, + value?.currency + ); + return ( + + +
+
+
+ data +
+
+

+ {value.title} +

+
{value.description}
+ + Price: {thePrice} + + + Duration:{" "} + + {" "} + {value.timeline_days} day(s) + + +
+
+ +
+ + | + +
+
+ + + + + + + ); + }; + return (
@@ -94,112 +202,27 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
- - - - - - {selectedCategory === "All Categories" ? ( - <> - {MyJobList && - MyJobList?.data?.result_list && - MyJobList.data?.result_list.length > 0 ? ( - currentJobList.map((value, index) => { - let thePrice = PriceFormatter( - value?.price * 0.01, - value?.currency_code, - value?.currency - ); - return( - - - - - - )}) + <> + {MyJobList && + MyJobList?.data?.result_list && + MyJobList.data?.result_list.length > 0 ? ( + filteredCurrentJobList?.length ? ( + filteredCurrentJobList.map((value, index) => ( + + )) ) : ( - + - )} - - ) : selectedCategory === "Explore" ? ( - <> - ) : ( - <> - )} + ) + ) : ( + + + + )} +
..
-
-
-
- data -
-
-

- {value.title} -

-
{value.description}
- - Price:{" "} - - {thePrice} - - - - Duration:{" "} - - {" "} - {value.timeline_days} day(s) - - -
-
- -
- - | - -
-
- 		- -
No Jobs Avaliable! + No Jobs Available In This Category! +
No Jobs Avaliable!
@@ -209,11 +232,11 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) { prev={currentPage == 0 ? true : false} next={ currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >= - MyJobList?.data?.result_list?.length + currentJobList?.length ? true : false } - data={MyJobList?.data?.result_list} + data={currentJobList} start={indexOfFirstItem} stop={indexOfLastItem} /> diff --git a/src/components/MyJobs/index.jsx b/src/components/MyJobs/index.jsx index 4b2ab77..2f96bf8 100644 --- a/src/components/MyJobs/index.jsx +++ b/src/components/MyJobs/index.jsx @@ -1,5 +1,4 @@ import React, { useState } from "react"; -import { Link } from "react-router-dom"; import Layout from "../Partials/Layout"; import MyJobTable from "./MyJobTable"; import CommonHead from "../UserHeader/CommonHead"; @@ -40,4 +39,4 @@ export default function MyJobs(props) { {/* End of Add Job List Popout */} ); -} \ No newline at end of file +} diff --git a/src/components/MyWallet/WalletComponent/ReferralTable.jsx b/src/components/MyWallet/WalletComponent/ReferralTable.jsx index b4730de..59b3677 100644 --- a/src/components/MyWallet/WalletComponent/ReferralTable.jsx +++ b/src/components/MyWallet/WalletComponent/ReferralTable.jsx @@ -1,60 +1,73 @@ -import React, {useState} from 'react' +import { useState } from "react"; +import PaginatedList from "../../Pagination/PaginatedList"; +import { handlePagingFunc } from "../../Pagination/HandlePagination"; -import PaginatedList from '../../Pagination/PaginatedList'; -import {handlePagingFunc} from '../../Pagination/HandlePagination'; +function ReferralTable({ history }) { + const [currentPage, setCurrentPage] = useState(0); + const indexOfFirstItem = Number(currentPage); + const indexOfLastItem = + Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE); + const currentReferral = history?.data?.slice( + indexOfFirstItem, + indexOfLastItem + ); -function ReferralTable({history}) { - - const [currentPage, setCurrentPage] = useState(0); - const indexOfFirstItem = Number(currentPage); - const indexOfLastItem = Number(indexOfFirstItem)+Number(process.env.REACT_APP_ITEM_PER_PAGE); - const currentReferral = history?.data?.slice(indexOfFirstItem, indexOfLastItem); - - const handlePagination = (e) => { - handlePagingFunc(e,setCurrentPage) - } + const handlePagination = (e) => { + handlePagingFunc(e, setCurrentPage); + }; return ( -
- - - - - - - - - - {history.data.length ? - currentReferral.map((item, index) => ( - - - - - - )) - : - ( - history.error ? - - - - : - ( - - - - ) - ) - } - -
Added/NameEmailStatus
{item.added_date} / {item.firstname} {item.lastname}{item.email}{item.status}
Opps! couldn't get referral history. Try reloading the page
No Item Found on referral List
+
+ + + + + + + + + + {history.data.length ? ( + currentReferral.map((item, index) => ( + + + + + + )) + ) : history.error ? ( + + + + ) : ( + + + + )} + +
Added/NameEmailStatus
+ {item.added_date} / {item.firstname} {item.lastname} + {item.email}{item.status}
+ Opps! couldn't get referral history. Try reloading the page +
No Item Found on referral List
- {/* PAGINATION BUTTON */} - = history?.data?.length ? true : false} data={history?.data} start={indexOfFirstItem} stop={indexOfLastItem} /> - {/* END OF PAGINATION BUTTON */} + {/* PAGINATION BUTTON */} + = + history?.data?.length + ? true + : false + } + data={history?.data} + start={indexOfFirstItem} + stop={indexOfLastItem} + /> + {/* END OF PAGINATION BUTTON */}
- ) + ); } -export default ReferralTable \ No newline at end of file +export default ReferralTable; diff --git a/src/components/Referral/ReferralDisplay.jsx b/src/components/Referral/ReferralDisplay.jsx index 69c415f..6fe5b90 100644 --- a/src/components/Referral/ReferralDisplay.jsx +++ b/src/components/Referral/ReferralDisplay.jsx @@ -1,5 +1,4 @@ import React, { useEffect, useState } from "react"; -import { useNavigate } from "react-router-dom"; import { toast } from "react-toastify"; import usersService from "../../services/UsersService"; import InputCom from "../Helpers/Inputs/InputCom"; @@ -33,7 +32,6 @@ const initialValues = { function ReferralDisplay() { const apiCall = new usersService(); // GET API CALL - const navigate = useNavigate(); let [refHistoryReload, setRefHistoryReload] = useState(false); // Determines when referral history reloads @@ -76,13 +74,13 @@ function ReferralDisplay() { .then((res) => { if (res.data.internal_return < 0) { setError({ - message: "Email already referred", + message: res.data.status, loading: false, status: false, }); return; } else { - toast.success("Message Sent"); + toast.success(res.data.status | "Message Sent!"); setError({ message: "", loading: false, status: true }); setRefHistoryReload((prev) => !prev); } @@ -99,16 +97,7 @@ function ReferralDisplay() { //FUNCTION TO HANDLE SUBMIT const handleSubmit = (values, helpers) => { setError({ message: "", loading: true, status: false }); - - var postData = { - uid: localStorage.getItem("uid"), - member_id: localStorage.getItem("member_id"), - sessionid: localStorage.getItem("session_token"), - action: 11032, - ...values, - }; - - sendReferralMsg(postData); // FUNCTION TO SEND REFERRAL MESSAGE + sendReferralMsg({...values}); // FUNCTION TO SEND REFERRAL MESSAGE }; useEffect(() => { diff --git a/src/components/jobPopout/DeleteJobPopout.jsx b/src/components/jobPopout/DeleteJobPopout.jsx index 0fa75e0..421a96e 100644 --- a/src/components/jobPopout/DeleteJobPopout.jsx +++ b/src/components/jobPopout/DeleteJobPopout.jsx @@ -1,152 +1,173 @@ -import React, { useState } from 'react' -import ModalCom from '../Helpers/ModalCom' -import { useNavigate } from 'react-router-dom' -import usersService from '../../services/UsersService' -import LoadingSpinner from '../Spinners/LoadingSpinner' -import { useDispatch } from 'react-redux' -import { tableReload } from '../../store/TableReloads' +import React, { useState } from "react"; +import ModalCom from "../Helpers/ModalCom"; +import { useNavigate } from "react-router-dom"; +import usersService from "../../services/UsersService"; +import LoadingSpinner from "../Spinners/LoadingSpinner"; +import { useDispatch } from "react-redux"; +import { tableReload } from "../../store/TableReloads"; -function DeleteJobPopout({details, onClose, situation}) { - let dispatch = useDispatch() - const navigate = useNavigate() - const ApiCall = new usersService() +function DeleteJobPopout({ details, onClose, situation }) { + let dispatch = useDispatch(); + const navigate = useNavigate(); + const ApiCall = new usersService(); - let [requestStatus, setRequestStatus] = useState({laoding: false, status:false, message: ''}) // STATE FOR KNOWING WHEN A REQUEST IS MADE TO THE SERVER + let [requestStatus, setRequestStatus] = useState({ + laoding: false, + status: false, + message: "", + }); // STATE FOR KNOWING WHEN A REQUEST IS MADE TO THE SERVER - // FUNCTION CALLED ONCE USER CONFIRM DELETE JOB - const deleteJob = (details) => { - setRequestStatus({laoding: true, status:false, message: ''}) - let reqData = { - job_id: details.job_id, - job_uid: details.job_uid - } // DATA NEEDED BY THE API - - // API CALL TO DELETE A JOB - ApiCall.deleteJob(reqData).then(res => { - if(res.data.internal_return < 0){ - setRequestStatus({laoding: false, status:false, message: 'Could not perform the request, try again!'}) - return - } - setRequestStatus({laoding: false, status:true, message: 'Job deleted successfully'}) - setTimeout(()=>{ - dispatch(tableReload({type:'JOBTABLE'})) - navigate('/myjobs', {replace: true}) - onClose() - }, 1000) - }).catch(error => { - setRequestStatus({laoding: false, status:false, message: 'Opps! something went wrong, try again'}) - }).finally(()=>{ - setTimeout(()=>{ - setRequestStatus({laoding: false, status:false, message: ''}) - }, 5000) - }) - } + // FUNCTION CALLED ONCE USER CONFIRM DELETE JOB + const deleteJob = (details) => { + setRequestStatus({ laoding: true, status: false, message: "" }); + let reqData = { + job_id: details.job_id, + job_uid: details.job_uid, + }; // DATA NEEDED BY THE API + + // API CALL TO DELETE A JOB + ApiCall.deleteJob(reqData) + .then((res) => { + if (res.data.internal_return < 0) { + setRequestStatus({ + laoding: false, + status: false, + message: "Could not perform the request, try again!", + }); + return; + } + setRequestStatus({ + laoding: false, + status: true, + message: "Job deleted successfully", + }); + setTimeout(() => { + dispatch(tableReload({ type: "JOBTABLE" })); + navigate("/myjobs", { replace: true }); + onClose(); + }, 1000); + }) + .catch((error) => { + setRequestStatus({ + laoding: false, + status: false, + message: "Opps! something went wrong, try again", + }); + }) + .finally(() => { + setTimeout(() => { + setRequestStatus({ laoding: false, status: false, message: "" }); + }, 5000); + }); + }; return ( -
-
-

- Delete Job -

+
+
+

+ Delete Job +

+ +
+
+
+ + + + + +
+
+

+ {details.title} +

+

+ Price: {details.thePrice} +

+

+ Duration: {details.timeline_days} day(s) +

+
+
+ + {requestStatus.laoding ? ( + + ) : ( -
-
-
- - - - - -
-
-

- {details.title} -

-

- Price: {details.price * 0.01} -

-

- Duration: {details.timeline_days} day(s) -

-
-
- - {requestStatus.laoding ? - - : - - } -
- - {/* ERROR DISPLAY AND SUBMIT BUTTON */} - {requestStatus.message != "" && ( - !requestStatus.status ? - (
- {requestStatus.message} -
) - : - requestStatus.status && - (
- {requestStatus.message} -
- ) - )} - {/* End of error or success display */} -
+ )}
- - - ) + {/* ERROR DISPLAY AND SUBMIT BUTTON */} + {requestStatus.message != "" && + (!requestStatus.status ? ( +
+ {requestStatus.message} +
+ ) : ( + requestStatus.status && ( +
+ {requestStatus.message} +
+ ) + ))} + {/* End of error or success display */} +
+
+ + ); } -export default DeleteJobPopout \ No newline at end of file +export default DeleteJobPopout; diff --git a/src/components/jobPopout/EditJobPopout.jsx b/src/components/jobPopout/EditJobPopout.jsx index 8801227..d7e143c 100644 --- a/src/components/jobPopout/EditJobPopout.jsx +++ b/src/components/jobPopout/EditJobPopout.jsx @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect, useMemo, useState } from "react"; +import React, { useCallback, useMemo, useState } from "react"; import ModalCom from "../Helpers/ModalCom"; import { Field, Form, Formik } from "formik"; import * as Yup from "yup"; @@ -6,7 +6,6 @@ import InputCom from "../Helpers/Inputs/InputCom"; import LoadingSpinner from "../Spinners/LoadingSpinner"; import usersService from "../../services/UsersService"; import { useNavigate } from "react-router-dom"; - import { tableReload } from "../../store/TableReloads"; import { useDispatch } from "react-redux"; diff --git a/src/components/jobPopout/JobListPopout.jsx b/src/components/jobPopout/JobListPopout.jsx index caedf82..ddc44c4 100644 --- a/src/components/jobPopout/JobListPopout.jsx +++ b/src/components/jobPopout/JobListPopout.jsx @@ -3,7 +3,7 @@ import Detail from "./popoutcomponent/Detail"; import ModalCom from "../Helpers/ModalCom"; import InputCom from "../Helpers/Inputs/InputCom/index"; import SiteService from "../../services/SiteService"; -import { Form, Formik, Field, ErrorMessage } from "formik"; +import { Form, Formik, Field } from "formik"; import * as Yup from "yup"; import LoadingSpinner from "../Spinners/LoadingSpinner"; @@ -210,7 +210,7 @@ function JobListPopout({ details, onClose, situation }) {
- +
diff --git a/src/services/UsersService.js b/src/services/UsersService.js index a8b0358..7d796bc 100644 --- a/src/services/UsersService.js +++ b/src/services/UsersService.js @@ -444,7 +444,14 @@ class usersService { //END POINT CALL FOR SENDING REFERRAL MESSAGE sendReferralMsg(postData) { - return this.postAuxEnd("/sendreferral", postData); + var reqData = { + uid: localStorage.getItem("uid"), + member_id: localStorage.getItem("member_id"), + sessionid: localStorage.getItem("session_token"), + action: 11032, + ...postData + } + return this.postAuxEnd("/sendreferral", reqData); } StartResetPassword(reqData) { diff --git a/src/views/MyJobsPage.jsx b/src/views/MyJobsPage.jsx index b37060d..e0d4993 100644 --- a/src/views/MyJobsPage.jsx +++ b/src/views/MyJobsPage.jsx @@ -1,9 +1,11 @@ -import MyJobs from "../components/MyJobs"; +import MyJobs from "../components/MyJobs"; import { useSelector } from "react-redux"; export default function MyJobsPage() { let { commonHeadBanner } = useSelector((state) => state.commonHeadBanner); const { userJobList } = useSelector((state) => state.userJobList); + + return ( <>