setup app close pages

package.json

@@ -22,6 +22,7 @@
         "@headlessui/react": "^1.7.18",
         "@heroicons/react": "^2.1.1",
         "class-variance-authority": "^0.7.0",
+        "date-fns": "^3.6.0",
         "firebase": "^10.5.2",
         "hamburger-react": "^2.5.0",
         "react": "^18.2.0",

src/components/Navbar.tsx

@@ -7,8 +7,10 @@ import { FiLogOut } from "react-icons/fi";
 import { useState, useEffect } from "react";
 import { useAuth } from "@/providers/hooks";
 import Hamburger from "hamburger-react";
+import { isAfter } from "date-fns";
 import { Link } from "react-router-dom";
 import { Logo } from "@/assets";
+import { appCloseDate } from "@/data/appCloseDate";
 
 const navItems = [
     { path: "/profile", label: "Home", Icon: GoHome },
@@ -43,6 +45,26 @@ export const Navbar = () => {
     }, [userApp]);
 
     const renderNavItems = (isMobile: boolean) => {
+        const today = new Date();
+
+        if (isAfter(today, new Date(appCloseDate))) {
+            const { path, label, Icon } = navItems[0];
+            return (
+                <Link to={path} className="w-full">
+                    <li className="p-4 hover:bg-slate-100 duration-300 transition-colors rounded-md w-full hover:text-black cursor-pointer flex items-center justify-start gap-2">
+                        {isMobile ? (
+                            label
+                        ) : (
+                            <>
+                                <Icon size={32} />
+                                <span className="hidden md:flex">{label}</span>
+                            </>
+                        )}
+                    </li>
+                </Link>
+            );
+        }
+
         if (showAllNavItems) {
             return navItems.map(({ path, label, Icon }) => (
                 <Link key={label} to={path} className="w-full">

src/data/appCloseDate.ts

@@ -0,0 +1 @@
+export const appCloseDate = "2024-05-05T00:00:00-04:00"; // May 5th, 2024 at midnight EST

src/navigation/Router.tsx

@@ -9,9 +9,11 @@ import {
 } from "@pages";
 import { ProtectedRoutes } from "@/navigation";
 import { useEffect, useState } from "react";
+import { isAfter } from "date-fns";
 import { useAuth } from "@/providers/auth.provider";
 import { LoadingAnimation } from "@/components";
 import { PostSubmissionPage } from "@/pages/miscellaneous/PostSubmission.page";
+import { appCloseDate } from "@/data/appCloseDate";
 
 export const routes = {
     admin: "/admin",
@@ -78,6 +80,12 @@ export const Router = () => {
     useEffect(() => {
         if (userApp === undefined) return;
 
+        const today = new Date();
+
+        if (isAfter(today, new Date(appCloseDate))) {
+            setAvailableRoutes([]);
+        }
+
         if (userApp && userApp.applicationStatus === "accepted") {
             setAvailableRoutes([
                 {

src/pages/user/User.page.tsx

@@ -3,16 +3,33 @@ import { getButtonStyles } from "@/components/Button/Button.styles";
 import { routes } from "@/navigation/constants";
 import { useAuth } from "@/providers/auth.provider";
 import { Link } from "react-router-dom";
+import { isAfter } from "date-fns";
+import { useEffect, useState } from "react";
+import { InfoCallout } from "@/components/InfoCallout/InfoCallout";
+import { appCloseDate } from "@/data/appCloseDate";
 
 const UserPage = () => {
+    const [showInfo, setShowInfo] = useState(false);
     const { userApp } = useAuth();
 
+    useEffect(() => {
+        const today = new Date();
+        setShowInfo(isAfter(today, new Date(appCloseDate)));
+    }, []);
+
     return (
         <>
+            {showInfo && (
+                <div className="w-fit mb-4">
+                    <InfoCallout text="Applications have now closed for HawkHacks 2024." />
+                </div>
+            )}
             <h3 className="text-md md:text-2xl font-bold">My Application</h3>
             <div className="mt-4">
-                {userApp ? (
-                    <Button disabled={!!userApp}>Submitted</Button>
+                {userApp || showInfo ? (
+                    <Button disabled={!!userApp || showInfo}>
+                        {showInfo ? "Applications Closed" : "Submitted"}
+                    </Button>
                 ) : (
                     <Link
                         to={routes.application}