Updating prod for infinite scheduler load (#258)

Co-authored-by: Fiona Truong <151110138+fionaa-truong@users.noreply.github.com>
Co-authored-by: burtonjong <burtonjong05@gmail.com>
Co-authored-by: Burton Jong <108391733+burtonjong@users.noreply.github.com>
Co-authored-by: simar kandola <simarkandola51@gmail.com>
Co-authored-by: Anthony <88424536+anthonyych4n@users.noreply.github.com>

Author: 5 people

src/app/judging/JudgingTable.tsx

@@ -20,7 +20,6 @@ export default function JudgingTable({
 }) {
   const [selectedTeam, setSelectedTeamId] = useState("");
   const [teamName, setTeamName] = useState("");
-  const [teamsLeft, setTeamsLeft] = useState(0);
 
   const { currentUser } = useUser();
   const { data: roomData, isFetching: roomIsFetching } = useQuery({
@@ -51,30 +50,31 @@ export default function JudgingTable({
         return teams;
       },
     });
-  const isFetching = roomIsFetching && teamsForRoomIsFetching;
+
+  const { data: teamsLeft = 0, isFetching: teamsLeftIsFetching } = useQuery({
+    queryKey: ["TeamsLeftCount", teamsForRoomData, currentUser.username],
+    queryFn: async () => {
+      if (!teamsForRoomData) return 0;
+      const boolArray = await Promise.all(
+        teamsForRoomData.map(async (team) => {
+          const scores = await team?.scores();
+          return (
+            scores?.data.filter(
+              (score) => score.judgeId === currentUser.username,
+            ).length === 0
+          );
+        }),
+      );
+      return teamsForRoomData.filter((_, i) => boolArray[i]).length;
+    },
+    enabled: !!teamsForRoomData && !!currentUser.username,
+  });
+
+  const isFetching =
+    roomIsFetching || teamsForRoomIsFetching || teamsLeftIsFetching;
   if (isFetching || !roomData || !teamsForRoomData) {
     return <KevinLoadingRing />;
   }
-  async function getFilteredTeamsCount() {
-    // https://medium.com/@debbs119/array-filter-and-array-map-with-async-functions-9636e1ae8d6e --> why it needs to map to a boolean array first
-    if (!teamsForRoomData) {
-      return;
-    }
-    const boolArray = await Promise.all(
-      teamsForRoomData?.map(async (team) => {
-        const scores = await team?.scores();
-        return (
-          scores?.data.filter((score) => score.judgeId === currentUser.username)
-            .length === 0
-        );
-      }),
-    );
-    setTeamsLeft(
-      teamsForRoomData?.filter((_, index) => boolArray[index]).length,
-    );
-  }
-
-  getFilteredTeamsCount();
 
   const panelData = [
     {

src/app/judging/assigned-teams/page.tsx

@@ -1,18 +1,81 @@
+"use client";
+
+import React from "react";
+import { client } from "@/app/QueryProvider";
+import { useUser } from "@/components/contexts/UserContext";
+import KevinLoadingRing from "@/components/KevinLoadingRing";
+import { useQuery } from "@tanstack/react-query";
+
 const AssignedTeamsPage = () => {
-  const assignedTeams = [
-    { id: 1, name: "Team Alpha" },
-    { id: 2, name: "Team Beta" },
-    { id: 3, name: "Team Gamma" },
-  ];
+  const { currentUser } = useUser();
+
+  const { data: roomData, isLoading: roomLoading } = useQuery({
+    queryKey: ["RoomForJudge", currentUser?.JUDGE_roomId],
+    queryFn: async () => {
+      if (!currentUser?.JUDGE_roomId)
+        throw new Error("No room assigned to judge");
+      const { data, errors } = await client.models.Room.get({
+        id: currentUser.JUDGE_roomId,
+      });
+      if (errors) throw new Error(errors[0]?.message || "Failed to load room");
+      return data;
+    },
+    enabled: !!currentUser?.JUDGE_roomId,
+  });
+
+  const { data: teamsForRoom, isLoading: teamsLoading } = useQuery({
+    queryKey: ["TeamsForRoom", roomData?.id],
+    queryFn: async () => {
+      if (!roomData) return [];
+      const teamRooms = (await roomData.teamRoom())?.data;
+      if (!teamRooms) return [];
+      const teams = await Promise.all(
+        teamRooms.map(async (tr) => (await tr.team()).data),
+      );
+      return teams;
+    },
+    enabled: !!roomData,
+  });
+
+  if (!currentUser)
+    return <div className="p-6">Please sign in to see assigned teams.</div>;
+  if (roomLoading || teamsLoading)
+    return (
+      <div className="flex items-center justify-center pt-16">
+        <KevinLoadingRing />
+      </div>
+    );
+  if (!roomData)
+    return <div className="p-6">You have no room assigned yet.</div>;
 
   return (
-    <div>
-      <h1> Put assinged teams here Assigned Teams</h1>
-      <ul>
-        {assignedTeams.map((team) => (
-          <li key={team.id}>{team.name}</li>
-        ))}
-      </ul>
+    <div className="p-6">
+      <h1 className="mb-4 text-2xl font-semibold">
+        Your Teams: {roomData?.name ?? ""}
+      </h1>
+      {teamsForRoom && teamsForRoom.length > 0 ? (
+        <div className="grid w-full grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+          {teamsForRoom.map((team: any) => (
+            <div
+              key={team.id}
+              className="flex flex-col justify-between rounded-lg border bg-white p-4 shadow-sm transition-shadow hover:shadow-lg"
+            >
+              <div>
+                <div className="text-lg font-bold text-gray-900">
+                  <span>{team.name}</span>
+                </div>
+                <div className="mt-1 text-sm text-gray-500">
+                  <span>Team ID: {team.id}</span>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <div className="text-gray-600">
+          No teams assigned to your room yet. Check back later!
+        </div>
+      )}
     </div>
   );
 };