market reload, and added manage job on market route for owner

This commit was merged in pull request #755.
This commit is contained in:
victorAnumudu
2024-07-19 17:25:17 +01:00
parent 9da4ed2282
commit 840abb4dcc
4 changed files with 68 additions and 18 deletions
+56 -11
View File
@@ -1,6 +1,8 @@
import { useState } from "react";
import { PriceFormatter } from "../Helpers/PriceFormatter";
import MarketPopUp from "../MarketPlace/PopUp/MarketPopUp";
import { useSelector } from "react-redux";
import PendingJobsPopout from "../jobPopout/PendingJobsPopout";
export default function AvailableJobsCard({
className,
@@ -11,8 +13,15 @@ export default function AvailableJobsCard({
}) {
//debugger;
const [marketPopUp, setMarketPopUp] = useState({ show: false, data: {} });
const [jobPopout, setJobPopout] = useState({ show: false, data: {} });
const [imageUrl, setImageUrl] = useState("");
const {
userDetails: { uid },
} = useSelector((state) => state?.userDetails); // GETS USER DETAILS
let thePrice = PriceFormatter(
datas?.price * 0.01,
datas?.currency_code,
@@ -40,7 +49,7 @@ export default function AvailableJobsCard({
>
<div
onClick={() => {
setMarketPopUp({ show: true, data: datas });
datas.market_uid != uid ? setMarketPopUp({ show: true, data: datas }) :setJobPopout({ show: true, data: datas });
}}
className="flex flex-col gap-2 justify-between w-full h-full"
>
@@ -80,7 +89,7 @@ export default function AvailableJobsCard({
</div>
<div className="thumbnail-area w-full">
<div
className="w-full h-[236px] rounded-xl overflow-y-auto bg-center bg-cover bg-no-repeat"
className="w-full p-1 h-[150px] rounded-xl overflow-y-auto bg-center bg-cover bg-no-repeat"
// style={{
// backgroundImage: `url('${image}')`,
// }}
@@ -108,15 +117,27 @@ export default function AvailableJobsCard({
</div>
</div>
<div>
<button
{datas.market_uid != uid ?
<button
type="button"
className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
onClick={() => {
setMarketPopUp({ show: true, data: datas });
}}
>
View
</button>
:
<button
type="button"
className="px-4 py-2.5 text-white text-sm bg-yellow-500 rounded-full tracking-wide"
onClick={() => {
setMarketPopUp({ show: true, data: datas });
setJobPopout({ show: true, data: datas });
}}
>
View
</button>
>
Manage
</button>
}
</div>
</div>
</div>
@@ -131,7 +152,7 @@ export default function AvailableJobsCard({
<div className="flex flex-col flex-[0.9]">
<h1
onClick={() => {
setMarketPopUp({ show: true, data: datas });
datas.market_uid != uid ? setMarketPopUp({ show: true, data: datas }) :setJobPopout({ show: true, data: datas })
}}
className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize"
>
@@ -140,7 +161,7 @@ export default function AvailableJobsCard({
<div
onClick={() => {
setMarketPopUp({ show: true, data: datas });
datas.market_uid != uid ? setMarketPopUp({ show: true, data: datas }) :setJobPopout({ show: true, data: datas })
}}
className="my-2"
>
@@ -168,8 +189,9 @@ export default function AvailableJobsCard({
</div>
</div>
<div className="">
{datas.market_uid != uid ?
<button
type="button"
type="button"
className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
onClick={() => {
setMarketPopUp({ show: true, data: datas });
@@ -177,6 +199,17 @@ export default function AvailableJobsCard({
>
View
</button>
:
<button
type="button"
className="px-4 py-2.5 text-white text-sm bg-yellow-500 rounded-full tracking-wide"
onClick={() => {
setJobPopout({ show: true, data: datas });
}}
>
Manage
</button>
}
</div>
</div>
)}
@@ -189,6 +222,18 @@ export default function AvailableJobsCard({
situation={marketPopUp.show}
/>
)}
{/* Active Job Popout */}
{jobPopout.show && (
<PendingJobsPopout
details={datas}
onClose={() => {
setJobPopout({ show: false, data: {} });
}}
situation={jobPopout.show}
/>
)}
{/* End of Active Job Popout */}
</>
);
}