From afead464b06a2c7968910f058e1fb9944c90ec2a Mon Sep 17 00:00:00 2001 From: Ebube Date: Sun, 18 Jun 2023 15:51:59 +0100 Subject: [PATCH] Done! --- src/Routers.jsx | 2 +- src/components/AddJob/AddJob.jsx | 89 ++++++++------ src/components/Cards/AvailableJobsCard.jsx | 62 +++++----- src/components/Cards/HomeBannerOffersCard.jsx | 2 - src/components/MarketPlace/MainSection.jsx | 113 ++++++------------ src/components/MarketPlace/index.jsx | 17 +-- 6 files changed, 128 insertions(+), 157 deletions(-) diff --git a/src/Routers.jsx b/src/Routers.jsx index 7240e91..af3f32f 100644 --- a/src/Routers.jsx +++ b/src/Routers.jsx @@ -89,7 +89,7 @@ export default function Routers() { } /> } /> } /> - } /> + {/* } /> */} } /> } /> } /> diff --git a/src/components/AddJob/AddJob.jsx b/src/components/AddJob/AddJob.jsx index 2930858..b6dc1d6 100644 --- a/src/components/AddJob/AddJob.jsx +++ b/src/components/AddJob/AddJob.jsx @@ -106,7 +106,7 @@ function AddJob({ popUpHandler }) { }); setTimeout(() => { dispatch(tableReload({ type: "JOBTABLE" })); - popUpHandler() + popUpHandler(); }, 1000); }) .catch((err) => { @@ -141,7 +141,7 @@ function AddJob({ popUpHandler }) {
{/* inputs starts here */} {/* country */} -
+
{/* Price */} @@ -208,17 +210,19 @@ function AddJob({ popUpHandler }) { inputHandler={props.handleChange} blurHandler={props.handleBlur} /> - {props.errors.price && props.touched.price && ( -

- {props.errors.price} -

- )} +
+ {props.errors.price && props.touched.price && ( +

+ {props.errors.price} +

+ )} +
{/* Title */} -
+
- {props.errors.title && props.touched.title && ( -

- {props.errors.title} -

- )} +
+ {props.errors.title && props.touched.title && ( +

+ {props.errors.title} +

+ )} +
{/* Description */} -
+
- {props.errors.description && props.touched.description && ( -

- {props.errors.description} -

- )} +
+ {props.errors.description && + props.touched.description && ( +

+ {props.errors.description} +

+ )} +
{/* Details */} -
+
-
+
{/* inputs ends here */}
diff --git a/src/components/Cards/AvailableJobsCard.jsx b/src/components/Cards/AvailableJobsCard.jsx index 30ee011..a76ae0b 100644 --- a/src/components/Cards/AvailableJobsCard.jsx +++ b/src/components/Cards/AvailableJobsCard.jsx @@ -1,10 +1,8 @@ -import React, { useCallback, useEffect, useMemo, useState } from "react"; -import { Link, useNavigate, } from "react-router-dom"; -import { toast } from "react-toastify"; -import localImgLoad from "../../lib/localImgLoad"; -import Icons from "../Helpers/Icons"; +import { useCallback, useEffect, useMemo, useState } from "react"; +import { Link, useNavigate } from "react-router-dom"; import MarketPopUp from "../MarketPlace/PopUp/MarketPopUp"; import usersService from "../../services/UsersService"; +import { PriceFormatter } from "../Helpers/PriceFormatter"; export default function AvailableJobsCard({ className, @@ -12,44 +10,43 @@ export default function AvailableJobsCard({ hidden = false, }) { //debugger; - const [addFavorite, setValue] = useState(datas.whishlisted); const [marketPopUp, setMarketPopUp] = useState({ show: false, data: {} }); - const [manageInt, setManageInt] = useState(null) + const [manageInt, setManageInt] = useState(null); + const [imageUrl, setImageUrl] = useState(""); const navigate = useNavigate(); const apiCall = useMemo(() => new usersService(), []); - - const favoriteHandler = () => { - if (!addFavorite) { - setValue(true); - toast.success("Added to Favorite List"); - } else { - setValue(false); - toast.warn("Remove to Favorite List"); - } - }; - - const marketInterestData = useCallback(async() => { + const marketInterestData = useCallback(async () => { let { offer_code } = datas; let reqData = { offer_code }; try { const manageInt = await apiCall.MarketInterest(reqData); const manageIntRes = await manageInt?.data; - setManageInt(manageIntRes) + setManageInt(manageIntRes); } catch (error) { - throw new Error(error) + throw new Error(error); } + }, [apiCall, datas]); - }, []) + let thePrice = PriceFormatter( + datas?.price * 0.01, + datas?.currency_code, + datas?.currency + ); useEffect(() => { if (!datas) { navigate("/market", { replace: true }); } - marketInterestData() - }, [marketInterestData, datas]) + marketInterestData(); + }, []); + + useEffect(() => { + const imagePath = require(`../../assets/images/${datas.thumbnil}`); // Replace with your directory path for local images + setImageUrl(imagePath); + }, []); return ( <>
{datas.description}
@@ -124,11 +119,14 @@ export default function AvailableJobsCard({

- {datas.price * 0.01} - {datas.currency} | {datas.timeline_days} day(s) + {/* {thePrice} | {datas.timeline_days} day(s) */} + {thePrice}

- ( {datas.offer_code}) + ( {datas.offer_code}) | + + {datas.timeline_days} day(s) ago +

@@ -137,7 +135,7 @@ export default function AvailableJobsCard({ type="button" className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide" onClick={() => { - setMarketPopUp({show: true, data: datas}) + setMarketPopUp({ show: true, data: datas }); }} > View diff --git a/src/components/Cards/HomeBannerOffersCard.jsx b/src/components/Cards/HomeBannerOffersCard.jsx index 236b58d..15c16de 100644 --- a/src/components/Cards/HomeBannerOffersCard.jsx +++ b/src/components/Cards/HomeBannerOffersCard.jsx @@ -9,7 +9,6 @@ export default function HomeBannerOffersCard(props) { let { banner, banner_location } = props?.itemData; if (banner_location === "LOCAL") { const imagePath = require(`../../assets/images/${banner}`); // Replace with your directory path for local images - console.log("This is local"); setImageUrl(imagePath); } else if (banner_location === "URL") setImageUrl(banner); else return null; @@ -30,7 +29,6 @@ export default function HomeBannerOffersCard(props) { {props.itemData.title}
- {/**/}
diff --git a/src/components/MarketPlace/MainSection.jsx b/src/components/MarketPlace/MainSection.jsx index 3bb973e..c10a623 100644 --- a/src/components/MarketPlace/MainSection.jsx +++ b/src/components/MarketPlace/MainSection.jsx @@ -1,26 +1,38 @@ -import React, { useEffect, useState } from "react"; +import React, { useEffect, useMemo, useState } from "react"; import DataIteration from "../Helpers/DataIteration"; import AvailableJobsCard from "../Cards/AvailableJobsCard"; -export default function MainSection({ className, marketPlaceProduct }) { - const [tab, setTab] = useState("all"); - const [products, setProducts] = useState(marketPlaceProduct); +export default function MainSection({ + className, + marketPlaceProduct, + categories, +}) { + // Creating All cart.. + let marketCategories = useMemo( + () => ({ All: "All", ...categories }), + [categories] + ); + const [tab, setTab] = useState(marketCategories.All); + + // Convert to array in order to map + const mappedArray = Object.entries(marketCategories).map(([key, value]) => { + return { key, value }; + }); + + const [products, setProducts] = useState([]); const tabHandler = (value) => { setTab(value); }; useEffect(() => { - if (tab === "artist") { - setProducts(marketPlaceProduct?.slice(0, 3)); - } else if (tab === "market") { - setProducts(marketPlaceProduct?.slice(0, 6)); - } else if (tab === "shop") { - setProducts(marketPlaceProduct?.slice(6, 9)); - } else if (tab === "assets") { - setProducts(marketPlaceProduct?.slice(3, 6)); - } else { + if (tab === marketCategories.All) { setProducts(marketPlaceProduct); + } else { + const filteredProducts = marketPlaceProduct.filter((product) => + product.category.includes(tab) + ); + setProducts(filteredProducts); } - }, [tab, marketPlaceProduct]); + }, [tab, marketPlaceProduct, categories, marketCategories]); return (
@@ -28,69 +40,20 @@ export default function MainSection({ className, marketPlaceProduct }) {
- tabHandler("all")} - 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 === "all" - ? "text-pink border-pink" - : " border-transparent" - }`} - > - All - - - - tabHandler("artist")} - 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 === "artist" - ? "text-pink border-pink" - : " border-transparent" - }`} - > - Featured Artist - - tabHandler("market")} - 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 === "market" - ? "text-pink border-pink" - : " border-transparent" - }`} - > - Open Market - - tabHandler("shop")} - 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 === "shop" - ? "text-pink border-pink" - : " border-transparent" - }`} - > - Partner Shops - - tabHandler("assets")} - 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 === "assets" - ? "text-pink border-pink" - : " border-transparent" - }`} - > - Game Assets - - - + {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 + ? "text-pink border-pink" + : " border-transparent" + }`} + > + {value} + + ))}
- - {/*
*/} - {/* */} - {/*
*/}
diff --git a/src/components/MarketPlace/index.jsx b/src/components/MarketPlace/index.jsx index eb4e78d..4d94e39 100644 --- a/src/components/MarketPlace/index.jsx +++ b/src/components/MarketPlace/index.jsx @@ -1,22 +1,23 @@ -import React from "react"; -// import products from "../../data/marketplace_data.json"; -//import CreateNft from "../Home/CreateNft"; import Layout from "../Partials/Layout"; import MainSection from "./MainSection"; import CommonHead from "../UserHeader/CommonHead"; import { useSelector } from "react-redux"; -export default function MarketPlace({commonHeadData}) { +export default function MarketPlace({ commonHeadData }) { let { jobLists } = useSelector((state) => state.jobLists); const marketData = jobLists?.result_list; + const categories = jobLists?.categories; - // const marketProduct = products.data; return ( <> - - + + ); -} +} \ No newline at end of file