From 840abb4dcc3bd28853ae1f7028ac9231fc7c4206 Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Fri, 19 Jul 2024 17:25:17 +0100
Subject: [PATCH] market reload, and added manage job on market route for owner

---
 src/components/Cards/AvailableJobsCard.jsx    | 67 ++++++++++++++++---
 .../MarketPlace/PopUp/MarketPopUp.jsx         | 17 +++--
 .../jobPopout/PendingJobsPopout.jsx           |  1 +
 src/middleware/AuthRoute.jsx                  |  1 +
 4 files changed, 68 insertions(+), 18 deletions(-)

diff --git a/src/components/Cards/AvailableJobsCard.jsx b/src/components/Cards/AvailableJobsCard.jsx
index 0f768fd..19506da 100644
--- a/src/components/Cards/AvailableJobsCard.jsx
+++ b/src/components/Cards/AvailableJobsCard.jsx
@@ -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 */}
     </>
   );
 }
diff --git a/src/components/MarketPlace/PopUp/MarketPopUp.jsx b/src/components/MarketPlace/PopUp/MarketPopUp.jsx
index ec0f4c0..be1036b 100644
--- a/src/components/MarketPlace/PopUp/MarketPopUp.jsx
+++ b/src/components/MarketPlace/PopUp/MarketPopUp.jsx
@@ -173,11 +173,12 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
                     {name}
                   </label>
                   <div
-                    className={`w-full md:w-3/4 text-slate-900 dark:text-white market-pop ${
-                      name !== "Delivery Detail"
-                        ? " h-full flex items-center"
-                        : " overflow-y-auto max-h-[80px]"
-                    }  ${name === "Description" && "max-h-14 h-full overflow-auto"}`}
+                    className={`w-full p-2 md:w-3/4 text-slate-900 dark:text-white market-pop ${
+                      name == "Description"
+                        ? "max-h-28 h-full overflow-y-auto break-words"
+                        : name == "Delivery Detail" ? " overflow-y-auto h-full max-h-28"
+                        : "h-full flex items-center"
+                    }`}
                   >
                     {danger ? (
                       <p
@@ -193,12 +194,14 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
                             {typeof content !== "object" ? content : null}
                             {typeof content === "object" && (
                               <>
-                                <hr className="mb-1" />
+                                {/* <hr className="mb-1" /> */}
+                                <span className='flex w-full mb-1 h-[1px] bg-slate-500'></span>
                                 <span className="flex items-center gap-2 dark:text-white">
                                   {content?.text}
                                   <strong>{thePrice}</strong>
                                 </span>
-                                <hr className="mt-1" />
+                                <span className='flex w-full mt-1 h-[1px] bg-slate-500'></span>
+                                {/* <hr className="mt-1" /> */}
                               </>
                             )}
                           </>
diff --git a/src/components/jobPopout/PendingJobsPopout.jsx b/src/components/jobPopout/PendingJobsPopout.jsx
index 4d8c936..fe5f5e1 100644
--- a/src/components/jobPopout/PendingJobsPopout.jsx
+++ b/src/components/jobPopout/PendingJobsPopout.jsx
@@ -99,6 +99,7 @@ function PendingJobsPopout({ details, onClose, situation }) {
             onClose();
             dispatch(tableReload({ type: "PENDINGTABLE" }));
             dispatch(tableReload({ type: "JOBTABLE" }));
+            dispatch(tableReload({ type: "MARKETTABLELIST" }));
           }, 4000);
         })
         .catch((error) => {
diff --git a/src/middleware/AuthRoute.jsx b/src/middleware/AuthRoute.jsx
index 9d3c7c1..86b409d 100644
--- a/src/middleware/AuthRoute.jsx
+++ b/src/middleware/AuthRoute.jsx
@@ -217,6 +217,7 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
     }
     // Getting market data
     const getMarketActiveJobList = async () => {
+      dispatch(updateJobs({loading: true}));
       try {
         const res = await apiCall.getActiveJobList();
         dispatch(updateJobs({loading: false, ...res.data}));