From 4d3fe6a7993054eba9097a57b151450731274141 Mon Sep 17 00:00:00 2001 From: Ebube Date: Mon, 19 Jun 2023 21:24:57 +0100 Subject: [PATCH] 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