From a9d982386ce6e6f28c286aaf3f1fe08a715f897d Mon Sep 17 00:00:00 2001 From: Ebube Date: Sun, 18 Jun 2023 22:46:42 +0100 Subject: [PATCH 1/5] . --- src/components/MyJobs/MyJobTable.jsx | 187 ++++++++++++++++----------- src/components/MyJobs/index.jsx | 3 + src/views/MyJobsPage.jsx | 5 +- 3 files changed, 118 insertions(+), 77 deletions(-) diff --git a/src/components/MyJobs/MyJobTable.jsx b/src/components/MyJobs/MyJobTable.jsx index be596aa..9ea5b11 100644 --- a/src/components/MyJobs/MyJobTable.jsx +++ b/src/components/MyJobs/MyJobTable.jsx @@ -19,6 +19,8 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) { userDetails: { country }, } = useSelector((state) => state?.userDetails); + const { jobListTable } = useSelector((state) => state.tableReload); + const userApi = useMemo(() => new usersService(), []); // Get Country Api @@ -45,8 +47,40 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) { getCountryList(); }, [getCountryList]); + const [jobCategories, setJobCategories] = useState({ + loading: false, + data: null, + }); + + useEffect(() => { + const getMyJobList = async () => { + setJobCategories({ loading: true, data: null }); + try { + const res = await userApi.getActiveJobList(); + setJobCategories({ loading: false, data: res.data?.categories }); + } catch (error) { + setJobCategories({ loading: true, data: null }); + throw new Error(error); + } + }; + getMyJobList(); + }, [jobListTable]); + + // Creating All cart.. + let _jobCategories = useMemo( + () => ({ All: "All", ...jobCategories.data }), + [jobCategories] + ); + console.log("Checking getJobData", _jobCategories); + + const [selectedCategory, setCategory] = useState(_jobCategories.All); + + // Convert to array in order to map + const mappedArray = Object.entries(_jobCategories).map(([key, value]) => { + return { key, value }; +}); + 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 @@ -110,85 +144,86 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) { value?.currency_code, value?.currency ); - return( - - -
-
-
- data + return ( + + +
+
+
+ data +
+
+

+ {value.title} +

+
{value.description}
+ + Price:{" "} + + {thePrice} + + + + Duration:{" "} + + {" "} + {value.timeline_days} day(s) + + +
-
-

- {value.title} -

-
{value.description}
- - Price:{" "} - - {thePrice} - - - - Duration:{" "} - - {" "} - {value.timeline_days} day(s) - - + +
+ + | +
+ -
- - | - -
-
- - - - - - - )}) + + + + + ); + }) ) : ( No Jobs Avaliable! diff --git a/src/components/MyJobs/index.jsx b/src/components/MyJobs/index.jsx index 4b2ab77..e041593 100644 --- a/src/components/MyJobs/index.jsx +++ b/src/components/MyJobs/index.jsx @@ -11,6 +11,9 @@ export default function MyJobs(props) { setPopUp((prev) => !prev); }; + console.log("Checking getJobData props", props) + + return ( diff --git a/src/views/MyJobsPage.jsx b/src/views/MyJobsPage.jsx index b37060d..ce69c18 100644 --- a/src/views/MyJobsPage.jsx +++ b/src/views/MyJobsPage.jsx @@ -1,9 +1,12 @@ -import MyJobs from "../components/MyJobs"; +import { useEffect, useState } from "react"; +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 ( <> Date: Mon, 19 Jun 2023 21:24:57 +0100 Subject: [PATCH 2/5] Joblist cart --- src/components/MarketPlace/MainSection.jsx | 3 +- src/components/MyJobs/MyJobTable.jsx | 298 +++++++++----------- src/components/MyJobs/index.jsx | 6 +- src/components/Referral/ReferralDisplay.jsx | 1 - 4 files changed, 144 insertions(+), 164 deletions(-) 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 9ea5b11..d3bc803 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,13 +12,28 @@ 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 }, } = useSelector((state) => state?.userDetails); - const { jobListTable } = useSelector((state) => state.tableReload); - const userApi = useMemo(() => new usersService(), []); // Get Country Api @@ -47,54 +60,22 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) { getCountryList(); }, [getCountryList]); - const [jobCategories, setJobCategories] = useState({ - loading: false, - data: null, - }); - - useEffect(() => { - const getMyJobList = async () => { - setJobCategories({ loading: true, data: null }); - try { - const res = await userApi.getActiveJobList(); - setJobCategories({ loading: false, data: res.data?.categories }); - } catch (error) { - setJobCategories({ loading: true, data: null }); - throw new Error(error); - } - }; - getMyJobList(); - }, [jobListTable]); - - // Creating All cart.. - let _jobCategories = useMemo( - () => ({ All: "All", ...jobCategories.data }), - [jobCategories] - ); - console.log("Checking getJobData", _jobCategories); - - const [selectedCategory, setCategory] = useState(_jobCategories.All); - - // Convert to array in order to map - const mappedArray = Object.entries(_jobCategories).map(([key, value]) => { - return { key, value }; -}); - - const filterCategories = ["All Categories", "Explore", "Featured"]; - - 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 [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( + + 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(); + + const filteredCurrentJobList = currentJobList?.slice( indexOfFirstItem, indexOfLastItem ); @@ -103,6 +84,95 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) { handlePagingFunc(e, setCurrentPage); }; + 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 (
@@ -128,113 +198,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!
@@ -244,11 +228,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 e041593..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"; @@ -11,9 +10,6 @@ export default function MyJobs(props) { setPopUp((prev) => !prev); }; - console.log("Checking getJobData props", props) - - return ( @@ -43,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/Referral/ReferralDisplay.jsx b/src/components/Referral/ReferralDisplay.jsx index d5b1a89..8b962b2 100644 --- a/src/components/Referral/ReferralDisplay.jsx +++ b/src/components/Referral/ReferralDisplay.jsx @@ -33,7 +33,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 From 3c87a675810e2d5a2b2dfcbee5ba77a4899a0cb9 Mon Sep 17 00:00:00 2001 From: Ebube Date: Mon, 19 Jun 2023 21:47:40 +0100 Subject: [PATCH 3/5] Changed the status and moved the payload to the users-services --- src/components/Referral/ReferralDisplay.jsx | 15 +++------------ src/services/UsersService.js | 9 ++++++++- 2 files changed, 11 insertions(+), 13 deletions(-) diff --git a/src/components/Referral/ReferralDisplay.jsx b/src/components/Referral/ReferralDisplay.jsx index dff6591..82ea2d5 100644 --- a/src/components/Referral/ReferralDisplay.jsx +++ b/src/components/Referral/ReferralDisplay.jsx @@ -75,13 +75,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); } @@ -98,16 +98,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/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) { From 6eed7bf1f3e41095f625ca6577f30b36b16e18f1 Mon Sep 17 00:00:00 2001 From: Ebube Date: Mon, 19 Jun 2023 22:27:01 +0100 Subject: [PATCH 4/5] Added Price Formatter to this files --- src/components/MyJobs/MyJobTable.jsx | 6 +- .../WalletComponent/ReferralTable.jsx | 117 ++++--- src/components/Referral/ReferralDisplay.jsx | 1 - src/components/jobPopout/DeleteJobPopout.jsx | 297 ++++++++++-------- src/components/jobPopout/EditJobPopout.jsx | 3 +- src/components/jobPopout/JobListPopout.jsx | 4 +- 6 files changed, 230 insertions(+), 198 deletions(-) diff --git a/src/components/MyJobs/MyJobTable.jsx b/src/components/MyJobs/MyJobTable.jsx index d3bc803..bd94149 100644 --- a/src/components/MyJobs/MyJobTable.jsx +++ b/src/components/MyJobs/MyJobTable.jsx @@ -135,7 +135,7 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) { onClick={() => { setDeleteJobPopout({ show: true, - data: value, + data: {thePrice, ...value} }); }} > @@ -148,7 +148,7 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) { onClick={() => { setEditJob({ show: true, - data: value, + data: {thePrice, ...value} }); }} > @@ -162,7 +162,7 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) { +
+
+
+ + + + + +
+
+

+ {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 }) {
- +
From 2d366cd103da1befa02ed0a5bd20aabcd3c7e310 Mon Sep 17 00:00:00 2001 From: Ebube Date: Mon, 19 Jun 2023 22:32:18 +0100 Subject: [PATCH 5/5] . --- src/components/MyJobs/MyJobTable.jsx | 12 ++++++++---- src/views/MyJobsPage.jsx | 1 - 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/src/components/MyJobs/MyJobTable.jsx b/src/components/MyJobs/MyJobTable.jsx index bd94149..e9b7487 100644 --- a/src/components/MyJobs/MyJobTable.jsx +++ b/src/components/MyJobs/MyJobTable.jsx @@ -14,7 +14,7 @@ import { PriceFormatter } from "../Helpers/PriceFormatter"; export default function MyJobTable({ MyJobList, reloadJobList, className }) { // Getting the categories const currentJobCart = MyJobList?.data?.categories; -// DropDown Box + // DropDown Box const filterCategories = { All: "All Categories", ...currentJobCart }; const [selectedCategory, setCategory] = useState( @@ -60,11 +60,13 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) { getCountryList(); }, [getCountryList]); + // Handle Pagination const [currentPage, setCurrentPage] = useState(0); const indexOfFirstItem = Number(currentPage); const indexOfLastItem = Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE); + // Handle Filter Job List const filterJobList = () => { if (selectedCategory === "All") return MyJobList?.data?.result_list; else @@ -75,6 +77,7 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) { const currentJobList = filterJobList(); + // Handling Filter Pagination const filteredCurrentJobList = currentJobList?.slice( indexOfFirstItem, indexOfLastItem @@ -84,6 +87,7 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) { handlePagingFunc(e, setCurrentPage); }; + // Handles the category selection const handleSetCategory = (value) => { setCurrentPage(0); for (let i in filterCategories) { @@ -135,7 +139,7 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) { onClick={() => { setDeleteJobPopout({ show: true, - data: {thePrice, ...value} + data: { thePrice, ...value }, }); }} > @@ -148,7 +152,7 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) { onClick={() => { setEditJob({ show: true, - data: {thePrice, ...value} + data: { thePrice, ...value }, }); }} > @@ -162,7 +166,7 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {