HMT-112-profile-picture-storage

amplify/auth/PostConfirmation/handler.ts

@@ -53,6 +53,7 @@ export const handler: PostConfirmationTriggerHandler = async (event) => {
   const cognitoGroupResponse = await cognitoClient.send(command);
 
   const DDBResponse = await dataClient.models.User.create({
+    profilePicture: "",
     firstName: "",
     lastName: "",
     role: "Participant",

amplify/data/resource.ts

@@ -16,6 +16,7 @@ const schema = a
     User: a
       .model({
         id: a.id().required(),
+        profilePicture: a.string(),
         firstName: a.string(),
         lastName: a.string(),
         role: a

package.json

@@ -35,6 +35,7 @@
     "@yudiel/react-qr-scanner": "^2.0.4",
     "aws-amplify": "^6.0.18",
     "aws-lambda": "^1.0.7",
+    "browser-image-compression": "^2.0.2",
     "concurrently": "^8.2.2",
     "contentful": "^10.15.0",
     "hackathon-management-tool": "file:",

src/app/participant/team-selection/CreateTeamPage.tsx

@@ -85,11 +85,11 @@ const CreateTeamPage = () => {
                     <li>
                       After forming a team, assign <b>ONE</b> member to{" "}
                       <b>&quot;Register New Team&quot;</b> using your Team Name.
-                      They will receive a unique <b>6-digit Team ID</b>{" "}
+                      They will receive a unique <b>4-digit Team ID</b>{" "}
                       following registration.
                     </li>
                     <li className={CREATE_TEAM_STEPS_STYLES}>
-                      Next, provide this <b>6-digit Team ID</b> to all team
+                      Next, provide this <b>4-digit Team ID</b> to all team
                       members.
                     </li>
                     <li className={CREATE_TEAM_STEPS_STYLES}>

src/components/LandingPage/ThanksSponsors.tsx

@@ -9,7 +9,7 @@ const rightSponsorSvgSmall = "/svgs/judgingCriteria/rightSponsorSvgSmall.svg";
 
 export default async function ThankSponsors() {
   const IMAGE_CLASS =
-    "relative size-12 min-w-12 overflow-hidden rounded-full duration-300 group-hover:-translate-y-1 group-hover:shadow-2xl group-hover:transition-transform sm:size-28 sm:min-w-28";
+    "relative duration-300 group-hover:-translate-y-1 group-hover:shadow-2xl group-hover:transition-transform ";
 
   const sponsors = await fetchContent("hackathonSponsor");
   const sortedSponsors = sponsors.sort(
@@ -19,7 +19,7 @@ export default async function ThankSponsors() {
   return (
     <div className="relative flex flex-col items-center justify-center overflow-hidden pb-12 pt-10">
       <div className="flex h-48 w-full justify-center">
-        <div className="absolute -left-12 top-24 z-20  size-44 sm:hidden">
+        <div className="absolute -left-12 top-24 z-20 size-44 sm:hidden">
           <Image
             src={leftSponsorSvgSmall}
             alt="squiggly lines"
@@ -64,27 +64,50 @@ export default async function ThankSponsors() {
 
       <div className="flex w-full flex-row justify-around px-8 pt-10">
         {sortedSponsors.map((sponsor, index) => (
-          <div className="flex flex-row  gap-2 sm:gap-3" key={index}>
+          <div className="flex flex-row gap-2 sm:gap-3" key={index}>
             <div className="group flex flex-col items-center gap-3">
-              <div className={IMAGE_CLASS}>
+              <div
+                className={IMAGE_CLASS}
+                style={{
+                  maxWidth: "300px",
+                  width: "95%",
+                  height: "100%",
+                  padding: "5px",
+                  borderRadius: "20px",
+                  overflow: "hidden",
+                  display: "flex",
+                  justifyContent: "center",
+                  alignItems: "center",
+                }}
+              >
                 <a
                   href={sponsor.fields.sponsorPage}
                   target="_blank"
                   rel="noopener noreferrer"
                 >
-                  <Image
-                    src={
-                      sponsor.fields.sponsorImg.fields.file?.url
-                        ?.toString()
-                        .replace("//", "https://") ?? ""
-                    }
-                    alt="Sponsor Image"
-                    style={{ objectFit: "contain" }}
-                    fill
-                  />
+                  <div
+                    style={{
+                      width: "100%",
+                      height: "100%",
+                      borderRadius: "inherit",
+                    }}
+                  >
+                    <Image
+                      src={
+                        sponsor.fields.sponsorImg.fields.file?.url
+                          ?.toString()
+                          .replace("//", "https://") ?? ""
+                      }
+                      alt="Sponsor Image"
+                      layout="intrinsic"
+                      objectFit="contain"
+                      width={150}
+                      height={150}
+                    />
+                  </div>
                 </a>
               </div>
-              <p className="inset-0 text-center opacity-0 transition-all duration-300 group-hover:opacity-100">
+              <p className="text-center opacity-0 transition-all duration-300 group-hover:opacity-100">
                 {sponsor.fields.sponsorName}
               </p>
             </div>

src/components/LoginForm/PersonalFormFields.tsx

@@ -1,4 +1,5 @@
 import type { AuthUser } from "aws-amplify/auth";
+import imageCompression from "browser-image-compression";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { toast } from "react-toastify";
@@ -40,6 +41,7 @@ export default function PersonalFormFields({ user }: { user: AuthUser }) {
         willEatMeals: input.willEatMeals,
         allergies: input.allergies,
         completedRegistration: true,
+        profilePicture: input.profilePicture,
       });
       toast.dismiss(toastObj);
       if (response.errors) {
@@ -72,6 +74,7 @@ export default function PersonalFormFields({ user }: { user: AuthUser }) {
   }
   const [formState, setFormState] = useState<Schema["User"]["type"]>({
     id: user?.userId,
+    profilePicture: "",
   } as Schema["User"]["type"]);
   const submitForm = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
@@ -97,6 +100,18 @@ export default function PersonalFormFields({ user }: { user: AuthUser }) {
   if (isError) {
     return <div>Error, please try again later.</div>;
   }
+  if (data?.teamId && data?.completedRegistration) {
+    if (data?.role === UserType.Admin) {
+      router.push("/admin");
+      return null;
+    } else if (data?.role === UserType.Judge) {
+      router.push("/judging");
+      return null;
+    } else {
+      router.push("/participant/profile");
+      return null;
+    }
+  }
   if (data?.teamId) {
     router.push(`/register/team/${data.teamId}`);
     return null;
@@ -113,13 +128,63 @@ export default function PersonalFormFields({ user }: { user: AuthUser }) {
       return null;
     }
   }
+
+  const compressImage = async (file: File) => {
+    const options = {
+      maxSizeMB: 0.1,
+      maxWidthOrHeight: 600,
+      useWebWorker: true,
+    };
+    try {
+      const compressedFile = await imageCompression(file, options);
+      const base64 = await fileToBase64(compressedFile);
+      return base64;
+    } catch (error) {
+      console.error("Error compressing image", error);
+    }
+  };
+
+  const fileToBase64 = (file: File) =>
+    new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = () => resolve(reader.result as string);
+      reader.onerror = (error) => reject(error);
+    });
+
+  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files[0]) {
+      const file = e.target.files[0];
+
+      try {
+        const base64ProfilePicture = (await compressImage(file)) as string;
+        console.log(base64ProfilePicture);
+        setFormState({
+          ...formState,
+          profilePicture: base64ProfilePicture,
+        });
+      } catch (error) {
+        console.error("Error converting file to base64:", error);
+      }
+    }
+  };
   return (
     <form
       onSubmit={submitForm}
       className="relative flex w-full flex-col justify-center gap-4 rounded-3xl bg-white p-4 md:p-8"
     >
       <FormFieldsHeader />
       <div className="flex flex-row justify-between gap-2 md:gap-12 ">
+        <div className="flex w-1/2 flex-col gap-2">
+          <Label htmlFor="profilePicture">* Profile Picture:</Label>
+          <input
+            required
+            type="file"
+            id="profilePicture"
+            name="profilePicture"
+            onChange={handleFileChange}
+          />
+        </div>
         <div className="flex w-1/2 flex-col gap-2">
           <Label htmlFor="firstName">* First Name:</Label>
           <Input

src/components/UserProfile/ProfileHeader.tsx

@@ -25,7 +25,11 @@ export default function ProfileHeader() {
     <div className={CONTAINER_STYLES}>
       <div className={PROFILE_CONTAINER}>
         <Image
-          src="/images/userProfile/profile.png" //temporary profile image
+          src={
+            user?.profilePicture
+              ? user.profilePicture
+              : "/images/userProfile/profile.png"
+          } //temporary profile image
           alt="Profile Image"
           width={120}
           height={120}

src/components/UserProfile/TeamProfile.tsx

@@ -89,10 +89,10 @@ const TeamProfile = () => {
                   <li>
                     3. After forming a team , assign <strong>ONE</strong> member
                     to “Register New Team” using your Team Name. They will
-                    receive a unique 6-digit Team ID following registration.
+                    receive a unique 4-digit Team ID following registration.
                   </li>
                   <li>
-                    4. Next, provide this 6-digit <strong>Team ID</strong> to
+                    4. Next, provide this 4-digit <strong>Team ID</strong> to
                     all team members.
                   </li>
                   <li>

src/components/contexts/UserContext.tsx

@@ -30,6 +30,7 @@ export interface IUser {
   teamId?: string;
   populated: boolean;
   JUDGE_roomId: string;
+  profilePicture: string;
 }
 
 interface IUserReturn {
@@ -56,6 +57,7 @@ export function UserContextProvider({ children }: Props) {
       type: UserType.Guest,
       populated: false,
       JUDGE_roomId: "",
+      profilePicture: "",
     },
     queryKey: ["User"],
     queryFn: async () => {
@@ -100,6 +102,7 @@ export function UserContextProvider({ children }: Props) {
             firstName: response.data?.firstName ?? "",
             lastName: response.data?.lastName ?? "",
             JUDGE_roomId: response.data?.JUDGE_roomId,
+            profilePicture: response.data?.profilePicture ?? "",
           } as IUser;
         } catch (error) {
           console.error(error);

src/components/teamRegistration/JoinTeamInstructions.tsx

@@ -21,12 +21,12 @@ export default function JoinTeamInstructions() {
         <span className="font-bold"> ONE </span>
         member to <span className="font-bold"> “Register New Team” </span>
         using your Team Name. They will receive a unique
-        <span className="font-bold"> 6-digit Team ID </span>
+        <span className="font-bold"> 4-digit Team ID </span>
         following registration.
       </li>
       <li>
         Next, provide this
-        <span className="font-bold"> 6-digit Team ID </span>
+        <span className="font-bold"> 4-digit Team ID </span>
         to all team members.
       </li>
       <li>