From 16e5656422ca670752c13d30e1250bf57b9c9898 Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Wed, 27 Mar 2024 18:39:04 +0100
Subject: [PATCH] rendered video component for media task type

---
 src/components/Cards/OfferCard.jsx              | 12 ++++++++++--
 src/components/FamilyAcc/FamilyManageTabs.jsx   |  1 +
 src/components/FamilyAcc/Tabs/FamilyPending.jsx |  2 ++
 src/components/jobPopout/PendingJobsPopout.jsx  |  2 ++
 4 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/components/Cards/OfferCard.jsx b/src/components/Cards/OfferCard.jsx
index 67d93e8..019cd3f 100644
--- a/src/components/Cards/OfferCard.jsx
+++ b/src/components/Cards/OfferCard.jsx
@@ -1,7 +1,10 @@
+import { Suspense, lazy } from "react";
 import localImgLoad from "../../lib/localImgLoad";
 import CountDown from "../Helpers/CountDown";
 import { PriceFormatter } from "../Helpers/PriceFormatter";
 
+const VideoElement = lazy(() => import("../VideoCom/VideoElement")); // LAZY IMPORTING VIDEO COMPONENT
+
 export default function OfferCard({
   datas,
   hidden = false,
@@ -19,9 +22,13 @@ export default function OfferCard({
   return (
     <div className="card-style-one flex flex-col justify-between w-full h-[387px] bg-white dark:bg-dark-white   p-3 pb rounded-2xl">
       <div className="content">
-        {/* thumbnail */}
         <div className="w-full h-40">
-          {/* thumbnail image */}
+          {/* thumbnail image/video */}
+          {datas.job_type == "MEDIA" ?
+          <Suspense fallback={<p>Loading...</p>}>
+            <VideoElement videoId={datas?.media_uid} />
+          </Suspense>
+          :
           <div
             className="thumbnail w-full h-full rounded-xl overflow-hidden px-4 pt-4"
             style={{
@@ -30,6 +37,7 @@ export default function OfferCard({
           >
             {hidden && <div className="flex justify-center"></div>}
           </div>
+          }
         </div>
         {/* details */}
         <div className="details">
diff --git a/src/components/FamilyAcc/FamilyManageTabs.jsx b/src/components/FamilyAcc/FamilyManageTabs.jsx
index a3a3033..ebb1099 100644
--- a/src/components/FamilyAcc/FamilyManageTabs.jsx
+++ b/src/components/FamilyAcc/FamilyManageTabs.jsx
@@ -195,6 +195,7 @@ export default function FamilyManageTabs({
         familyData={details.familyPending.data}
         accountDetails={accountDetails}
         loader={details.familyPending.loading}
+        setUpdatePage={setUpdatePage}
       />
     ),
     Account: (
diff --git a/src/components/FamilyAcc/Tabs/FamilyPending.jsx b/src/components/FamilyAcc/Tabs/FamilyPending.jsx
index a09ed1f..d635988 100644
--- a/src/components/FamilyAcc/Tabs/FamilyPending.jsx
+++ b/src/components/FamilyAcc/Tabs/FamilyPending.jsx
@@ -9,6 +9,7 @@ export default function FamilyPending({
   className,
   accountDetails,
   loader,
+  setUpdatePage,
 }) {
   let [jobPopout, setJobPopout] = useState({ show: false, data: {} }); // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW
 
@@ -151,6 +152,7 @@ export default function FamilyPending({
           details={jobPopout.data}
           onClose={() => {
             setJobPopout({ show: false, data: {} });
+            setUpdatePage(prev => !prev);
           }}
           situation={jobPopout.show}
         />
diff --git a/src/components/jobPopout/PendingJobsPopout.jsx b/src/components/jobPopout/PendingJobsPopout.jsx
index e7609e9..4d8c936 100644
--- a/src/components/jobPopout/PendingJobsPopout.jsx
+++ b/src/components/jobPopout/PendingJobsPopout.jsx
@@ -71,7 +71,9 @@ function PendingJobsPopout({ details, onClose, situation }) {
         .pendingJobSendTome(reqData)
         .then((res) => {
           setRequestMessage({ status: true, message: res.data.status });
+          dispatch(tableReload({ type: "PENDINGTABLE" }));
           setTimeout(() => {
+            onClose()
             setPendingJobLoader({ extend: false, offer: false });
             setRequestMessage({ status: false, message: "" });
           }, 4000);
-- 
2.34.1