- {props.errors.job_detail && props.touched.job_detail && (
-
- {props.errors.job_detail}
-
- )}
+
+ {props.errors.job_detail && props.touched.job_detail && (
+
+ {props.errors.job_detail}
+
+ )}
+
+
{/* 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