Refactor: extract registration closing date into a constant

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

@@ -3,8 +3,9 @@ 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 { TIME_REGISTRATION_CLOSING } from '@/constants/dates';
 import { useBreakpoint } from '@/hooks';
+import useCountdown from '@/hooks/countdown';
 import { Bashaway, FOSS, Times } from '@/icons';
 import { Button } from '..';
 
@@ -16,6 +17,7 @@ const mobileNavIconStyles =
 const Header = ({ className }) => {
   const [mobileNavOpen, setMobileNavOpen] = useState(false);
 
+  const { didCountDownComplete } = useCountdown({ targetDate: new Date(TIME_REGISTRATION_CLOSING) });
   const breakpoints = useBreakpoint();
 
   const onNavItemClick = (path) => {
@@ -76,8 +78,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 { TIME_REGISTRATION_CLOSING } from '@/constants/dates';
 import useCountdown from '@/hooks/countdown';
 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: new Date(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/countdown';
 import { Bashaway } from '@/icons';
 import { CountDown } from '.';
 
 const Hero = () => {
+  const { didCountDownComplete } = useCountdown({ targetDate: new Date(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/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>