fixed the problem (#183)

Author: emiko47

src/components/admin/Judging/JudgingSchedule.tsx

@@ -61,7 +61,7 @@ export default function JudgingSchedule() {
     },
   });
 
-  const { data: roomData } = useQuery({
+  const { data: roomData, isLoading: isLoadingRooms } = useQuery({
     queryKey: ["Room"],
     queryFn: async () => {
       const { data, errors } = await client.models.Room.list();
@@ -72,7 +72,7 @@ export default function JudgingSchedule() {
     },
   });
 
-  const { data: teamRoomData } = useQuery({
+  const { data: teamRoomData, isLoading: isLoadingTeamRooms } = useQuery({
     queryKey: ["TeamRoom"],
     queryFn: async () => {
       const { data, errors } = await client.models.TeamRoom.list();
@@ -83,7 +83,7 @@ export default function JudgingSchedule() {
     },
   });
 
-  const { data: judgeData } = useQuery({
+  const { data: judgeData, isLoading: isLoadingJudges } = useQuery({
     queryKey: ["User-Judge"],
     queryFn: async () => {
       const { data, errors } = await client.models.User.list({
@@ -101,7 +101,7 @@ export default function JudgingSchedule() {
     },
   });
 
-  const { data: teamData } = useQuery({
+  const { data: teamData, isLoading: isLoadingTeams } = useQuery({
     queryKey: ["Teams"],
 
     queryFn: async () => {
@@ -115,35 +115,46 @@ export default function JudgingSchedule() {
     },
   });
 
-  const judgeRooms = roomData
-    ?.map((room) => ({
-      roomName: room.name,
-      room_id: room.id,
-      judgeNames:
-        judgeData
-          ?.filter((judge) => judge.JUDGE_roomId === room.id)
-          .map((judge) => judge.firstName)
-          .join(" & ") || "",
-      color: "#D6C9FF",
-    }))
-    .sort((a, b) =>
-      a.roomName > b.roomName ? 1 : b.roomName > a.roomName ? -1 : 0,
-    );
+  const isLoading =
+    isLoadingRooms || isLoadingJudges || isLoadingTeamRooms || isLoadingTeams;
 
-  const judgingEvents = teamRoomData?.map((teamRoom) => ({
-    event_id: teamRoom.id,
-    title:
-      teamData
-        ?.filter((team) => team.id === teamRoom.teamId)
-        .map((team) => team.name)
-        .join(", ") || "No Team Name",
-    room_id: teamRoom.roomId, // for some reason wont render if camelcase lol
-    start: new Date(teamRoom.time),
-    end: new Date(new Date(teamRoom.time).getTime() + 15 * 60 * 1000),
-    zoomLink: teamRoom.zoomLink,
-  }));
+  const judgeRooms =
+    roomData && judgeData //make sure contents of roomData and judgeData are rendered first
+      ? roomData
+          .map((room) => ({
+            roomName: room.name,
+            room_id: room.id,
+            judgeNames:
+              judgeData
+                ?.filter((judge) => judge.JUDGE_roomId === room.id)
+                .map((judge) => judge.firstName)
+                .join(" & ") || "No Names",
+            color: "#D6C9FF",
+          }))
+          .sort((a, b) =>
+            a.roomName > b.roomName ? 1 : b.roomName > a.roomName ? -1 : 0,
+          )
+      : [];
 
-  return (
+  const judgingEvents =
+    teamRoomData && teamData //make sure conteents of teamRoomData and teamData are mapped first
+      ? teamRoomData.map((teamRoom) => ({
+          event_id: teamRoom.id,
+          title:
+            teamData
+              ?.filter((team) => team.id === teamRoom.teamId)
+              .map((team) => team.name)
+              .join(", ") || "No Team Name",
+          room_id: teamRoom.roomId,
+          start: new Date(teamRoom.time),
+          end: new Date(new Date(teamRoom.time).getTime() + 15 * 60 * 1000),
+          zoomLink: teamRoom.zoomLink,
+        }))
+      : [];
+
+  return isLoading ? (
+    <div>Loading schedule...</div> //JudgeTimeline component is only mapped if all isLoading flags are false
+  ) : (
     <>
       <RoomAssigner judgingScheduleMutation={mutate} />
       <div className="flex justify-center">