Merge pull request #41 from sliit-foss/fix/negative-countdown

Fix negative values in countdown after deadline

apps/2024/src/components/common/layout/header.jsx

@@ -3,8 +3,8 @@ import { RxCross1, RxHamburgerMenu } from 'react-icons/rx';
 import { Link } from 'react-router-dom';
 import { twMerge } from 'tailwind-merge';
 import { registrationLink } from '@/constants';
-import { isRegistrationsOpen } from '@/constants/status';
-import { useBreakpoint } from '@/hooks';
+import { TIME_REGISTRATION_CLOSING } from '@/constants/dates';
+import { useBreakpoint, useCountdown } from '@/hooks';
 import { Bashaway, FOSS, Times } from '@/icons';
 import { Button } from '..';
 
@@ -16,6 +16,7 @@ const mobileNavIconStyles =
 const Header = ({ className }) => {
   const [mobileNavOpen, setMobileNavOpen] = useState(false);
 
+  const { didCountDownComplete } = useCountdown({ targetDate: TIME_REGISTRATION_CLOSING });
   const breakpoints = useBreakpoint();
 
   const onNavItemClick = (path) => {
@@ -76,8 +77,8 @@ const Header = ({ className }) => {
                 {section}
               </span>
             ))}
-            <Button to={registrationLink} target="_blank" disabled={!isRegistrationsOpen}>
-              {isRegistrationsOpen ? 'Register' : 'Registration Closed'}
+            <Button to={registrationLink} target="_blank" disabled={didCountDownComplete}>
+              {!didCountDownComplete ? 'Register' : 'Registration Closed'}
             </Button>
           </div>
         </div>

apps/2024/src/components/landing/competition.jsx

@@ -1,5 +1,5 @@
 import { HighlightText, SectionBadge } from '@/components/common';
-import { currentYear } from '@/constants/status';
+import { CURRENT_YEAR } from '@/constants/dates';
 
 const Competition = () => {
   return (
@@ -8,7 +8,7 @@ const Competition = () => {
       <HighlightText className="flex flex-col gap-y-10 max-w-full lg:max-w-[45vw]">
         <span>
           A unique competition that keeps the coders around the island on their toes. Welcome to ./bashaway&nbsp;
-          {currentYear}, the third edition of the first-ever scripting and automation competition!
+          {CURRENT_YEAR}, the third edition of the first-ever scripting and automation competition!
         </span>
         <span>
           Join the battle once again. Seize the occasion to learn, create and grow! It&apos;s high time to leave your

apps/2024/src/components/landing/countdown/index.jsx

@@ -1,9 +1,10 @@
 import { Separator } from '@/components/common/separator/index';
-import useCountdown from '@/hooks/countdown';
+import { TIME_REGISTRATION_CLOSING } from '@/constants/dates';
+import { useCountdown } from '@/hooks';
 import TimeItem from './time-item';
 
 const CountDown = () => {
-  const { days, hours, minutes, seconds } = useCountdown({ targetDate: new Date('September 12, 2024 23:59:00') });
+  const { days, hours, minutes, seconds } = useCountdown({ targetDate: TIME_REGISTRATION_CLOSING });
 
   return (
     <div className="bg-white text-center rounded-[15px] ">

apps/2024/src/components/landing/hero.jsx

@@ -1,24 +1,27 @@
 import { BodyText, Button } from '@/components/common';
 import { registrationLink } from '@/constants';
-import { currentYear, isRegistrationsOpen } from '@/constants/status';
+import { CURRENT_YEAR, TIME_REGISTRATION_CLOSING } from '@/constants/dates';
+import { useCountdown } from '@/hooks';
 import { Bashaway } from '@/icons';
 import { CountDown } from '.';
 
 const Hero = () => {
+  const { didCountDownComplete } = useCountdown({ targetDate: TIME_REGISTRATION_CLOSING });
+
   return (
     <div className="flex flex-col justify-center items-center gap-y-5 lg:gap-y-4 2xl:gap-y-8 min-h-[calc(100lvh-160px)] lg:min-h-[calc(100lvh-70px)]">
       <Bashaway className="w-[280px] sm:w-[400px] h-[40px] sm:h-[68px] lg:h-[60px] 2xl:h-[70px]" />
       <BodyText className="lg:text-center max-w-5xl px-8">
-        A unique competition that keeps the coders around the island on their toes. Welcome to Bashaway {currentYear},
+        A unique competition that keeps the coders around the island on their toes. Welcome to Bashaway {CURRENT_YEAR},
         the third edition of the first-ever scripting and automation competition in Sri Lanka!
       </BodyText>
       <CountDown />
       <Button
         to={`${registrationLink}`}
         target="_blank"
         className="mt-1 sm:text-[22px] px-6 py-2 rounded-full tracking-[0.44px] z-30"
-        disabled={!isRegistrationsOpen}>
-        {isRegistrationsOpen ? 'Register Now' : 'Registration Closed'}
+        disabled={didCountDownComplete}>
+        {!didCountDownComplete ? 'Register Now' : 'Registration Closed'}
       </Button>
     </div>
   );

apps/2024/src/constants/dates.js

@@ -0,0 +1,2 @@
+export const CURRENT_YEAR = 2024;
+export const TIME_REGISTRATION_CLOSING = 'September 12, 2024 23:59:00';

apps/2024/src/hooks/countdown.jsx

@@ -1,39 +1,35 @@
-import { useEffect } from 'react';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 function useCountdown({ targetDate }) {
-  const countDownDate = targetDate.getTime();
-  const [remainingTime, setRemainingTime] = useState(countDownDate - new Date().getTime());
+  const countDownDate = new Date(targetDate).getTime();
+  const getRemainingTime = () => Math.max(0, countDownDate - Date.now());
+
+  const [remainingTime, setRemainingTime] = useState(getRemainingTime());
+  const [didCountDownComplete, setDidCountDownComplete] = useState(false);
 
   useEffect(() => {
     const interval = setInterval(() => {
-      setRemainingTime(countDownDate - new Date().getTime());
+      const timeLeft = getRemainingTime();
+      setRemainingTime(timeLeft);
+      setDidCountDownComplete(timeLeft === 0);
     }, 1000);
 
     return () => clearInterval(interval);
-  }, [targetDate]);
-
-  const formatTimeUnit = (val) =>
-    Number(val).toLocaleString('en-US', {
-      minimumIntegerDigits: 2
-    });
-
-  const extractUnitVals = (remainingTime) => {
-    const days = formatTimeUnit(Math.floor(remainingTime / (1000 * 60 * 60 * 24)));
-    const hours = formatTimeUnit(Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)));
-    const minutes = formatTimeUnit(Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60)));
-    const seconds = formatTimeUnit(Math.floor((remainingTime % (1000 * 60)) / 1000));
-
-    return {
-      days,
-      hours,
-      minutes,
-      seconds,
-      milliSeconds: remainingTime
-    };
-  };
-
-  return extractUnitVals(remainingTime);
+  }, [countDownDate]);
+
+  const extractUnitVals = (time) => ({
+    days: Math.floor(time / (1000 * 60 * 60 * 24)),
+    hours: Math.floor((time / (1000 * 60 * 60)) % 24),
+    minutes: Math.floor((time / (1000 * 60)) % 60),
+    seconds: Math.floor((time / 1000) % 60)
+  });
+
+  const formatUnitTime = (val) => val.toLocaleString('en-US', { minimumIntegerDigits: 2 });
+
+  const transformTime = (time) =>
+    Object.entries(extractUnitVals(time)).reduce((acc, [key, value]) => ({ ...acc, [key]: formatUnitTime(value) }), {});
+
+  return { ...transformTime(remainingTime), didCountDownComplete };
 }
 
 export default useCountdown;

apps/2024/src/hooks/index.jsx

@@ -2,3 +2,4 @@ export { default as useBreakpoint } from './breakpoint';
 export { default as useEffectOnce } from './effect-once';
 export { default as useScroll } from './scroll';
 export { default as useWindowDimension } from './window-dimension';
+export { default as useCountdown } from './countdown';

apps/2024/src/main.jsx

@@ -3,13 +3,13 @@ import ReactDOM from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
 import { generateRouterBasePath } from '@app/utils';
 import { default as App } from './app';
-import { currentYear } from './constants/status';
+import { CURRENT_YEAR } from './constants/dates';
 import './styles/index.css';
 
 const Root = () => {
   return (
     <React.StrictMode>
-      <BrowserRouter basename={generateRouterBasePath(currentYear)}>
+      <BrowserRouter basename={generateRouterBasePath(CURRENT_YEAR)}>
         <App />
       </BrowserRouter>
     </React.StrictMode>