Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Ebube
|
bbf03b2b10 | ||
|
Ebube
|
afead464b0 | ||
 ameye
|
44e2402cb3 |
+1
-1
@@ -89,7 +89,7 @@ export default function Routers() {
|
||||
<Route exact path="/notification" element={<Notification />} />
|
||||
<Route exact path="/mytask" element={<MyTaskPage />} />
|
||||
<Route exact path="/myjobs" element={<MyJobsPage />} />
|
||||
<Route exact path="/add-job" element={<AddJobPage />} />
|
||||
{/* <Route exact path="/add-job" element={<AddJobPage />} /> */}
|
||||
<Route exact path="/my-active-jobs" element={<MyActiveJobsPage />} />
|
||||
<Route exact path="/my-pastdue-jobs" element={<MyPastDueJobsPage />} />
|
||||
<Route exact path="/my-pending-jobs" element={<MyPendingJobsPage />} />
|
||||
|
||||
@@ -106,7 +106,7 @@ function AddJob({ popUpHandler }) {
|
||||
});
|
||||
setTimeout(() => {
|
||||
dispatch(tableReload({ type: "JOBTABLE" }));
|
||||
popUpHandler()
|
||||
popUpHandler();
|
||||
}, 1000);
|
||||
})
|
||||
.catch((err) => {
|
||||
@@ -141,7 +141,7 @@ function AddJob({ popUpHandler }) {
|
||||
<div className="fields w-full">
|
||||
{/* inputs starts here */}
|
||||
{/* country */}
|
||||
<div className="xl:flex xl:space-x-7 mb-6">
|
||||
<div className="xl:flex xl:space-x-7 mb-[5px]">
|
||||
<div className="field w-full mb-6 xl:mb-0">
|
||||
<label
|
||||
htmlFor="country"
|
||||
@@ -187,11 +187,13 @@ function AddJob({ popUpHandler }) {
|
||||
</option>
|
||||
)}
|
||||
</select>
|
||||
{props.errors.country && props.touched.country && (
|
||||
<p className="text-sm text-red-500">
|
||||
{props.errors.country}
|
||||
</p>
|
||||
)}
|
||||
<div className={`${!props.errors && "invisible"} h-5`}>
|
||||
{props.errors.country && props.touched.country && (
|
||||
<p className="text-sm text-red-500">
|
||||
{props.errors.country}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Price */}
|
||||
@@ -208,17 +210,19 @@ function AddJob({ popUpHandler }) {
|
||||
inputHandler={props.handleChange}
|
||||
blurHandler={props.handleBlur}
|
||||
/>
|
||||
{props.errors.price && props.touched.price && (
|
||||
<p className="text-sm text-red-500">
|
||||
{props.errors.price}
|
||||
</p>
|
||||
)}
|
||||
<div className={`${!props.errors && "invisible"} h-5`}>
|
||||
{props.errors.price && props.touched.price && (
|
||||
<p className="text-sm text-red-500">
|
||||
{props.errors.price}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
|
||||
<div className="field w-full mb-6">
|
||||
<div className="field w-full mb-[5px]">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
label="Title"
|
||||
@@ -226,20 +230,21 @@ function AddJob({ popUpHandler }) {
|
||||
inputBg="bg-slate-100"
|
||||
type="text"
|
||||
name="title"
|
||||
// placeholder="Enter Job Title"
|
||||
value={props.values.title}
|
||||
inputHandler={props.handleChange}
|
||||
blurHandler={props.handleBlur}
|
||||
/>
|
||||
{props.errors.title && props.touched.title && (
|
||||
<p className="text-sm text-red-500">
|
||||
{props.errors.title}
|
||||
</p>
|
||||
)}
|
||||
<div className={`${!props.errors && "invisible"} h-5`}>
|
||||
{props.errors.title && props.touched.title && (
|
||||
<p className="text-sm text-red-500">
|
||||
{props.errors.title}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div className="field w-full mb-6">
|
||||
<div className="field w-full mb-[5px]">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
label="Description"
|
||||
@@ -247,20 +252,22 @@ function AddJob({ popUpHandler }) {
|
||||
inputBg="bg-slate-100"
|
||||
type="text"
|
||||
name="description"
|
||||
// placeholder="Enter a description"
|
||||
value={props.values.description}
|
||||
inputHandler={props.handleChange}
|
||||
blurHandler={props.handleBlur}
|
||||
/>
|
||||
{props.errors.description && props.touched.description && (
|
||||
<p className="text-sm text-red-500">
|
||||
{props.errors.description}
|
||||
</p>
|
||||
)}
|
||||
<div className={`${!props.errors && "invisible"} h-5`}>
|
||||
{props.errors.description &&
|
||||
props.touched.description && (
|
||||
<p className="text-sm text-red-500">
|
||||
{props.errors.description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Details */}
|
||||
<div className="field w-full mb-6">
|
||||
<div className="field w-full mb-[5px]">
|
||||
<label
|
||||
htmlFor="Job Delivery Details"
|
||||
className='className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"'
|
||||
@@ -277,14 +284,16 @@ function AddJob({ popUpHandler }) {
|
||||
onChange={props.handleChange}
|
||||
onBlur={props.handleBlur}
|
||||
/>
|
||||
{props.errors.job_detail && props.touched.job_detail && (
|
||||
<p className="text-sm text-red-500">
|
||||
{props.errors.job_detail}
|
||||
</p>
|
||||
)}
|
||||
<div className={`${!props.errors && "invisible"} h-5`}>
|
||||
{props.errors.job_detail && props.touched.job_detail && (
|
||||
<p className="text-sm text-red-500">
|
||||
{props.errors.job_detail}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="field w-full mb-6">
|
||||
<div className="field w-full mb-[5px]">
|
||||
<div className={`flex items-center justify-between mb-2.5`}>
|
||||
<label
|
||||
className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"
|
||||
@@ -313,12 +322,14 @@ function AddJob({ popUpHandler }) {
|
||||
</option>
|
||||
))}
|
||||
</Field>
|
||||
{props.errors.timeline_days &&
|
||||
props.touched.timeline_days && (
|
||||
<p className="text-sm text-red-500">
|
||||
{props.errors.timeline_days}
|
||||
</p>
|
||||
)}
|
||||
<div className={`${!props.errors && "invisible"} h-5`}>
|
||||
{props.errors.timeline_days &&
|
||||
props.touched.timeline_days && (
|
||||
<p className="text-sm text-red-500">
|
||||
{props.errors.timeline_days}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{/* inputs ends here */}
|
||||
</div>
|
||||
|
||||
@@ -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 (
|
||||
<>
|
||||
<div
|
||||
@@ -87,11 +84,9 @@ export default function AvailableJobsCard({
|
||||
</div>
|
||||
<div className="thumbnail-area w-full">
|
||||
<div
|
||||
className="w-full h-[236px] p-6 rounded-xl overflow-hidden"
|
||||
className="w-full h-[236px] p-6 rounded-xl overflow-hidden bg-center bg-cover bg-no-repeat"
|
||||
style={{
|
||||
background: `url(${localImgLoad(
|
||||
`images/${datas.thumbnil}`
|
||||
)}) 0% 0% / cover no-repeat`,
|
||||
backgroundImage: `url('${imageUrl}')`,
|
||||
}}
|
||||
>
|
||||
<div className="flex justify-center">{datas.description}</div>
|
||||
@@ -124,11 +119,14 @@ export default function AvailableJobsCard({
|
||||
<div className="flex items-center space-x-2">
|
||||
<div>
|
||||
<p className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white">
|
||||
{datas.price * 0.01}
|
||||
{datas.currency} | {datas.timeline_days} day(s)
|
||||
{/* {thePrice} | {datas.timeline_days} day(s) */}
|
||||
{thePrice}
|
||||
</p>
|
||||
<p className="text-sm text-lighter-gray">
|
||||
( {datas.offer_code})
|
||||
( {datas.offer_code}) |
|
||||
<span className="italic ml-1">
|
||||
{datas.timeline_days} day(s) ago
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -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
|
||||
|
||||
@@ -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) {
|
||||
<span className="heroSilderTitle">{props.itemData.title}</span>
|
||||
</h1>
|
||||
</div>
|
||||
{/*<SelectBox datas={filterDatas} action={dataSetHandler} />*/}
|
||||
</div>
|
||||
<div className="h-[233px]">
|
||||
<div className="siderCardDescription">
|
||||
|
||||
@@ -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 (
|
||||
<div className={`market-place-section w-full ${className || ""}`}>
|
||||
@@ -28,69 +40,20 @@ export default function MainSection({ className, marketPlaceProduct }) {
|
||||
<div className="filter-navigate-area lg:flex justify-between mb-8 items-center">
|
||||
<div className="tab-item lg:mb-0 mb-5">
|
||||
<div className="md:flex md:space-x-8 space-x-2">
|
||||
<span
|
||||
onClick={() => 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
|
||||
</span>
|
||||
|
||||
|
||||
<span
|
||||
onClick={() => 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
|
||||
</span>
|
||||
<span
|
||||
onClick={() => 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
|
||||
</span>
|
||||
<span
|
||||
onClick={() => 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
|
||||
</span>
|
||||
<span
|
||||
onClick={() => 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
|
||||
</span>
|
||||
|
||||
|
||||
{mappedArray.map(({ key, value }) => (
|
||||
<span
|
||||
onClick={() => 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}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/*<div className="search-item flex lg:flex-none justify-end">*/}
|
||||
{/* <SearchCom*/}
|
||||
{/* className="lg:bg-transparent"*/}
|
||||
{/* inputClasses="lg:bg-transparent"*/}
|
||||
{/* />*/}
|
||||
{/*</div>*/}
|
||||
</div>
|
||||
<div className="filter-navigate-content w-full min-h-screen">
|
||||
<div className="grid lg:grid-cols-3 sm:grid-cols-2 gap-[30px]">
|
||||
|
||||
@@ -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 (
|
||||
<>
|
||||
<Layout>
|
||||
<CommonHead commonHeadData={commonHeadData} />
|
||||
<MainSection marketPlaceProduct={marketData} className="mb-10" />
|
||||
<CommonHead commonHeadData={commonHeadData} />
|
||||
<MainSection
|
||||
marketPlaceProduct={marketData}
|
||||
categories={categories}
|
||||
className="mb-10"
|
||||
/>
|
||||
</Layout>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user