Merge branch 'main' into HMT/general-fixes

Author: burtonjong

amplify/function/BusinessLogic/AssignUsersToTeams/graphql/API.ts

@@ -379,10 +379,10 @@ export type AddUserToGroupResponse = {
 };
 
 export type ScheduleTeamsAndJudgesResponse = {
-  __typename: "ScheduleTeamsAndJudgesResponse",
-  body?: string | null,
-  headers?: string | null,
-  statusCode?: number | null,
+  __typename: "ScheduleTeamsAndJudgesResponse";
+  body?: string | null;
+  headers?: string | null;
+  statusCode?: number | null;
 };
 
 export type ModelFoodEventConditionInput = {
@@ -1373,19 +1373,19 @@ export type ResetHackathonMutation = {
 };
 
 export type ScheduleTeamsAndJudgesMutationVariables = {
-  judgingSessionsPerTeam: number,
-  numOfJudgingRooms: number,
-  presentationDuration: number,
-  startDateAndTime: string,
+  judgingSessionsPerTeam: number;
+  numOfJudgingRooms: number;
+  presentationDuration: number;
+  startDateAndTime: string;
 };
 
 export type ScheduleTeamsAndJudgesMutation = {
-  ScheduleTeamsAndJudges?:  {
-    __typename: "ScheduleTeamsAndJudgesResponse",
-    body?: string | null,
-    headers?: string | null,
-    statusCode?: number | null,
-  } | null,
+  ScheduleTeamsAndJudges?: {
+    __typename: "ScheduleTeamsAndJudgesResponse";
+    body?: string | null;
+    headers?: string | null;
+    statusCode?: number | null;
+  } | null;
 };
 
 export type SetUserAsCheckedInMutationVariables = {

amplify/function/BusinessLogic/AssignUsersToTeams/graphql/mutations.ts

@@ -93,7 +93,8 @@ export const ResetHackathon = /* GraphQL */ `mutation ResetHackathon(
   APITypes.ResetHackathonMutation
 >;
 
-export const ScheduleTeamsAndJudges = /* GraphQL */ `mutation ScheduleTeamsAndJudges(
+export const ScheduleTeamsAndJudges =
+  /* GraphQL */ `mutation ScheduleTeamsAndJudges(
   $judgingSessionsPerTeam: Int!
   $numOfJudgingRooms: Int!
   $presentationDuration: Int!
@@ -112,10 +113,11 @@ export const ScheduleTeamsAndJudges = /* GraphQL */ `mutation ScheduleTeamsAndJu
   }
 }
 ` as GeneratedMutation<
-  APITypes.ScheduleTeamsAndJudgesMutationVariables,
-  APITypes.ScheduleTeamsAndJudgesMutation
->;
-export const SetUserAsCheckedIn = /* GraphQL */ `mutation SetUserAsCheckedIn($userId: String!) {
+    APITypes.ScheduleTeamsAndJudgesMutationVariables,
+    APITypes.ScheduleTeamsAndJudgesMutation
+  >;
+export const SetUserAsCheckedIn =
+  /* GraphQL */ `mutation SetUserAsCheckedIn($userId: String!) {
   SetUserAsCheckedIn(userId: $userId) {
     JUDGE_givenScores {
       nextToken

src/app/judging/JudgingTable.tsx

@@ -1,9 +1,9 @@
 "use client";
 
 import { useState } from "react";
-import Skeleton from "react-loading-skeleton";
 
 import type { Schema } from "@/amplify/data/resource";
+import KevinLoadingRing from "@/components/KevinLoadingRing";
 import { useUser } from "@/components/contexts/UserContext";
 import ModalPopup from "@/components/judging/ModalPopup";
 import ScoresTable from "@/components/judging/ScoresTable";
@@ -21,6 +21,8 @@ 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({
@@ -34,7 +36,9 @@ export default function JudgingTable({
 
       return data;
     },
+    enabled: !!currentUser.JUDGE_roomId,
   });
+
   const { data: teamsForRoomData, isFetching: teamsForRoomIsFetching } =
     useQuery({
       queryKey: ["TeamsForRoom", roomData?.id],
@@ -49,43 +53,61 @@ export default function JudgingTable({
         return teams;
       },
     });
-  const isFetching = roomIsFetching || teamsForRoomIsFetching;
+  const isFetching = roomIsFetching && teamsForRoomIsFetching;
   if (isFetching || !roomData || !teamsForRoomData) {
-    return (
-      <div className="flex flex-1">
-        <Skeleton className="h-full" containerClassName="flex-1" />
-      </div>
+    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 = [
     {
       icon: "/svgs/judging/team_icon.svg",
       alt: "Teams assigned icon",
       stat: teamsForRoomData.length,
-      text: `Teams Assigned to ${roomData.name}`,
+      text:
+        teamsForRoomData.length === 1
+          ? `Team Assigned to ${roomData.name}`
+          : `Teams Assigned to ${roomData.name}`,
     },
     {
       icon: "/svgs/judging/teams_left.svg",
       alt: "Teams left icon",
-      stat: teamsForRoomData.filter(
-        async (team) =>
-          (await team?.scores())?.data.filter(
-            (score) => score.judgeId === currentUser.username,
-          ).length === 0,
-      ).length,
-      text: "Teams Left To Score",
+      stat: teamsLeft,
+      text: teamsLeft === 1 ? "Team Left to Score" : "Teams Left to Score",
     },
   ];
+
   const handleCreateScoreClick = (teamId: string) => {
-    setSelectedTeamId(teamId);
-  };
-  const handleEditScoreClick = (teamId: string) => {
-    setSelectedTeamId(teamId);
+    const selectedTeam = teamsForRoomData.find((team) => team?.id === teamId);
+
+    if (selectedTeam) {
+      setSelectedTeamId(teamId);
+      setTeamName(selectedTeam.name);
+    }
   };
 
   const closeModal = () => {
     setSelectedTeamId("");
+    setTeamName("");
   };
 
   return (
@@ -105,17 +127,18 @@ export default function JudgingTable({
         <ScoresTable
           tableData={teamsForRoomData as Schema["Team"]["type"][]}
           onCreateScoreClick={handleCreateScoreClick}
-          onEditScoreClick={handleEditScoreClick}
           colorScheme="pink"
           entriesPerPage={150}
           hackathonData={hackathonData}
         />
       </div>
+
       {selectedTeam !== "" && (
         <ModalPopup
           hackathon={hackathonData}
           onClose={closeModal}
           teamId={selectedTeam}
+          teamName={teamName}
         />
       )}
     </>

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

@@ -1,5 +1,3 @@
-import { NavBar } from "@/components/judging/Navbar";
-
 const AssignedTeamsPage = () => {
   const assignedTeams = [
     { id: 1, name: "Team Alpha" },
@@ -9,7 +7,6 @@ const AssignedTeamsPage = () => {
 
   return (
     <div>
-      <NavBar />
       <h1> Put assinged teams here Assigned Teams</h1>
       <ul>
         {assignedTeams.map((team) => (

src/app/judging/layout.tsx

@@ -0,0 +1,14 @@
+import NavBar from "@/components/judging/Navbar";
+
+export default function JudgingLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex size-full flex-col bg-dashboard-grey">
+      <NavBar />
+      <main className="flex flex-1 flex-col gap-4">{children}</main>
+    </div>
+  );
+}

src/app/judging/page.tsx

@@ -1,7 +1,5 @@
 import type { Metadata } from "next";
 
-import { NavBar } from "@/components/judging/Navbar";
-
 import JudgingDashboard from "./JudgingDashboard";
 
 export const dynamic = "force-dynamic";
@@ -22,7 +20,6 @@ export const metadata: Metadata = {
 export default function Judging() {
   return (
     <main className="flex w-full flex-1 flex-col gap-4 bg-dashboard-grey">
-      <NavBar />
       <JudgingDashboard />
     </main>
   );

src/app/judging/rubric/page.tsx

@@ -1,9 +1,6 @@
-import { NavBar } from "@/components/judging/Navbar";
-
 const RubricPage = () => {
   return (
     <div>
-      <NavBar />
       <h1>Judging Rubric here</h1>
       <ul></ul>
     </div>

src/app/judging/schedule/page.tsx

@@ -1,48 +1,9 @@
-"use client";
-
-import { useEffect, useState } from "react";
-
-interface Schedule {
-  teamName: string;
-  timeSlot: string;
-}
-
-const SchedulePage = () => {
-  const [schedule, setSchedule] = useState<Schedule[]>([]);
-
-  useEffect(() => {
-    // Fetch schedule data from an API or define it statically
-    // Template for when we will fetch the schedule
-    const fetchSchedule = async () => {
-      const response = await fetch("/api/schedule");
-      const data = await response.json();
-      setSchedule(data);
-    };
-
-    fetchSchedule();
-  }, []);
+import JudgeSchedule from "@/components/judging/Schedule/schedule";
 
+export default function Schedule() {
   return (
-    <div>
-      <h1>Judging Schedule</h1>
-      <table>
-        <thead>
-          <tr>
-            <th>Team Name</th>
-            <th>Time Slot</th>
-          </tr>
-        </thead>
-        <tbody>
-          {schedule.map((item, index) => (
-            <tr key={index}>
-              <td>{item.teamName}</td>
-              <td>{item.timeSlot}</td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
+    <main className="size-full">
+      <JudgeSchedule />
+    </main>
   );
-};
-
-export default SchedulePage;
+}

src/app/login/page.tsx

@@ -1,6 +1,17 @@
-import Login from "@/components/LoginForm/Login";
+import dynamic from "next/dynamic";
+
+import KevinLoadingRing from "@/components/KevinLoadingRing";
 import RegistrationLayout from "@/components/layouts/RegistrationLayout";
 
+const Login = dynamic(() => import("@/components/LoginForm/Login"), {
+  ssr: false,
+  loading: () => (
+    <div className="mt-16 flex w-full items-center justify-center">
+      <KevinLoadingRing />
+    </div>
+  ),
+});
+
 export default function LoginPage() {
   return (
     <RegistrationLayout>

src/app/participant/profile/page.tsx

@@ -1,14 +1,14 @@
 import dynamic from "next/dynamic";
+import KevinLoadingRing from "@/components/KevinLoadingRing";
 
-import LoadingRing from "@/components/LoadingRing";
-
+// Dynamically import UserProfile with preloading
 const UserProfile = dynamic(
   () => import("@/components/UserProfile/UserProfile"),
   {
     ssr: false,
     loading: () => (
-      <div className="flex h-screen w-full items-center justify-center bg-fuzzy-peach">
-        <LoadingRing />
+      <div className="flex w-full items-center justify-center">
+        <KevinLoadingRing />
       </div>
     ),
   },

src/components/Dashboard/Greetings.tsx

@@ -32,8 +32,15 @@ export default function Greetings({
         <h2 className="text-lg font-normal md:text-xl lg:text-2xl">
           Hack the Change 2024
         </h2>
+
         <h1 className="text-3xl md:text-4xl lg:text-6xl">
           Hello,
+          {user.isFetching && (
+            <span className={`capitalize italic ${nameColor}`}>
+              {" "}
+              Loading...
+            </span>
+          )}
           <span className={`capitalize italic ${nameColor}`}>
             {" "}
             {firstName} {lastName}!

src/components/KevinLoadingRing.tsx

@@ -0,0 +1,23 @@
+import Image from "next/image";
+
+export default function KevinLoadingRing() {
+  return (
+    <>
+      <div className="m-4 flex h-full flex-col justify-center text-center text-2xl">
+        <Image
+          className="animate-bounce"
+          src="/svgs/admin/Kevin.svg"
+          alt="Kevin Icon"
+          width={240}
+          height={240}
+        />
+        <div className="ml-2 flex w-full items-center justify-center space-x-1">
+          <span className="font-semibold text-gray-700">Loading</span>
+          <span className=" mt-3 size-1 animate-pulse rounded-full bg-gray-700 delay-200"></span>
+          <span className="delay-400 mt-3 size-1 animate-pulse rounded-full bg-gray-700"></span>
+          <span className="delay-600 mt-3 size-1 animate-pulse rounded-full bg-gray-700"></span>
+        </div>
+      </div>
+    </>
+  );
+}