Merge to prod (#160)

Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Hanna <[email protected]> Co-authored-by: Burton Jong <[email protected]> Co-authored-by: burtonjong <[email protected]> Co-authored-by: Justin Pham <[email protected]> Co-authored-by: hannagracec <[email protected]> Co-authored-by: Natalie <[email protected]>
Code-the-Change-YYC · Nov 10, 2024 · 56aa78e · 56aa78e
1 parent 9b9f6bc
commit 56aa78e
Show file tree

Hide file tree

Showing 15 changed files with 220 additions and 208 deletions.
diff --git a/amplify/data/resource.ts b/amplify/data/resource.ts
@@ -25,7 +25,12 @@ const schema = a
             allow.ownerDefinedIn("profileOwner").to(["read", "create"]),
             allow.groups(["Admin"]).to(["read", "update", "create"]),
           ]),
-        email: a.string(),
+        email: a
+          .string()
+          .authorization((allow) => [
+            allow.ownerDefinedIn("profileOwner").to(["read", "create"]),
+            allow.groups(["Admin"]).to(["read", "create"]),
+          ]),
         institution: a.string(),
         completedRegistration: a.boolean(),
         allergies: a.string(),

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -32,6 +32,32 @@ body {
     rgb(var(--background-start-rgb));
 }
 
+@media (max-width: 768px) {
+  .text-shadow-outline {
+    text-shadow:
+      -2px -2px 0 #7055fd,
+      2px -2px 0 #7055fd,
+      -2px 2px 0 #7055fd,
+      2px 2px 0 #7055fd,
+      -2px -2px 0 #7055fd,
+      2px -2px 0 #7055fd,
+      -2px 2px 0 #7055fd,
+      2px 2px 0 #7055fd;
+  }
+}
+
+.text-shadow-title {
+  text-shadow:
+    -2px -2px 0 #7055fd,
+    2px -2px 0 #7055fd,
+    -2px 2px 0 #7055fd,
+    2px 2px 0 #7055fd,
+    -2px -2px 0 #7055fd,
+    2px -2px 0 #7055fd,
+    -2px 2px 0 #7055fd,
+    2px 2px 0 #7055fd;
+}
+
 .lds-ring,
 .lds-ring div {
   box-sizing: border-box;

diff --git a/src/app/judging/JudgingDashboard.tsx b/src/app/judging/JudgingDashboard.tsx
@@ -12,14 +12,10 @@ export default async function JudgingDashboard() {
   };
 
   return (
-    <>
-      <div className={"flex h-screen justify-center text-blackish"}>
-        <div className={"w-full max-w-[1500px] p-6"}>
-          <Greetings accentColor="text-dark-pink" />
-          <h2 className={"py-4 text-xl font-semibold"}>Assigned Teams</h2>
-          <JudgingTable hackathonData={hackathonData} />
-        </div>
-      </div>
-    </>
+    <div className="flex w-full flex-1 flex-col items-center p-6 text-blackish">
+      <Greetings accentColor="text-dark-pink" />
+      <h2 className="flex w-full py-4 text-xl font-semibold">Assigned Teams</h2>
+      <JudgingTable hackathonData={hackathonData} />
+    </div>
   );
 }
diff --git a/src/app/judging/JudgingTable.tsx b/src/app/judging/JudgingTable.tsx
@@ -1,6 +1,7 @@
 "use client";
 
-import { useMemo, useState } from "react";
+import { useState } from "react";
+import Skeleton from "react-loading-skeleton";
 
 import type { Schema } from "@/amplify/data/resource";
 import LoadingRing from "@/components/LoadingRing";
@@ -48,36 +49,34 @@ export default function JudgingTable({
         return teams;
       },
     });
-  if (
-    roomIsFetching ||
-    teamsForRoomIsFetching ||
-    !roomData ||
-    !teamsForRoomData
-  ) {
-    return <div>Loading...</div>;
+  const isFetching = roomIsFetching || teamsForRoomIsFetching;
+  if (isFetching || !roomData || !teamsForRoomData) {
+    return (
+      <div className="flex flex-1">
+        <Skeleton className="h-full" containerClassName="flex-1" />
+      </div>
+    );
   }
 
-  const panelData = useMemo(() => {
-    return [
-      {
-        icon: "/svgs/judging/team_icon.svg",
-        alt: "Teams assigned icon",
-        stat: teamsForRoomData.length,
-        text: `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",
-      },
-    ];
-  }, [roomData, teamsForRoomData]);
+  const panelData = [
+    {
+      icon: "/svgs/judging/team_icon.svg",
+      alt: "Teams assigned icon",
+      stat: teamsForRoomData.length,
+      text: `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",
+    },
+  ];
   const handleCreateScoreClick = (teamId: string) => {
     setSelectedTeamId(teamId);
   };
@@ -89,57 +88,32 @@ export default function JudgingTable({
     setSelectedTeamId("");
   };
 
-  const isFetching = roomIsFetching || teamsForRoomIsFetching;
-
-  const tableHeaders = [
-    { columnHeader: "Team Name", className: "w-1/3 rounded-tl-lg" },
-    ...hackathonData.scoringComponents.map((component) => ({
-      columnHeader: component.friendlyName,
-      className: "w-fit",
-    })),
-    ...hackathonData.scoringSidepots.map((component) => ({
-      columnHeader: (
-        <div className="flex flex-col">
-          <p>Sidepot:</p>
-          {component.friendlyName}
-        </div>
-      ),
-      className: "w-fit bg-pastel-pink",
-    })),
-  ];
   return isFetching ? (
-    <div
-      className={
-        "flex h-screen w-full items-center justify-center bg-pastel-pink"
-      }
-    >
+    <div className="flex size-full flex-1 items-center justify-center bg-pastel-pink">
       <LoadingRing />
     </div>
   ) : (
-    <div className={"flex h-screen justify-center text-blackish"}>
-      <div className="mb-4 flex w-full max-w-[1500px] p-6">
-        <div className="mr-4 flex w-1/4 flex-col space-y-4">
+    <>
+      <div className="flex w-full flex-col justify-center gap-4 py-6 xl:flex-row">
+        <div className=" flex w-full flex-row gap-4 xl:w-1/4 xl:flex-col">
           {panelData.map((item, index) => (
-            <div key={index} className="h-1/2">
-              <StatsPanel
-                icon={item.icon}
-                alt={item.alt}
-                stat={item.stat}
-                subheader={item.text}
-              />
-            </div>
+            <StatsPanel
+              key={index}
+              icon={item.icon}
+              alt={item.alt}
+              stat={item.stat}
+              subheader={item.text}
+            />
           ))}
         </div>
-        <div className="w-3/4">
-          <ScoresTable
-            tableHeaders={tableHeaders}
-            tableData={teamsForRoomData as Schema["Team"]["type"][]}
-            onCreateScoreClick={handleCreateScoreClick}
-            onEditScoreClick={handleEditScoreClick}
-            colorScheme="pink"
-            entriesPerPage={150}
-          />
-        </div>
+        <ScoresTable
+          tableData={teamsForRoomData as Schema["Team"]["type"][]}
+          onCreateScoreClick={handleCreateScoreClick}
+          onEditScoreClick={handleEditScoreClick}
+          colorScheme="pink"
+          entriesPerPage={150}
+          hackathonData={hackathonData}
+        />
       </div>
       {selectedTeam !== "" && (
         <ModalPopup
@@ -148,6 +122,6 @@ export default function JudgingTable({
           teamId={selectedTeam}
         />
       )}
-    </div>
+    </>
   );
 }
diff --git a/src/app/judging/page.tsx b/src/app/judging/page.tsx
@@ -19,7 +19,7 @@ export const metadata: Metadata = {
 };
 export default function Judging() {
   return (
-    <main className="w-full bg-dashboard-grey">
+    <main className="flex w-full flex-1 flex-col gap-4 bg-dashboard-grey">
       <JudgingDashboard />
     </main>
   );

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -10,7 +10,7 @@ import { enableLandingPage } from "@/featureFlags";
 export const revalidate = 600;
 const Home = () => {
   return (
-    <main className="">
+    <main className="w-full">
       {enableLandingPage ? (
         <PagePlaceholder />
       ) : (

diff --git a/src/components/LandingPage/AboutEventTile.tsx b/src/components/LandingPage/AboutEventTile.tsx
@@ -3,15 +3,16 @@ import type { ReactNode } from "react";
 
 import { fetchContent } from "@/app/actions";
 
-const EVENT_DETAILS_SECTION_STYLES = "flex flex-col items-center bg-white";
+const EVENT_DETAILS_SECTION_STYLES =
+  "flex w-full flex-col items-center bg-white";
 const EVENT_DETAILS_CONTENT_STYLES =
-  "bg-pastel-pink border-4 border-dark-pink rounded-3xl my-4 lg:my-8 flex md:flex md:justify-center md:max-w-[1100px] md:shadow-[15px_15px_0px_0px_#FF4D6F]";
+  "bg-pastel-pink border-4 border-dark-pink rounded-3xl mt-4 mb-8 xl:mt-8 xl:mb-12 flex flex-col xl:flex-row  w-4/5 shadow-[15px_15px_0px_0px_#FF4D6F]";
 const EVENT_IMAGE_CONTAINER_STYLES =
-  "bg-blackish rounded-t-20 border-b-4 border-dark-pink w-72 h-64 md:rounded-tr-none md:rounded-l-3xl md:border-b-0 md:border-r-4 md:h-[370px] md:w-[40vw]";
+  "bg-blackish border-b-4 border-dark-pink size-full xl:size-1/2 rounded-t-2xl xl:rounded-tr-none xl:rounded-l-2xl xl:border-b-0 xl:border-r-4 ";
 const EVENT_IMAGE_STYLES =
-  "w-full h-full object-cover md:rounded-l-2xl md:rounded-tl-2xl md:rounded-t-none rounded-t-2xl";
+  "w-full h-full object-cover rounded-bl-none rounded-t-2xl xl:rounded-tr-none xl:rounded-l-2xl";
 const EVENT_DETAILS_CONTAINER_STYLES =
-  "flex items-center w-72 h-[370px] rounded-b-20 md:w-[50vw] md:rounded-bl-none md:rounded-r-2xl";
+  "flex items-center w-full xl:w-1/2 rounded-b-20 md:rounded-bl-none md:rounded-r-2xl";
 const EVENT_DETAIL_STYLES = "flex items-center ml-10";
 const EVENT_DETAIL_TITLE_STYLES =
   "text-lg text-blackish font-extrabold leading-tight";

diff --git a/src/components/LandingPage/HeroSectionTile.tsx b/src/components/LandingPage/HeroSectionTile.tsx
@@ -2,19 +2,6 @@ import type { HackathonDetails } from "@/app/contentfulTypes";
 
 import HeroCallToAction from "./HeroCallToAction";
 
-const HERO_HEADER_STYLE = {
-  textShadow: `
-		-2px -2px 0 #7055FD, 
-		2px -2px 0 #7055FD, 
-		-2px 2px 0 #7055FD, 
-		2px 2px 0 #7055FD,
-		-2px -2px 0 #7055FD,
-		2px -2px 0 #7055FD,
-		-2px 2px 0 #7055FD,
-		2px 2px 0 #7055FD
-	`,
-};
-
 const HeroSectionTile = ({
   hackathonDetails,
 }: {
@@ -26,13 +13,10 @@ const HeroSectionTile = ({
 
   return (
     <div className={"flex flex-col px-4 pt-10 md:items-center md:px-0 "}>
-      <h1
-        className="flex-wrap text-5xl font-black text-pastel-green drop-shadow-lg md:text-center md:text-6xl"
-        style={HERO_HEADER_STYLE}
-      >
+      <h1 className="text-shadow-title flex-wrap text-5xl font-black text-pastel-green drop-shadow-lg md:text-center md:text-6xl">
         <span className="text-white">{eventName} </span> {" " + eventYear}
       </h1>
-      <strong className="flex w-full max-w-7xl flex-wrap justify-center py-4 text-xl text-awesomer-purple opacity-95 md:text-center md:text-xl">
+      <strong className="text-shadow-outline flex w-full max-w-7xl flex-wrap justify-center rounded-lg p-2 text-xl text-pastel-green opacity-95 drop-shadow-lg md:py-4 md:text-center md:text-xl md:text-awesomer-purple ">
         {eventBlurb}
       </strong>
       <HeroCallToAction />

diff --git a/src/components/LandingPage/JudgingCriteria.tsx b/src/components/LandingPage/JudgingCriteria.tsx
@@ -1,10 +1,10 @@
 import Image from "next/image";
 
 const judgingCriteriaStyles =
-  "relative flex -mt-5 justify-between bg-[#BAFBE4] py-20 px-10 md:px-24 lg:px-40 drop-shadow-lg md:drop-shadow-none";
+  "relative flex -mt-5 justify-between bg-[#BAFBE4] py-20 px-[5%] md:px-24 lg:px-40 drop-shadow-lg md:drop-shadow-none";
 
 const itemStyles =
-  "flex justify-start p-4 lg:px-10 lg:text-[1.0rem] items-start";
+  "flex justify-start p-4 lg:px-6 lg:text-[1.0rem] items-start";
 
 const checkMarkSvg = "/svgs/landingPage/check_mark_bkg.svg";
 

diff --git a/src/components/UserProfile/TeamForm.tsx b/src/components/UserProfile/TeamForm.tsx
@@ -1,4 +1,9 @@
+"use client";
+
+import { generateClient } from "aws-amplify/api";
+
 import { type Schema } from "@/amplify/data/resource";
+import { useQuery } from "@tanstack/react-query";
 
 const INPUT_STYLES =
   "rounded-full border-4 placeholder-black border-white bg-[#FFFFFF] bg-white/30 ps-3 py-2 my-2 text-sm md:text-md backdrop-opacity-30";
@@ -17,7 +22,23 @@ export default function TeamForm({ data, teamMutation }: TeamFormProp) {
     teamMutation.mutate(data);
   };
 
+  const client = generateClient<Schema>();
+
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { data: teamData, isFetching } = useQuery({
+    initialData: null,
+    initialDataUpdatedAt: 0,
+    queryKey: ["TeamWithMembers"],
+    queryFn: async () => {
+      const { data: teamWithMembers } = await client.models.Team.get(
+        { id: data.id },
+        { selectionSet: ["id", "members.*"] },
+      );
+
+      return teamWithMembers;
+    },
+    enabled: !!data,
+  });
 
   return (
     <>
@@ -40,16 +61,24 @@ export default function TeamForm({ data, teamMutation }: TeamFormProp) {
             />
             <label>Team Members</label>
             <div className="flex flex-col">
-              {Array.isArray(data.members) &&
-                data.members.map((member: Schema["User"]["type"]) => (
-                  <input
-                    key={member.id}
-                    className={INPUT_STYLES}
-                    type="text"
-                    value={`${member.firstName} ${member.lastName}`}
-                    disabled
-                  />
-                ))}
+              {isFetching ? (
+                <h1 className={INPUT_STYLES}>Loading...</h1>
+              ) : (
+                <>
+                  {Array.isArray(teamData?.members) &&
+                    teamData?.members.map(
+                      (member: Partial<Schema["User"]["type"]>) => (
+                        <input
+                          key={member.id}
+                          className={INPUT_STYLES}
+                          type="text"
+                          value={`${member.firstName} ${member.lastName}`}
+                          disabled
+                        />
+                      ),
+                    )}
+                </>
+              )}
             </div>
           </form>
           <div className="mb-10 mt-3 flex justify-end md:mx-10">