Registration quality of life additions

apps/web/package.json

@@ -17,6 +17,7 @@
     "@internationalized/date": "^3.5.4",
     "@planetscale/database": "^1.18.0",
     "@radix-ui/react-accordion": "^1.1.2",
+    "@radix-ui/react-alert-dialog": "^1.1.1",
     "@radix-ui/react-avatar": "^1.0.3",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.4",

apps/web/src/actions/registration.ts

@@ -0,0 +1,115 @@
+"use server";
+import { authenticatedAction } from "@/lib/safe-action";
+import { db, sql } from "db";
+import { del } from "@vercel/blob";
+import z from "zod";
+import { returnValidationErrors } from "next-safe-action";
+import { hackerRegistrationFormValidator } from "@/validators/shared/registration";
+import { userCommonData, userHackerData } from "db/schema";
+import { currentUser } from "@clerk/nextjs/server";
+import c from "config";
+import { DatabaseError } from "db/types";
+import {
+	UNIQUE_KEY_CONSTRAINT_VIOLATION_CODE,
+	UNIQUE_KEY_MAPPER_DEFAULT_KEY,
+} from "@/lib/constants";
+
+const registerUserSchema = hackerRegistrationFormValidator;
+
+export const registerHacker = authenticatedAction
+	.schema(registerUserSchema)
+	.action(async ({ ctx: { userId }, parsedInput }) => {
+		const {
+			resume,
+			hackerTag,
+			email,
+			university,
+			major,
+			schoolID,
+			levelOfStudy,
+			hackathonsAttended,
+			softwareExperience,
+			heardFrom,
+			GitHub,
+			LinkedIn,
+			PersonalWebsite,
+			hasAcceptedMLHCoC,
+			hasSharedDataWithMLH,
+			isEmailable,
+			...userData
+		} = parsedInput;
+
+		const currUser = await currentUser();
+		if (!currUser) {
+			return returnValidationErrors(z.null(), {
+				_errors: ["Unauthorized (No User ID)"],
+			});
+		}
+		const totalUserCount = await db
+			.select({ count: sql<number>`count(*)`.mapWith(Number) })
+			.from(userCommonData);
+
+		try {
+			await db.transaction(async (tx) => {
+				await tx.insert(userCommonData).values({
+					clerkID: userId,
+					hackerTag: hackerTag.toLocaleLowerCase(),
+					email,
+					...userData,
+					profilePhoto: currUser.imageUrl,
+					skills: userData.skills.map((v) => v.text.toLowerCase()),
+					isFullyRegistered: true,
+					dietRestrictions: userData.dietRestrictions,
+				});
+
+				await tx.insert(userHackerData).values({
+					clerkID: userId,
+					university,
+					major,
+					schoolID,
+					levelOfStudy,
+					hackathonsAttended,
+					softwareExperience,
+					heardFrom,
+					GitHub,
+					LinkedIn,
+					PersonalWebsite,
+					resume,
+					group:
+						totalUserCount[0].count % Object.keys(c.groups).length,
+					hasAcceptedMLHCoC,
+					hasSharedDataWithMLH,
+					isEmailable,
+				});
+			});
+		} catch (e) {
+			// Catch duplicates because they will be based off of the error code 23505
+			if (resume != null && resume != c.noResumeProvidedURL) {
+				console.log(resume);
+				console.log("deleting resume");
+				await del(resume);
+			}
+			if (
+				e instanceof DatabaseError &&
+				e.code === UNIQUE_KEY_CONSTRAINT_VIOLATION_CODE
+			) {
+				console.error(e);
+				const constraintKeyIndex =
+					e.constraint as keyof typeof c.db.uniqueKeyMapper;
+				return {
+					success: false,
+					message:
+						c.db.uniqueKeyMapper[
+							constraintKeyIndex ?? UNIQUE_KEY_MAPPER_DEFAULT_KEY
+						] ?? e.detail,
+				};
+			} else {
+				throw e;
+			}
+		}
+
+		return {
+			success: true,
+			message: "Registration created successfully",
+		};
+	});

apps/web/src/app/register/page.tsx

@@ -31,7 +31,7 @@ export default async function Page() {
 		return (
 			<>
 				<Navbar />
-				<main className="dark:bg-zinc-950">
+				<main className="overflow-x-hidden dark:bg-zinc-950">
 					<div className="mx-auto min-h-screen max-w-5xl px-5 pb-10 pt-[20vh] font-sans dark:text-white">
 						<h1 className="text-6xl font-black md:text-8xl">
 							Register
@@ -63,7 +63,6 @@ export default async function Page() {
 		<main className="flex min-h-screen flex-col items-center justify-center px-2">
 			<div className="max-w-screen fixed left-1/2 top-[calc(50%+7rem)] h-[40vh] w-[800px] -translate-x-1/2 -translate-y-1/2 scale-150 overflow-x-hidden bg-hackathon opacity-30 blur-[100px] will-change-transform" />
 			<h2 className="text-4xl font-extrabold">{c.hackathonName}</h2>
-			{/* Why is this not a component? This same code is in here and insideo of sign-up */}
 			<h1 className="mb-10 pb-5 text-6xl font-extrabold text-hackathon dark:bg-gradient-to-t dark:from-hackathon/80 dark:to-white dark:bg-clip-text dark:text-transparent md:text-8xl">
 				Registration
 			</h1>

apps/web/src/components/registration/CreatingRegistration.tsx

@@ -1,18 +1,40 @@
-import { Bars } from "react-loader-spinner";
+import { ThreeCircles } from "react-loader-spinner";
+import { CircleCheckBig } from "lucide-react";
+
+interface CreatingRegistrationProps {
+	hasSuccess: boolean | undefined;
+	isLoading: boolean;
+}
+export default function CreatingRegistration(props: CreatingRegistrationProps) {
+	const { hasSuccess, isLoading } = props;
+
+	const isLoadingState = isLoading && !hasSuccess;
+	const hasSuccessState = hasSuccess && isLoading;
+
+	const message = isLoadingState
+		? "Creating Your Registration..."
+		: hasSuccessState
+			? "Registration successfully created! Redirecting to the dashboard..."
+			: "Something Went Wrong. Please Try Again.";
 
-export default function CreatingRegistration() {
 	return (
 		<main className="absolute bottom-0 left-0 z-10 flex min-h-screen w-screen flex-col items-center justify-center gap-y-20 bg-background">
-			<h1 className="text-3xl font-black">Creating Your Registration!</h1>
-			<Bars
-				height="80"
-				width="80"
-				color="hsl(var(--primary))"
-				ariaLabel="bars-loading"
-				wrapperStyle={{}}
-				wrapperClass=""
-				visible={true}
-			/>
+			<h1 className="w-full px-2 text-center text-3xl font-black md:px-0">
+				{message}
+			</h1>
+			{hasSuccessState ? (
+				<CircleCheckBig size={80} color="#16a34a" />
+			) : (
+				<ThreeCircles
+					height="80"
+					width="80"
+					color="hsl(var(--primary))"
+					ariaLabel="bars-loading"
+					wrapperStyle={{}}
+					wrapperClass=""
+					visible={true}
+				/>
+			)}
 		</main>
 	);
 }