.

src/components/Helpers/CountDown.jsx

@@ -1,59 +1,64 @@
-/* eslint-disable no-underscore-dangle */
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 
 function CountDown({ lastDate = "" }) {
-  //   const [showDate, setDate] = useState(0);
-  const [showHour, setHour] = useState(0);
-  const [showMinute, setMinute] = useState(0);
-  const [showSecound, setDateSecound] = useState(0);
-  // count Down
-  const provideDate = new Date(lastDate);
-  // format date
-  const year = provideDate.getFullYear();
-  const month = provideDate.getMonth();
-  //   console.log(month);
-  const date = provideDate.getDate();
-  //   console.log(date);
-  const hours = provideDate.getHours();
-  //   console.log(hours);
-  const minutes = provideDate.getMinutes();
-  //   console.log(minutes);
-  const seconds = provideDate.getSeconds();
-  //   console.log(seconds);
-
-  // date calculation logic
-  const _seconds = 1000;
-  const _minutes = _seconds * 60;
-  const _hours = _minutes * 60;
-  const _date = _hours * 24;
-
-  // interval function
-  const startInterval = () => {
-    const timer = setInterval(() => {
-      const now = new Date();
-      const distance =
-        new Date(year, month, date, hours, minutes, seconds).getTime() -
-        now.getTime();
-      if (distance < 0) {
-        clearInterval(timer);
-        return;
-      }
-      //   setDate(Math.floor(distance / _date));
-      setMinute(Math.floor((distance % _hours) / _minutes));
-      setHour(Math.floor((distance % _date) / _hours));
-      setDateSecound(Math.floor((distance % _minutes) / _seconds));
-    }, 1000);
-  };
-
-  // effect
-  useEffect(() => {
-    if (lastDate !== "") {
-      startInterval();
-    }
+  // State to store the countdown values
+  const [countdownValues, setCountdownValues] = useState({
+    showHour: 0,
+    showMinute: 0,
+    showSecond: 0,
   });
+
+  useEffect(() => {
+    if (lastDate) {
+      // Interval function to update countdown values
+      const intervalId = setInterval(() => {
+        const now = new Date().getTime();
+        const targetDate = new Date(lastDate).getTime();
+        const distance = targetDate - now;
+
+        if (distance < 0) {
+          // If the countdown has reached zero or gone past the target date, clear the interval
+          clearInterval(intervalId);
+          setCountdownValues({
+            showHour: 0,
+            showMinute: 0,
+            showSecond: 0,
+          });
+          return;
+        }
+
+        // Calculate the countdown values (days, hours, minutes, seconds)
+        const days = Math.floor(distance / (1000 * 60 * 60 * 24));
+        const hours = Math.floor(
+          (distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
+        );
+        const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+        const seconds = Math.floor((distance % (1000 * 60)) / 1000);
+
+        // since we don't have a slot for days...
+        const totalHours = days * 24 + hours;
+
+        // Update the countdown values in the state
+        setCountdownValues({
+          showHour: totalHours,
+          showMinute: minutes,
+          showSecond: seconds,
+        });
+      }, 1000);
+
+      // Clean up the interval on component unmount or when the lastDate prop changes
+      return () => clearInterval(intervalId);
+    }
+  }, [lastDate]);
+
+  // Destructure the countdown values from the state
+  const { showHour, showMinute, showSecond } = countdownValues;
+
   return (
     <span>
-      {showHour} : {showMinute} : {showSecound}
+      {showHour < 10 ? "0" + showHour : showHour} :{" "}
+      {showMinute < 10 ? "0" + showMinute : showMinute} :{" "}
+      {showSecond < 10 ? "0" + showSecond : showSecond}
     </span>
   );
 }