Refactored countdown to display instantly

scaffold-eth · Sep 21, 2023 · 9665226 · 9665226
1 parent d4479b4
commit 9665226
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 11 deletions.
diff --git a/packages/nextjs/components/lists/ListHeader.tsx b/packages/nextjs/components/lists/ListHeader.tsx
@@ -119,8 +119,8 @@ function ListHeader({ displayList, titleHeader, display, onCategoryChange, onShu
               onClick={() => handleButtonClick(`${category.category}`)}
               className={`px-4 py-2 rounded-md font-normal text-base leading-6 font-inter  ${
                 active == `${category.category}`
-                  ? "bg-secondary-content text-white dark:bg-black"
-                  : "bg-customWhite text-customGrayBtn"
+                  ? "bg-[#FF0520] text-white"
+                  : "bg-customWhite dark:bg-slate-700 text-customGrayBtn"
               }`}
             >
               {category.category}

diff --git a/packages/nextjs/components/op/projects/YourBallotCountdown.tsx b/packages/nextjs/components/op/projects/YourBallotCountdown.tsx
@@ -1,18 +1,22 @@
 import { useEffect, useState } from "react";
 
 interface CountdownTimerProps {
-  deadline: number; // Specify the type for the deadline prop
+  deadline: number;
 }
 
 const CountdownTimer: React.FC<CountdownTimerProps> = ({ deadline }) => {
-  const [timeRemaining, setTimeRemaining] = useState<string | null>(null);
+  const [timeRemaining, setTimeRemaining] = useState<string | null>(
+    calculateTimeRemaining(deadline), // Initialize with the initial value
+  );
+  const [isEnded, setIsEnded] = useState<boolean>(false);
 
   useEffect(() => {
     const timer = setInterval(() => {
       const now = Math.floor(new Date().getTime() / 1000);
 
       if (now >= deadline) {
         setTimeRemaining(null);
+        setIsEnded(true);
         clearInterval(timer);
       } else {
         const timeRemainingSeconds = deadline - now;
@@ -27,16 +31,16 @@ const CountdownTimer: React.FC<CountdownTimerProps> = ({ deadline }) => {
           setTimeRemaining(`${hours}h:${minutes}m:${seconds}s`);
         }
       }
-    }, 1000);
+    }, 1000); // Update every 1 second
 
     return () => clearInterval(timer);
   }, [deadline]);
 
   const deadlineMessage = () => {
-    const now = Math.floor(new Date().getTime() / 1000);
-    if (now >= deadline) {
+    if (isEnded) {
       return {
         message: "Ended on",
+        formattedDate: new Date(deadline * 1000).toLocaleString(),
       };
     } else {
       return {
@@ -48,11 +52,30 @@ const CountdownTimer: React.FC<CountdownTimerProps> = ({ deadline }) => {
   return (
     <>
       <p className="p-0 m-0 text-sm text-OPbluegray ">{deadlineMessage().message}</p>
-      <span className="font-bold text-lg">
-        {timeRemaining ? timeRemaining : new Date(deadline * 1000).toLocaleString()}
-      </span>
+      <span className="font-bold text-lg">{isEnded ? deadlineMessage().formattedDate : timeRemaining || ""}</span>
     </>
   );
 };
 
 export default CountdownTimer;
+
+// Helper function to calculate initial time remaining
+const calculateTimeRemaining = (deadline: number): string => {
+  const now = Math.floor(new Date().getTime() / 1000);
+
+  if (now >= deadline) {
+    return ""; // Timer has already ended
+  }
+
+  const timeRemainingSeconds = deadline - now;
+  const days = Math.floor(timeRemainingSeconds / 86400);
+  const hours = Math.floor((timeRemainingSeconds % 86400) / 3600);
+  const minutes = Math.floor((timeRemainingSeconds % 3600) / 60);
+  const seconds = Math.floor(timeRemainingSeconds % 60);
+
+  if (days > 0) {
+    return `${days}d:${hours}h:${minutes}m:${seconds}s`;
+  } else {
+    return `${hours}h:${minutes}m:${seconds}s`;
+  }
+};
diff --git a/packages/nextjs/tailwind.config.js b/packages/nextjs/tailwind.config.js
@@ -41,7 +41,7 @@ module.exports = {
         scaffoldEthDark: {
           primary: "#212638",
           "primary-content": "#F9FBFF",
-          secondary: "#323f61",
+          secondary: "#991b1b",
           "secondary-content": "#F9FBFF",
           accent: "#4969A6",
           "accent-content": "#F9FBFF",