Refactor registration close (#281)

* use react context to dynamically update content based on event lifetime * fix redirect logic * remove extra statuses * remove extra switch arms * remove unnecessary loading indicator
HackIllinois · Feb 1, 2025 · 7274c71 · 7274c71
1 parent 399d661
commit 7274c71
Show file tree

Hide file tree

Showing 10 changed files with 305 additions and 310 deletions.
diff --git a/app/closed/closed.module.scss b/app/closed/closed.module.scss
@@ -48,8 +48,10 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
+    align-items: center;
     gap: 20px;
     flex: 0.9;
+    width: 400px;
     @media screen and (max-width: 640px) {
         flex: 1;
     }

diff --git a/app/closed/page.tsx b/app/closed/page.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import Image from "next/image";
 
 import SNOWGLOBE from "@/public/registration/track_selection/snowglobe.svg";
@@ -7,37 +9,81 @@ import BACKGROUND from "@/public/registration/track_selection/background.svg";
 import OlympianButton from "@/components/OlympianButton/OlympianButton";
 
 import styles from "@/app/closed/closed.module.scss";
+import { useContext, useEffect, useState } from "react";
+import GlobalContext from "../context";
+import {
+    isAuthenticated,
+    authenticate,
+    getRegistrationOrDefault
+} from "@/util/api";
+import { usePathname, useRouter } from "next/navigation";
+import Loading from "@/components/Loading/Loading";
+
+const Closed: React.FC = () => {
+    const { eventStatus } = useContext(GlobalContext);
+    const pathname = usePathname();
+    const router = useRouter();
+    const [isLoading, setIsLoading] = useState(true);
+
+    useEffect(() => {
+        if (eventStatus === "loading") {
+            return;
+        }
+
+        if (!isAuthenticated()) {
+            authenticate(pathname);
+            return;
+        }
+
+        getRegistrationOrDefault().then(registration => {
+            if (registration.hasSubmitted) {
+                router.push("/profile");
+                return;
+            }
+
+            if (eventStatus === "registration") {
+                router.push("/register");
+                return;
+            }
+
+            setIsLoading(false);
+        });
+    }, [eventStatus, pathname, router]);
 
-const closed: React.FC = () => {
     return (
-        <main
-            style={{
-                backgroundImage: `url(${BACKGROUND?.src})`
-            }}
-            className={styles.screen}
-        >
-            <div className={styles.topSpacer}></div>
-            <Image
-                alt="HackOlympus Logo"
-                src={LOGO_TEXTONLY}
-                className={styles.logo}
-            />
-            <div
+        <>
+            {isLoading && <Loading />}
+            <main
                 style={{
-                    backgroundImage: `url(${SNOWGLOBE?.src})`
+                    backgroundImage: `url(${BACKGROUND?.src})`
                 }}
-                className={styles.container}
+                className={styles.screen}
             >
                 <div className={styles.topSpacer}></div>
-                <div className={styles.content}>
-                    <h2>Sorry, registration is closed.</h2>
-                    <h2>Check back next year!</h2>
-                    <OlympianButton text="Back" link="/" blue />
+                <Image
+                    alt="HackOlympus Logo"
+                    src={LOGO_TEXTONLY}
+                    className={styles.logo}
+                />
+                <div
+                    style={{
+                        backgroundImage: `url(${SNOWGLOBE?.src})`
+                    }}
+                    className={styles.container}
+                >
+                    <div className={styles.topSpacer}></div>
+                    <div className={styles.content}>
+                        <h2>
+                            Sorry, registration for HackIllinois 2025 is closed.
+                        </h2>
+                        <h2>Check back next year!</h2>
+                        <OlympianButton text="Back" link="/" blue medium />
+                    </div>
+                    <div className={styles.spacer}></div>
                 </div>
-                <div className={styles.spacer}></div>
-            </div>
-        </main>
+            </main>
+        </>
     );
 };
 
-export default closed;
+export default Closed;
diff --git a/app/context.ts b/app/context.ts
@@ -0,0 +1,12 @@
+"use client";
+import { createContext } from "react";
+
+export type GlobalContextType = {
+    eventStatus: "registration" | "admission" | "loading";
+};
+
+const GlobalContext = createContext<GlobalContextType>({
+    eventStatus: "loading"
+});
+
+export default GlobalContext;
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,7 +1,7 @@
 import "./globals.scss";
 import type { Metadata } from "next";
 import { Montserrat } from "next/font/google";
-import Navbar from "@/components/Navbar/Navbar";
+import RootLayout from "@/components/RootLayout";
 
 const montserrat = Montserrat({ subsets: ["latin"] });
 
@@ -11,16 +11,11 @@ export const metadata: Metadata = {
         "The official website of the University of Illinois at Urbana-Champaign's Premier Hackathon!"
 };
 
-export default function RootLayout({
-    children
-}: {
-    children: React.ReactNode;
-}) {
+export default function Layout({ children }: { children: React.ReactNode }) {
     return (
         <html lang="en">
             <body className={montserrat.className}>
-                <Navbar />
-                {children}
+                <RootLayout>{children}</RootLayout>
             </body>
         </html>
     );

diff --git a/app/olympians/page.tsx b/app/olympians/page.tsx
@@ -3,18 +3,12 @@
 import styles from "./styles.module.scss";
 import Link from "next/link";
 import Background from "@/components/Olympians/Background";
-import { useEffect, useState } from "react";
-import { getRegistrationStatus } from "@/util/api";
+import { useContext } from "react";
 import Head from "next/head";
+import GlobalContext from "../context";
 
 const AboutProTrack: React.FC = () => {
-    const [registrationOpen, setRegistrationOpen] = useState(false);
-
-    useEffect(() => {
-        getRegistrationStatus().then(status => {
-            setRegistrationOpen(status.alive);
-        });
-    }, []);
+    const { eventStatus } = useContext(GlobalContext);
 
     return (
         <>
@@ -97,7 +91,7 @@ const AboutProTrack: React.FC = () => {
                                 <br></br>
                                 <p>
                                     Admission into HackOlympians requires{" "}
-                                    {registrationOpen ? (
+                                    {eventStatus === "registration" ? (
                                         <Link
                                             prefetch={false}
                                             href="/register/challenge/"

diff --git a/app/register/layout.tsx b/app/register/layout.tsx
@@ -3,50 +3,43 @@ import Loading from "@/components/Loading/Loading";
 import {
     isAuthenticated,
     authenticate,
-    getRegistrationOrDefault,
-    getRegistrationStatus
+    getRegistrationOrDefault
 } from "@/util/api";
 import Head from "next/head";
 import { usePathname, useRouter } from "next/navigation";
-import { useState, useEffect } from "react";
+import { useState, useEffect, useContext } from "react";
+import GlobalContext from "../context";
 
 const Layout = ({ children }: { children: React.ReactNode }) => {
+    const { eventStatus } = useContext(GlobalContext);
     const [isLoading, setIsLoading] = useState(true);
     const router = useRouter();
     const pathname = usePathname();
-    const [isAlive, setIsAlive] = useState(true);
 
     useEffect(() => {
+        if (eventStatus === "loading") {
+            return;
+        }
+
         if (!isAuthenticated()) {
             authenticate(pathname);
             return;
         }
 
-        getRegistrationOrDefault()
-            .then(registration => {
-                if (registration.hasSubmitted) {
-                    router.push("/profile");
-                } else if (!isAlive) {
-                    router.push("/closed");
-                }
-            })
-            .finally(() => {
-                setIsLoading(false);
-            });
-    }, []);
+        getRegistrationOrDefault().then(registration => {
+            if (registration.hasSubmitted) {
+                router.push("/profile");
+                return;
+            }
 
-    useEffect(() => {
-        const fetchRegistrationStatus = async () => {
-            try {
-                const response = await getRegistrationStatus();
-                setIsAlive(response.alive);
-            } catch (err) {
-                console.error(err);
+            if (eventStatus !== "registration") {
+                router.push("/closed");
+                return;
             }
-        };
 
-        fetchRegistrationStatus();
-    }, []);
+            setIsLoading(false);
+        });
+    }, [eventStatus, router, pathname]);
 
     return (
         <>