From b9e145e24e32e8673ed90cd433eabda61a13637c Mon Sep 17 00:00:00 2001
From: Christian Walker <76548772+christianhelp@users.noreply.github.com>
Date: Sat, 10 Aug 2024 01:23:58 -0400
Subject: [PATCH] Fix Registration Form and Uploads  (#84)

* Fix blob and registration issue

* Update admin on dropdown

* Update for prettier fixing
---
 .../components/registration/RegisterForm.tsx  | 152 ++++++++++--------
 apps/web/src/components/shadcn/ui/command.tsx |   4 +-
 .../src/components/shared/ProfileButton.tsx   |   2 +-
 3 files changed, 88 insertions(+), 70 deletions(-)

diff --git a/apps/web/src/components/registration/RegisterForm.tsx b/apps/web/src/components/registration/RegisterForm.tsx
index 268f4ba7..2c17e657 100644
--- a/apps/web/src/components/registration/RegisterForm.tsx
+++ b/apps/web/src/components/registration/RegisterForm.tsx
@@ -32,6 +32,7 @@ import {
 	CommandGroup,
 	CommandInput,
 	CommandItem,
+	CommandList,
 } from "@/components/shadcn/ui/command";
 import {
 	Popover,
@@ -58,6 +59,7 @@ interface RegisterFormProps {
 export default function RegisterForm({ defaultEmail }: RegisterFormProps) {
 	const { isLoaded, userId } = useAuth();
 	const router = useRouter();
+
 	const form = useForm<z.infer<typeof RegisterFormValidator>>({
 		resolver: zodResolver(RegisterFormValidator),
 		defaultValues: {
@@ -95,7 +97,6 @@ export default function RegisterForm({ defaultEmail }: RegisterFormProps) {
 	const [uploadedFile, setUploadedFile] = useState<File | null>(null);
 	const [skills, setSkills] = useState<Tag[]>([]);
 	const [isLoading, setIsLoading] = useState(false);
-
 	const universityValue = form.watch("university");
 	const bioValue = form.watch("bio");
 
@@ -130,7 +131,8 @@ export default function RegisterForm({ defaultEmail }: RegisterFormProps) {
 		let resume: string = c.noResumeProvidedURL;
 
 		if (uploadedFile) {
-			const newBlob = await put(uploadedFile.name, uploadedFile, {
+			const fileLocation = `${c.hackathonName}/resume/${uploadedFile.name}`;
+			const newBlob = await put(fileLocation, uploadedFile, {
 				access: "public",
 				handleBlobUploadUrl: "/api/upload/resume/register",
 			});
@@ -522,7 +524,7 @@ export default function RegisterForm({ defaultEmail }: RegisterFormProps) {
 														{field.value
 															? schools.find(
 																	(school) =>
-																		school.toLowerCase() ===
+																		school ===
 																		field.value,
 																)
 															: "Select a University"}
@@ -533,40 +535,48 @@ export default function RegisterForm({ defaultEmail }: RegisterFormProps) {
 											<PopoverContent className="no-scrollbar max-h-[400px] w-[250px] overflow-y-auto p-0">
 												<Command>
 													<CommandInput placeholder="Search university..." />
-													<CommandEmpty>
-														No university found.
-													</CommandEmpty>
-													<CommandGroup>
-														{schools.map(
-															(school) => (
-																<CommandItem
-																	value={
-																		school
-																	}
-																	key={school}
-																	onSelect={(
-																		value,
-																	) => {
-																		form.setValue(
-																			"university",
+													<CommandList>
+														<CommandEmpty>
+															No university found.
+														</CommandEmpty>
+														<CommandGroup>
+															{schools.map(
+																(school) => (
+																	<CommandItem
+																		value={
+																			school
+																		}
+																		key={
+																			school
+																		}
+																		onSelect={(
 																			value,
-																		);
-																	}}
-																	className="cursor-pointer"
-																>
-																	<Check
-																		className={`mr-2 h-4 w-4 ${
-																			school.toLowerCase() ===
-																			field.value
-																				? "block"
-																				: "hidden"
-																		} `}
-																	/>
-																	{school}
-																</CommandItem>
-															),
-														)}
-													</CommandGroup>
+																		) => {
+																			console.log(
+																				"value changed to: ",
+																				value,
+																			);
+																			form.setValue(
+																				"university",
+																				value,
+																			);
+																		}}
+																		className="cursor-pointer"
+																	>
+																		<Check
+																			className={`mr-2 h-4 w-4 ${
+																				school.toLowerCase() ===
+																				field.value
+																					? "block"
+																					: "hidden"
+																			} `}
+																		/>
+																		{school}
+																	</CommandItem>
+																),
+															)}
+														</CommandGroup>
+													</CommandList>
 												</Command>
 											</PopoverContent>
 										</Popover>
@@ -595,7 +605,7 @@ export default function RegisterForm({ defaultEmail }: RegisterFormProps) {
 														{field.value
 															? majors.find(
 																	(major) =>
-																		major.toLowerCase() ===
+																		major ===
 																		field.value,
 																)
 															: "Select a Major"}
@@ -606,36 +616,44 @@ export default function RegisterForm({ defaultEmail }: RegisterFormProps) {
 											<PopoverContent className="no-scrollbar max-h-[400px] w-[250px] overflow-y-auto p-0">
 												<Command>
 													<CommandInput placeholder="Search major..." />
-													<CommandEmpty>
-														No major found.
-													</CommandEmpty>
-													<CommandGroup>
-														{majors.map((major) => (
-															<CommandItem
-																value={major}
-																key={major}
-																onSelect={(
-																	value,
-																) => {
-																	form.setValue(
-																		"major",
-																		value,
-																	);
-																}}
-																className="cursor-pointer"
-															>
-																<Check
-																	className={`mr-2 h-4 w-4 overflow-hidden ${
-																		major.toLowerCase() ===
-																		field.value
-																			? "block"
-																			: "hidden"
-																	} `}
-																/>
-																{major}
-															</CommandItem>
-														))}
-													</CommandGroup>
+													<CommandList>
+														<CommandEmpty>
+															No major found.
+														</CommandEmpty>
+														<CommandGroup>
+															{majors.map(
+																(major) => (
+																	<CommandItem
+																		value={
+																			major
+																		}
+																		key={
+																			major
+																		}
+																		onSelect={(
+																			value,
+																		) => {
+																			form.setValue(
+																				"major",
+																				value,
+																			);
+																		}}
+																		className="cursor-pointer"
+																	>
+																		<Check
+																			className={`mr-2 h-4 w-4 overflow-hidden ${
+																				major.toLowerCase() ===
+																				field.value
+																					? "block"
+																					: "hidden"
+																			} `}
+																		/>
+																		{major}
+																	</CommandItem>
+																),
+															)}
+														</CommandGroup>
+													</CommandList>
 												</Command>
 											</PopoverContent>
 										</Popover>
diff --git a/apps/web/src/components/shadcn/ui/command.tsx b/apps/web/src/components/shadcn/ui/command.tsx
index 14d0bbea..a3ca5bd1 100644
--- a/apps/web/src/components/shadcn/ui/command.tsx
+++ b/apps/web/src/components/shadcn/ui/command.tsx
@@ -120,13 +120,13 @@ const CommandItem = React.forwardRef<
 	<CommandPrimitive.Item
 		ref={ref}
 		className={cn(
-			"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground",
 			className,
 		)}
 		{...props}
 	/>
 ));
-
+// data-[disabled='true']:pointer-events-none data-[disabled='true']:opacity-50
 CommandItem.displayName = CommandPrimitive.Item.displayName;
 
 const CommandShortcut = ({
diff --git a/apps/web/src/components/shared/ProfileButton.tsx b/apps/web/src/components/shared/ProfileButton.tsx
index 0d379fbb..c94f47c7 100644
--- a/apps/web/src/components/shared/ProfileButton.tsx
+++ b/apps/web/src/components/shared/ProfileButton.tsx
@@ -164,7 +164,7 @@ export default async function ProfileButton() {
 					{user.role === "admin" ||
 						(user.role === "super_admin" && (
 							<Link href={`/admin`}>
-								<DropdownMenuItem className="cursor-pointer hover:!bg-amber-600">
+								<DropdownMenuItem className="cursor-pointer text-hackathon">
 									Admin
 								</DropdownMenuItem>
 							</Link>