Hmt 126/judging schedule page (#197)

Co-authored-by: anthonyych4n <[email protected]>

Author: anthonyych4n

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/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/components/judging/Navbar.tsx

@@ -1,9 +1,11 @@
 "use client";
 
 import Link from "next/link";
+import { useState } from "react";
+
+export default function NavBar() {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
 
-export function NavBar() {
-  // Will add the actual routes when the pages are
   const navigation = [
     {
       name: "Dashboard",
@@ -23,17 +25,59 @@ export function NavBar() {
     },
   ];
 
+  const toggleMenu = () => {
+    setIsMenuOpen(!isMenuOpen);
+  };
+
   return (
-    <nav className="border-b bg-white text-awesomer-purple">
-      <div className="mx-auto flex h-20 items-center justify-center space-x-48 pl-8">
-        {navigation.map((item) => {
-          return (
-            <Link key={item.name} href={item.href} className="text-2xl">
+    <>
+      {!isMenuOpen && (
+        <button
+          onClick={toggleMenu}
+          className="absolute left-8 top-12 z-50 p-2 text-awesomer-purple"
+          aria-label="Toggle menu"
+        >
+          <div className="relative flex size-8 flex-col justify-center space-y-1.5">
+            <span className="block h-[2.5px] w-8 bg-current"></span>
+            <span className="block h-[2.5px] w-8 bg-current"></span>
+            <span className="block h-[2.5px] w-8 bg-current"></span>
+          </div>
+        </button>
+      )}
+
+      {isMenuOpen && (
+        <div className="fixed inset-0 z-40 bg-black/50" onClick={toggleMenu} />
+      )}
+
+      <div
+        className={`fixed left-0 top-0 z-40 h-full w-64 bg-white shadow-lg transition-transform duration-300 ease-in-out ${
+          isMenuOpen ? "translate-x-0" : "-translate-x-full"
+        }`}
+      >
+        <button
+          onClick={toggleMenu}
+          className="absolute left-4 top-4 z-50 p-2 text-awesomer-purple"
+          aria-label="Close menu"
+        >
+          <div className="relative size-6">
+            <span className="absolute left-0 top-1/2 h-0.5 w-6 -translate-y-1/2 rotate-45 bg-current"></span>
+            <span className="absolute left-0 top-1/2 h-0.5 w-6 -translate-y-1/2 -rotate-45 bg-current"></span>
+          </div>
+        </button>
+
+        <div className="flex flex-col px-4 pt-20">
+          {navigation.map((item) => (
+            <Link
+              key={item.name}
+              href={item.href}
+              className="rounded px-2 py-3 text-xl text-awesomer-purple hover:bg-gray-100"
+              onClick={() => setIsMenuOpen(false)}
+            >
               {item.name}
             </Link>
-          );
-        })}
+          ))}
+        </div>
       </div>
-    </nav>
+    </>
   );
 }