From 93d9afa4177b9ecf2d576cd477603a5b8cb22921 Mon Sep 17 00:00:00 2001 From: Ebube Date: Sun, 2 Jul 2023 01:34:27 +0100 Subject: [PATCH] Moved Offer Table to Dash --- src/components/Home/FamilyDash.jsx | 33 ++-- src/components/Home/index.jsx | 11 +- .../MarketPlace/PopUp/MarketPopUp.jsx | 7 - src/components/MyTasks/MyJobTable.jsx | 59 ++++-- .../MyTasks/MyOffersFamilyTable.jsx | 175 ++++++++++++++++++ src/components/MyTasks/index.jsx | 11 +- src/components/jobPopout/OfferJobPopout.jsx | 20 +- 7 files changed, 256 insertions(+), 60 deletions(-) create mode 100644 src/components/MyTasks/MyOffersFamilyTable.jsx diff --git a/src/components/Home/FamilyDash.jsx b/src/components/Home/FamilyDash.jsx index 05f16e0..492312c 100644 --- a/src/components/Home/FamilyDash.jsx +++ b/src/components/Home/FamilyDash.jsx @@ -3,25 +3,22 @@ import datas from "../../data/product_data.json"; import TopSellerTopBuyerSliderSection from "./TopSellerTopBuyerSliderSection"; import CommonHead from "../UserHeader/CommonHead"; import FamilyActiveLSlde from "./FamilyActiveLSlde"; -import OverviewSection from "../ActiveBids/OverviewSection"; import ParentWaiting from "../MyPendingJobs/ParentWaiting"; - +import MyOffersFamilyTable from "../MyTasks/MyOffersFamilyTable"; export default function FamilyDash(props) { + console.log("PROPS IN FAMILY DASH->", props); - console.log("PROPS IN FAMILY DASH->",props); - - const trending = datas.datas; - return ( -
-
- - - {/**/} - -
-
- ); -} \ No newline at end of file + const trending = datas.datas; + return ( +
+
+ + + + {/**/} + +
+
+ ); +} diff --git a/src/components/Home/index.jsx b/src/components/Home/index.jsx index f3e148d..b1be755 100644 --- a/src/components/Home/index.jsx +++ b/src/components/Home/index.jsx @@ -39,14 +39,17 @@ export default function Home(props) { return (
- {userDetails && userDetails?.account_type == "FAMILY" && ( - - )} - {userDetails && userDetails?.account_type == "FULL" && ( + {userDetails && userDetails?.account_type == "FAMILY" ? ( + + ) : userDetails && userDetails?.account_type == "FULL" ? ( + ) : ( +
+ You are not logged in or your account type is not supported. +
)}
diff --git a/src/components/MarketPlace/PopUp/MarketPopUp.jsx b/src/components/MarketPlace/PopUp/MarketPopUp.jsx index 3934096..d04912a 100644 --- a/src/components/MarketPlace/PopUp/MarketPopUp.jsx +++ b/src/components/MarketPlace/PopUp/MarketPopUp.jsx @@ -119,13 +119,6 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => { .replace(/"/g, '"') .replace(/&/g, "&"); - console.log("first wait", { - manageInt, - ManageInterest, - MarketDetail, - marketMsg, - }); - return (
diff --git a/src/components/MyTasks/MyJobTable.jsx b/src/components/MyTasks/MyJobTable.jsx index 775a694..fb4e74f 100644 --- a/src/components/MyTasks/MyJobTable.jsx +++ b/src/components/MyTasks/MyJobTable.jsx @@ -7,6 +7,7 @@ import { useNavigate, useLocation } from "react-router-dom"; import { PriceFormatter } from "../Helpers/PriceFormatter"; const noTasksBg = require("../../assets/images/no-task-background.jpg"); +const noFamilyTasksBg = require("../../assets/images/family-no-task-background.jpg"); export default function MyJobTable({ className, ActiveJobList, Account }) { let navigate = useNavigate(); @@ -25,14 +26,17 @@ export default function MyJobTable({ className, ActiveJobList, Account }) { handlePagingFunc(e, setCurrentPage); }; + let accountType = Account?.account_type == "FULL" + // To navigate to task const [btnLoader, setBtnLoader] = useState(false); const navigateMarket = () => { setBtnLoader(true); - setTimeout(() => { - navigate(Account == "FULL" ? "/market" : "/", { replace: true }); + const timeoutId = setTimeout(() => { + navigate(accountType ? "/market" : "/", { replace: true }); setBtnLoader(false); }, 2500); + return () => clearTimeout(timeoutId); }; return ( @@ -42,12 +46,12 @@ export default function MyJobTable({ className, ActiveJobList, Account }) { } bg-cover bg-center`} style={{ backgroundImage: !ActiveJobList?.data.length - ? `url('${noTasksBg}')` + ? `url('${accountType ? noTasksBg : noFamilyTasksBg}')` : "none", }} > {/* Adding this dark overlay in order to see the texts properly */} - {!ActiveJobList?.data.length && ( + {!ActiveJobList?.data.length && accountType && (
)} {ActiveJobList?.data.length > 0 && ActiveJobList.loading && ( @@ -134,20 +138,41 @@ export default function MyJobTable({ className, ActiveJobList, Account }) { })} {ActiveJobList?.data?.length <= 0 && ( -
-
- You currently have "0" task -
- + You currently have {accountType ? '"0"' : "no"} task +
+
+ +
)} {ActiveJobList?.internal_return < 0 && ( diff --git a/src/components/MyTasks/MyOffersFamilyTable.jsx b/src/components/MyTasks/MyOffersFamilyTable.jsx new file mode 100644 index 0000000..7c7c2b0 --- /dev/null +++ b/src/components/MyTasks/MyOffersFamilyTable.jsx @@ -0,0 +1,175 @@ +import { useRef, useState } from "react"; +import Icons from "../Helpers/Icons"; +import SliderCom from "../Helpers/SliderCom"; + +import OfferJobPopout from "../jobPopout/OfferJobPopout"; +import LoadingSpinner from "../Spinners/LoadingSpinner"; +import { PriceFormatter } from "../Helpers/PriceFormatter"; + +export default function MyOffersFamilyTable({ className, MyActiveOffersList }) { + let [offerPopout, setOfferPopout] = useState({ show: false, data: {} }); // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW + const settings = { + arrows: false, + dots: false, + infinite: MyActiveOffersList?.result_list?.length > 4, + autoplay: true, + slidesToShow: 4, + slidesToScroll: 1, + responsive: [ + { + breakpoint: 426, + settings: { + slidesToShow: 2, + slidesToScroll: 1, + infinite: MyActiveOffersList?.result_list?.length > 2, + }, + }, + ], + }; + + console.log("YES WE SEE OFFERS", MyActiveOffersList); + const sellSlider = useRef(null); + //const buySlider = useRef(null); + const prevHandler = (value) => { + if (value === "sell") { + sellSlider.current.slickPrev(); + } + // if (value === "buy") { + // buySlider.current.slickPrev(); + // } + }; + const nextHandler = (value) => { + if (value === "sell") { + sellSlider.current.slickNext(); + } + // if (value === "buy") { + // buySlider.current.slickNext(); + // } + }; + + if (!MyActiveOffersList || MyActiveOffersList?.result_list?.length == 0) { + return ""; // want blank or no appear when no items + } + + return ( + <> +
+
+
+
+
+

+ You Have Task(s) Waiting For You +

+
+ + +
+
+
+ + {MyActiveOffersList && + MyActiveOffersList?.result_list?.length > 0 && + MyActiveOffersList?.result_list?.map((value, index) => { + let thePrice = PriceFormatter( + value?.price * 0.01, + value?.currency_code, + value?.currency + ); + return ( +
+
+ {/* title */} +
+

+ {value.title} +

+
+ {/* username */} +
+

+ {value.timeline_days} Days +

+
+ {thePrice} +
+
+ +
+
+ ); + })} + +
+
+
+
+ + {/* Offer Job Popout */} + {offerPopout.show && ( + { + setOfferPopout({ show: false, data: {} }); + }} + situation={offerPopout.show} + /> + )} + {/* End of Offer Job Popout */} +
+ + ); +} diff --git a/src/components/MyTasks/index.jsx b/src/components/MyTasks/index.jsx index ddcba34..a6b6940 100644 --- a/src/components/MyTasks/index.jsx +++ b/src/components/MyTasks/index.jsx @@ -11,7 +11,7 @@ export default function MyTasks({ ActiveJobList, commonHeadData, }) { - const { userDetails: account_type } = useSelector( + const { userDetails } = useSelector( (state) => state?.userDetails ); @@ -19,6 +19,11 @@ export default function MyTasks({ const filterHandler = (value) => { setValue(value); }; + + let accountType = userDetails?.account_type == "FULL" + + console.log("Active something >>", MyActiveOffersList) + return ( @@ -42,14 +47,14 @@ export default function MyTasks({ > - {MyActiveOffersList && + {MyActiveOffersList && accountType && MyActiveOffersList?.result_list?.length >= 0 && ( )} - + diff --git a/src/components/jobPopout/OfferJobPopout.jsx b/src/components/jobPopout/OfferJobPopout.jsx index 149cecf..0427522 100644 --- a/src/components/jobPopout/OfferJobPopout.jsx +++ b/src/components/jobPopout/OfferJobPopout.jsx @@ -141,7 +141,13 @@ function OfferJobPopout({ details, onClose, situation }) { {/* INPUT SECTION */}
- +
@@ -151,20 +157,12 @@ function OfferJobPopout({ details, onClose, situation }) {
- +