temp add judging state (#454)

Author: michelleyeoh

app/(pages)/(hackers)/(hub)/page.tsx

@@ -13,6 +13,7 @@ import HeroJudging from '../_components/HomeJudging/HeroJudging';
 import HackerChoiceAward from '../_components/HomeJudging/HackersChoiceAwards';
 import HeroHacking from '../_components/HomeHacking/HeroHacking';
 import { useRollout } from '@pages/_hooks/useRollout';
+import HeroWaiting from '../_components/HomeJudging/HeroWaiting';
 
 export default function Page() {
   const { rolloutRes, loading } = useRollout('hacking-starts');
@@ -31,10 +32,11 @@ export default function Page() {
         </ClientTimeProtectedDisplay>
         {/* temporarilty set featureId below to "hero-hacking" to test */}
         <ClientTimeProtectedDisplay featureId="hero-hacking">
+          <HeroWaiting />
           <HeroJudging />
           <HackerChoiceAward />
         </ClientTimeProtectedDisplay>
-        <ClientTimeProtectedDisplay featureId="table-number-checkin">
+        <ClientTimeProtectedDisplay featureId="hero-hacking">
           <TableNumberCheckin />
         </ClientTimeProtectedDisplay>
       </TableNumberContextProvider>

app/(pages)/(hackers)/_components/HomeJudging/HeroJudging.tsx

@@ -8,7 +8,7 @@ import { LuEye, LuEyeOff } from 'react-icons/lu';
 
 import useTableNumberContext from '@pages/_hooks/useTableNumberContext';
 import JudgeBanners from './_components/JudgeBanners';
-import HeroWaiting from './HeroWaiting';
+// import HeroWaiting from './HeroWaiting';
 import DoneJudgingModal from './_components/DoneJudgingModal';
 
 import clouds from '@public/hackers/hero/Clouds.svg';
@@ -25,9 +25,9 @@ export default function HeroJudging() {
     }
   }, [hasDismissedModal]);
 
-  if (!tableNumber) {
-    return <HeroWaiting />;
-  }
+  // if (!tableNumber) {
+  //   return <HeroWaiting />;
+  // }
 
   return (
     <div className="w-full h-screen p-4 md:p-10">

app/(pages)/(hackers)/_components/TableNumberCheckin/TableNumberCheckin.tsx

@@ -25,7 +25,7 @@ export default function TableNumberCheckin() {
   const { loading, tableNumber, fetchTableNumber, setTableNumber, error } =
     useTableNumber();
 
-  if (localStorageLoading || storedValue) {
+  if (localStorageLoading || storedValue !== null) {
     return null;
   }
 
@@ -134,8 +134,8 @@ export default function TableNumberCheckin() {
           className={styles.yes_button}
           disabled={!hasTeamNumber}
           onClick={() => {
-            if (tableNumber !== null) {
-              setValue(String(tableNumber));
+            if (tableNumber) {
+              setValue(tableNumber);
             }
           }}
         >

app/(pages)/_hooks/useTableNumber.ts

@@ -4,7 +4,7 @@ import { getManyTeams } from '@actions/teams/getTeams';
 import { useState } from 'react';
 
 export function useTableNumber() {
-  const [tableNumber, setTableNumber] = useState<null | number>(null);
+  const [tableNumber, setTableNumber] = useState<null | string>(null);
   const [loading, setLoading] = useState<boolean>(false);
   const [error, setError] = useState<string | null>(null);
 
@@ -16,9 +16,13 @@ export function useTableNumber() {
       setError(teamsRes.error);
     } else {
       // grab first team that matches teamNumber, get tableNumber back
-      const tableNumber = teamsRes.body?.[0]?.tableNumber ?? null;
-      setTableNumber(tableNumber);
-      if (!tableNumber) {
+      const tableNumber = teamsRes.body?.[0]?.tableNumber;
+      const normalizedTableNumber =
+        tableNumber === null || tableNumber === undefined
+          ? null
+          : String(tableNumber);
+      setTableNumber(normalizedTableNumber);
+      if (!normalizedTableNumber) {
         setError('No team with given teamNumber');
       } else {
         setError(null);