Displays countdown if task is yet to pass due, else displays due time

src/components/MyActiveJobs/ActiveJobs.jsx

@@ -4,16 +4,17 @@ import Layout from "../Partials/Layout";
 import { useNavigate } from "react-router-dom";
 import ActiveJobMessage from "./ActiveJobMessage";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
-
 import CountDown from "../Helpers/CountDown";
 
 import usersService from "../../services/UsersService";
 
 function ActiveJobs(props) {
   const ApiCall = new usersService()
+  let navigate = useNavigate()
 
   let { userDetails } = useSelector((state) => state.userDetails);
-  let navigate = useNavigate()
+
+  let [passDue, setPassDue] = useState(new Date() > new Date(props.details?.delivery_date)) // STATE TO KNOW IF TASK IS PASSED DUE TIME
 
   let [messageToSend, setMessageToSend] = useState('') // State to hold the value of message to be sent
 
@@ -147,10 +148,33 @@ function ActiveJobs(props) {
    }
  }
 
+
+  // FUNCTION TO CHECK IF TASK PASS DUE IS REACHED
+  let isPassedDue = () => {
+    // console.log('TESTING',new Date() > new Date(props.details?.delivery_date) )
+    if(new Date() > new Date(props.details?.delivery_date)){
+      setPassDue(true)
+    }else{
+      setPassDue(false)
+    }
+  }
+
+
+  useEffect(()=>{
+    if(!passDue){
+      let passDueInterval = setInterval(()=>{
+        isPassedDue()
+      },1000)
+      return ()=>{
+        clearInterval(passDueInterval)
+      }
+    }
+  },[passDue])
+
   return (
     <Layout>
 
-        <div className="py-[20px] bg-white px-4 rounded-2xl shadow-md md:flex justify-between items-start gap-8">
+        <div className="py-[20px] bg-white px-4 rounded-2xl shadow-md md:flex justify-between items-start gap-16">
             {/* job title */}
             <div className="w-full md:w-8/12">
               <div className="w-full flex justify-start space-x-3 items-start">
@@ -175,9 +199,9 @@ function ActiveJobs(props) {
               </div>
 
               <div className="w-full my-2">
-                <p className="w-full text-base text-right text-sky-blue">
-                  {userDetails.firstname && userDetails.firstname}
-                </p>
+                  <p className="w-full text-base text-right text-sky-blue">
+                    {userDetails.firstname && userDetails.firstname}
+                  </p>
                 <div className="text-base text-slate-700 dark:text-black tracking-wide">
                     <p className="font-semibold text-black">Description: </p>
                     <p className="p-2 border border-sky-blue">{props.details?.description && props.details.description}</p>
@@ -189,19 +213,37 @@ function ActiveJobs(props) {
             {/* job details */}
             <div className="w-full md:w-4/12">
               <p className="text-base text-sky-blue">Delivery Detail</p>
-              <div className="my-1 flex items-start gap-3">
-                <p className="font-semibold">Due: </p>
-                <div className="flex flex-col justify-between">
-                  <p className="text-base text-slate-700 dark:text-black tracking-wide">
-                    <CountDown lastDate={props.details.delivery_date} />
+              {passDue ? 
+              (
+                <div className="my-1">
+                  <p className="text-base text-slate-700 dark:text-black">
+                    <span className="font-semibold">Due: </span>
+                    {props.details?.delivery_date &&
+                      props.details.delivery_date.split(" ")[0]}
                   </p>
-                  <div className="text-base text-slate-700 dark:text-black tracking-wide flex gap-[5px]">
-                    <span>Hrs</span>
-                    <span>Min</span>
-                    <span>Sec</span>
+                  <p className="py-2 text-base text-slate-700 dark:text-black">
+                    {props.details?.delivery_date &&
+                      props.details.delivery_date.split(" ")[1]}
+                  </p>
+                </div>
+              )
+              :
+              (
+                <div className="my-1 flex items-start gap-3">
+                  <p className="font-semibold">Due: </p>
+                  <div className="flex flex-col justify-between">
+                    <p className="text-base text-slate-700 dark:text-black tracking-wide">
+                      <CountDown lastDate={props.details.delivery_date} />
+                    </p>
+                    <div className="text-base text-slate-700 dark:text-black tracking-wide flex gap-[5px]">
+                      <span>Hrs</span>
+                      <span>Min</span>
+                      <span>Sec</span>
+                    </div>
                   </div>
                 </div>
-              </div>
+              )
+              }
 
               <div className="my-1 text-base text-slate-700 dark:text-black tracking-wide flex items-center gap-3">
                 <span className="font-semibold text-black">Duration: </span>