From 15d90c719c9eb5272e945034e3d085718955e949 Mon Sep 17 00:00:00 2001
From: Jacob <jacob.ellerbrock.me@gmail.com>
Date: Tue, 10 Sep 2024 00:58:37 -0500
Subject: [PATCH] Fixed with Prettier

---
 apps/web/src/actions/user-profile-mod.ts      |  68 ++++++-
 apps/web/src/app/settings/layout.tsx          |   9 +-
 apps/web/src/app/settings/page.tsx            |   7 +-
 .../src/app/settings/registration/page.tsx    |   9 +-
 .../components/registration/RegisterForm.tsx  |   1 -
 .../components/settings/AccountSettings.tsx   |  85 +++++----
 .../components/settings/ProfileSettings.tsx   |  59 +++---
 .../RegistrationForm/RegisterFormSettings.tsx | 179 ++++++++++--------
 .../settings/RegistrationSettings.tsx         |  20 +-
 9 files changed, 275 insertions(+), 162 deletions(-)

diff --git a/apps/web/src/actions/user-profile-mod.ts b/apps/web/src/actions/user-profile-mod.ts
index 4cbdd7aa..d40639b3 100644
--- a/apps/web/src/actions/user-profile-mod.ts
+++ b/apps/web/src/actions/user-profile-mod.ts
@@ -31,14 +31,55 @@ export const modifyRegistrationData = authenticatedAction(
 		LinkedIn: z.string().nullish(),
 		PersonalWebsite: z.string().nullish(),
 	}),
-	async ({ age, gender, race, ethnicity, wantsToReceiveMLHEmails, university, major, levelOfStudy, shortID, hackathonsAttended, softwareExperience, heardFrom, shirtSize, dietRestrictions, accommodationNote, GitHub, LinkedIn, PersonalWebsite }, { userId }) => {
+	async (
+		{
+			age,
+			gender,
+			race,
+			ethnicity,
+			wantsToReceiveMLHEmails,
+			university,
+			major,
+			levelOfStudy,
+			shortID,
+			hackathonsAttended,
+			softwareExperience,
+			heardFrom,
+			shirtSize,
+			dietRestrictions,
+			accommodationNote,
+			GitHub,
+			LinkedIn,
+			PersonalWebsite,
+		},
+		{ userId },
+	) => {
 		const user = await db.query.users.findFirst({
 			where: eq(users.clerkID, userId),
 		});
 		if (!user) throw new Error("User not found");
 		await db
 			.update(registrationData)
-			.set({ age, gender, race, ethnicity, wantsToReceiveMLHEmails, university, major, levelOfStudy, shortID, hackathonsAttended, softwareExperience, heardFrom, shirtSize, dietRestrictions, accommodationNote, GitHub, LinkedIn, PersonalWebsite })
+			.set({
+				age,
+				gender,
+				race,
+				ethnicity,
+				wantsToReceiveMLHEmails,
+				university,
+				major,
+				levelOfStudy,
+				shortID,
+				hackathonsAttended,
+				softwareExperience,
+				heardFrom,
+				shirtSize,
+				dietRestrictions,
+				accommodationNote,
+				GitHub,
+				LinkedIn,
+				PersonalWebsite,
+			})
 			.where(eq(registrationData.clerkID, user.clerkID));
 		return {
 			success: true,
@@ -79,7 +120,7 @@ export const modifyResume = authenticatedAction(
 			.where(eq(registrationData.clerkID, user.clerkID));
 		return {
 			success: true,
-			newResume: resume
+			newResume: resume,
 		};
 	},
 );
@@ -92,21 +133,25 @@ export const modifyProfileData = authenticatedAction(
 		discordUsername: z.string(),
 	}),
 	async ({ pronouns, bio, skills, discordUsername }, { userId }) => {
-		const user = await db.select().from(users).leftJoin(profileData, eq(users.hackerTag, profileData.hackerTag)).where(eq(users.clerkID, userId));
+		const user = await db
+			.select()
+			.from(users)
+			.leftJoin(profileData, eq(users.hackerTag, profileData.hackerTag))
+			.where(eq(users.clerkID, userId));
 		if (!user || !user[0].profile_data) {
 			throw new Error("User not found");
 		}
 		await db
 			.update(profileData)
 			.set({ pronouns, bio, skills, discordUsername })
-			.where(eq(profileData.hackerTag, user[0].profile_data.hackerTag))
+			.where(eq(profileData.hackerTag, user[0].profile_data.hackerTag));
 		return {
 			success: true,
 			newPronouns: pronouns,
 			newBio: bio,
 			newSkills: skills,
 			newDiscord: discordUsername,
-		}
+		};
 	},
 );
 
@@ -116,9 +161,12 @@ export const modifyAccountSettings = authenticatedAction(
 		lastName: z.string().min(1).max(50),
 		//email: z.string().min(1).max(50),
 		hackerTag: z.string().min(1).max(50),
-		hasSearchableProfile: z.boolean()
+		hasSearchableProfile: z.boolean(),
 	}),
-	async ({ firstName, lastName, hackerTag, hasSearchableProfile }, { userId }) => {
+	async (
+		{ firstName, lastName, hackerTag, hasSearchableProfile },
+		{ userId },
+	) => {
 		const user = await db.query.users.findFirst({
 			where: eq(users.clerkID, userId),
 		});
@@ -132,7 +180,7 @@ export const modifyAccountSettings = authenticatedAction(
 				return {
 					success: false,
 					message: "hackertag_not_unique",
-				}
+				};
 			}
 		}
 		await db
@@ -142,7 +190,7 @@ export const modifyAccountSettings = authenticatedAction(
 		await db
 			.update(profileData) // see above comment
 			.set({ hackerTag })
-			.where(eq(profileData.hackerTag, oldHackerTag))
+			.where(eq(profileData.hackerTag, oldHackerTag));
 		return {
 			success: true,
 			newFirstName: firstName,
diff --git a/apps/web/src/app/settings/layout.tsx b/apps/web/src/app/settings/layout.tsx
index 11bdcfb7..91a1b723 100644
--- a/apps/web/src/app/settings/layout.tsx
+++ b/apps/web/src/app/settings/layout.tsx
@@ -33,11 +33,14 @@ export default async function ({ children }: { children: ReactNode }) {
 						</div>
 					</div>
 				</div>
-				<aside className="sticky top-20 h-screen hidden md:block">
+				<aside className="sticky top-20 hidden h-screen md:block">
 					{/* <SettingsSection name="Settings" path="/settings" /> */}
-					<SettingsSection name="Account" path="/settings#account"  />
+					<SettingsSection name="Account" path="/settings#account" />
 					<SettingsSection name="Profile" path="/settings#profile" />
-					<SettingsSection name="Registration" path="/settings#registration" />
+					<SettingsSection
+						name="Registration"
+						path="/settings#registration"
+					/>
 				</aside>
 				<div className="col-span-4 mb-20 ml-5">{children}</div>
 			</div>
diff --git a/apps/web/src/app/settings/page.tsx b/apps/web/src/app/settings/page.tsx
index ba4200c1..e4cd040e 100644
--- a/apps/web/src/app/settings/page.tsx
+++ b/apps/web/src/app/settings/page.tsx
@@ -21,7 +21,10 @@ export default async function Page() {
 
 	function Header({ tag }: { tag: string }) {
 		return (
-			<h1 id={tag.toLowerCase()} className="mt-10 pb-5 text-4xl font-bold">
+			<h1
+				id={tag.toLowerCase()}
+				className="mt-10 pb-5 text-4xl font-bold"
+			>
 				{tag}
 			</h1>
 		);
@@ -32,7 +35,7 @@ export default async function Page() {
 			<Header tag="Account" />
 			<AccountSettings user={user} />
 			<Header tag="Profile" />
-			<ProfileSettings profile={user.profileData}/>
+			<ProfileSettings profile={user.profileData} />
 			<Header tag={"Registration"} />
 			<RegistrationSettings />
 		</div>
diff --git a/apps/web/src/app/settings/registration/page.tsx b/apps/web/src/app/settings/registration/page.tsx
index f4c14e88..448cfdb1 100644
--- a/apps/web/src/app/settings/registration/page.tsx
+++ b/apps/web/src/app/settings/registration/page.tsx
@@ -1,4 +1,4 @@
-import RegisterFormSettings from "@/components/settings/RegistrationForm/RegisterFormSettings"
+import RegisterFormSettings from "@/components/settings/RegistrationForm/RegisterFormSettings";
 import { auth } from "@clerk/nextjs";
 import { db } from "db";
 import { eq } from "db/drizzle";
@@ -6,7 +6,6 @@ import { users } from "db/schema";
 import { redirect } from "next/navigation";
 
 export default async function Page() {
-
 	const { userId } = auth();
 	if (!userId) throw new Error("User not found");
 	const user = await db.query.users.findFirst({
@@ -18,7 +17,5 @@ export default async function Page() {
 	});
 	if (!user) return redirect("/sign-in");
 
-	return (
-		<RegisterFormSettings data={user.registrationData} />
-	)
-}
\ No newline at end of file
+	return <RegisterFormSettings data={user.registrationData} />;
+}
diff --git a/apps/web/src/components/registration/RegisterForm.tsx b/apps/web/src/components/registration/RegisterForm.tsx
index 2ab9e756..aef6610e 100644
--- a/apps/web/src/components/registration/RegisterForm.tsx
+++ b/apps/web/src/components/registration/RegisterForm.tsx
@@ -502,7 +502,6 @@ export default function RegisterForm({ defaultEmail }: RegisterFormProps) {
 									: "grid-cols-1 md:grid-cols-5"
 							} gap-x-2 gap-y-4`}
 						>
-
 							<FormField
 								control={form.control}
 								name="university"
diff --git a/apps/web/src/components/settings/AccountSettings.tsx b/apps/web/src/components/settings/AccountSettings.tsx
index ee9e9870..6942b20c 100644
--- a/apps/web/src/components/settings/AccountSettings.tsx
+++ b/apps/web/src/components/settings/AccountSettings.tsx
@@ -28,8 +28,10 @@ export default function AccountSettings({ user }: AccountSettingsProps) {
 	const [newLastName, setNewLastName] = useState(user.lastName);
 	//const [newEmail, setNewEmail] = useState(user.email);
 	const [newHackerTag, setNewHackerTag] = useState(user.hackerTag);
-	const [newIsProfileSearchable, setNewIsProfileSearchable] = useState(user.hasSearchableProfile);
-	const [hackerTagTakenAlert, setHackerTagTakenAlert] = useState(false)
+	const [newIsProfileSearchable, setNewIsProfileSearchable] = useState(
+		user.hasSearchableProfile,
+	);
+	const [hackerTagTakenAlert, setHackerTagTakenAlert] = useState(false);
 
 	const [isLoading, setIsLoading] = useState(false);
 
@@ -37,17 +39,21 @@ export default function AccountSettings({ user }: AccountSettingsProps) {
 		modifyAccountSettings,
 		{
 			onSuccess: ({ success, message }) => {
-				setIsLoading(false)
+				setIsLoading(false);
 				toast.dismiss();
 				if (!success) {
-					if (message == "hackertag_not_unique") {toast.error("Hackertag already exists"); setHackerTagTakenAlert(true);}
-				} else
-					toast.success("Account updated successfully!");
+					if (message == "hackertag_not_unique") {
+						toast.error("Hackertag already exists");
+						setHackerTagTakenAlert(true);
+					}
+				} else toast.success("Account updated successfully!");
 			},
 			onError: () => {
-				setIsLoading(false)
+				setIsLoading(false);
 				toast.dismiss();
-				toast.error("An error occurred while updating your account settings!");
+				toast.error(
+					"An error occurred while updating your account settings!",
+				);
 			},
 		},
 	);
@@ -67,9 +73,11 @@ export default function AccountSettings({ user }: AccountSettingsProps) {
 							value={newFirstName}
 							onChange={(e) => setNewFirstName(e.target.value)}
 						/>
-						{(!newFirstName) ?
-							<div className={"mt-1 text-sm text-red-500"}>This field can't be empty!</div> : null
-						}
+						{!newFirstName ? (
+							<div className={"mt-1 text-sm text-red-500"}>
+								This field can't be empty!
+							</div>
+						) : null}
 					</div>
 					<div>
 						<Label htmlFor={"lastname"}>Last Name</Label>
@@ -79,9 +87,11 @@ export default function AccountSettings({ user }: AccountSettingsProps) {
 							value={newLastName}
 							onChange={(e) => setNewLastName(e.target.value)}
 						/>
-						{(!newLastName) ?
-							<div className={"mt-1 text-sm text-red-500"}>This field can't be empty!</div> : null
-						}
+						{!newLastName ? (
+							<div className={"mt-1 text-sm text-red-500"}>
+								This field can't be empty!
+							</div>
+						) : null}
 					</div>
 					{/*<div className={"col-span-full"}>*/}
 					{/*	<Label htmlFor="email">Email</Label>*/}
@@ -97,15 +107,14 @@ export default function AccountSettings({ user }: AccountSettingsProps) {
 					{/*	}*/}
 					{/*</div>*/}
 				</div>
-				<h2 className="pt-7 pb-5 text-3xl font-semibold">
+				<h2 className="pb-5 pt-7 text-3xl font-semibold">
 					Public Information
 				</h2>
 				<div className="grid max-w-[500px] grid-cols-1 gap-x-2 gap-y-2">
 					<div>
 						<Label htmlFor="hackertag">HackerTag</Label>
-						<div className="flex mt-2">
-							<div
-								className="flex h-10 w-10 items-center justify-center rounded-l bg-accent text-lg font-light text-primary">
+						<div className="mt-2 flex">
+							<div className="flex h-10 w-10 items-center justify-center rounded-l bg-accent text-lg font-light text-primary">
 								@
 							</div>
 							<Input
@@ -113,30 +122,40 @@ export default function AccountSettings({ user }: AccountSettingsProps) {
 								placeholder={`${c.hackathonName.toLowerCase()}`}
 								value={newHackerTag}
 								onChange={(e) => {
-									setNewHackerTag(e.target.value)
-									setHackerTagTakenAlert(false)
+									setNewHackerTag(e.target.value);
+									setHackerTagTakenAlert(false);
 								}}
 							/>
 						</div>
-						{(hackerTagTakenAlert) ?
-							<div
-								className={"text-sm text-red-500"}
-							>
+						{hackerTagTakenAlert ? (
+							<div className={"text-sm text-red-500"}>
 								HackerTag is already taken!
 							</div>
-							:
+						) : (
 							""
-						}
-						{(!newHackerTag) ?
-							<div className={"mt-1 text-sm text-red-500"}>This field can't be empty!</div> : null
-						}
+						)}
+						{!newHackerTag ? (
+							<div className={"mt-1 text-sm text-red-500"}>
+								This field can't be empty!
+							</div>
+						) : null}
 					</div>
-					<div className={"flex max-w-[600px] flex-row items-start space-x-3 space-y-0 rounded-md border p-4"}>
+					<div
+						className={
+							"flex max-w-[600px] flex-row items-start space-x-3 space-y-0 rounded-md border p-4"
+						}
+					>
 						<Checkbox
 							checked={newIsProfileSearchable}
-							onCheckedChange={() => setNewIsProfileSearchable(!newIsProfileSearchable)}
+							onCheckedChange={() =>
+								setNewIsProfileSearchable(
+									!newIsProfileSearchable,
+								)
+							}
 						/>
-						<Label htmlFor="profileIsSearchable">Make my profile searchable by other Hackers</Label>
+						<Label htmlFor="profileIsSearchable">
+							Make my profile searchable by other Hackers
+						</Label>
 					</div>
 				</div>
 				<Button
@@ -156,7 +175,7 @@ export default function AccountSettings({ user }: AccountSettingsProps) {
 				>
 					{isLoading ? (
 						<>
-							<Loader2 className={"mr-2 h-4 w-4 animate-spin"}/>
+							<Loader2 className={"mr-2 h-4 w-4 animate-spin"} />
 							<div>Updating</div>
 						</>
 					) : (
diff --git a/apps/web/src/components/settings/ProfileSettings.tsx b/apps/web/src/components/settings/ProfileSettings.tsx
index 166e84a8..30ae3306 100644
--- a/apps/web/src/components/settings/ProfileSettings.tsx
+++ b/apps/web/src/components/settings/ProfileSettings.tsx
@@ -6,7 +6,7 @@ import { Label } from "@/components/shadcn/ui/label";
 import { Textarea } from "@/components/shadcn/ui/textarea";
 import {
 	modifyProfileData,
-	updateProfileImage
+	updateProfileImage,
 } from "@/actions/user-profile-mod";
 import { useUser } from "@clerk/nextjs";
 import { useAction } from "next-safe-action/hook";
@@ -38,32 +38,31 @@ export default function ProfileSettings({ profile }: ProfileSettingsProps) {
 		let t: Tag = {
 			id: profile.skills[i],
 			text: profile.skills[i],
-		}
+		};
 		curSkills.push(t);
 	}
 	const [newSkills, setNewSkills] = useState<Tag[]>(curSkills);
 	const [newDiscord, setNewDiscord] = useState(profile.discordUsername);
 
-	const [isProfilePictureLoading, setIsProfilePictureLoading] = useState(false);
-	const [isProfileSettingsLoading, setIsProfileSettingsLoading] = useState(false);
+	const [isProfilePictureLoading, setIsProfilePictureLoading] =
+		useState(false);
+	const [isProfileSettingsLoading, setIsProfileSettingsLoading] =
+		useState(false);
 
 	const { user } = useUser();
 
-	const { execute: runModifyProfileData } = useAction(
-		modifyProfileData,
-		{
-			onSuccess: () => {
-				setIsProfileSettingsLoading(false);
-				toast.dismiss();
-				toast.success("Profile updated successfully!");
-			},
-			onError: () => {
-				setIsProfileSettingsLoading(false);
-				toast.dismiss();
-				toast.error("An error occurred while updating your profile!");
-			},
+	const { execute: runModifyProfileData } = useAction(modifyProfileData, {
+		onSuccess: () => {
+			setIsProfileSettingsLoading(false);
+			toast.dismiss();
+			toast.success("Profile updated successfully!");
 		},
-	);
+		onError: () => {
+			setIsProfileSettingsLoading(false);
+			toast.dismiss();
+			toast.error("An error occurred while updating your profile!");
+		},
+	});
 
 	const { execute: runUpdateProfileImage } = useAction(updateProfileImage, {
 		onSuccess: async () => {
@@ -130,7 +129,9 @@ export default function ProfileSettings({ profile }: ProfileSettingsProps) {
 					>
 						{isProfilePictureLoading ? (
 							<>
-								<Loader2 className={"mr-2 h-4 w-4 animate-spin"}/>
+								<Loader2
+									className={"mr-2 h-4 w-4 animate-spin"}
+								/>
 								<div>Updating</div>
 							</>
 						) : (
@@ -166,7 +167,7 @@ export default function ProfileSettings({ profile }: ProfileSettingsProps) {
 							inputFieldPostion="top"
 							placeholder="Type and then press enter to add a skill..."
 							tags={newSkills}
-							className="sm:min-w-[450px] mt-2"
+							className="mt-2 sm:min-w-[450px]"
 							setTags={(newTags) => {
 								setNewSkills(newTags);
 							}}
@@ -181,9 +182,11 @@ export default function ProfileSettings({ profile }: ProfileSettingsProps) {
 							value={newDiscord}
 							onChange={(e) => setNewDiscord(e.target.value)}
 						/>
-						{(!newDiscord) ?
-							<div className={"mt-1 text-sm text-red-500"}>This field can't be empty!</div> : null
-						}
+						{!newDiscord ? (
+							<div className={"mt-1 text-sm text-red-500"}>
+								This field can't be empty!
+							</div>
+						) : null}
 					</div>
 					<Button
 						onClick={() => {
@@ -194,8 +197,10 @@ export default function ProfileSettings({ profile }: ProfileSettingsProps) {
 							runModifyProfileData({
 								pronouns: newPronouns,
 								bio: newBio,
-								skills: newSkills.map((v) => v.text.toLowerCase()),
-								discordUsername: newDiscord
+								skills: newSkills.map((v) =>
+									v.text.toLowerCase(),
+								),
+								discordUsername: newDiscord,
 							});
 						}}
 						className="mt-5"
@@ -203,7 +208,9 @@ export default function ProfileSettings({ profile }: ProfileSettingsProps) {
 					>
 						{isProfileSettingsLoading ? (
 							<>
-								<Loader2 className={"mr-2 h-4 w-4 animate-spin"}/>
+								<Loader2
+									className={"mr-2 h-4 w-4 animate-spin"}
+								/>
 								<div>Updating</div>
 							</>
 						) : (
diff --git a/apps/web/src/components/settings/RegistrationForm/RegisterFormSettings.tsx b/apps/web/src/components/settings/RegistrationForm/RegisterFormSettings.tsx
index 6aabd4df..2bd87168 100644
--- a/apps/web/src/components/settings/RegistrationForm/RegisterFormSettings.tsx
+++ b/apps/web/src/components/settings/RegistrationForm/RegisterFormSettings.tsx
@@ -30,7 +30,8 @@ import {
 	CommandEmpty,
 	CommandGroup,
 	CommandInput,
-	CommandItem, CommandList
+	CommandItem,
+	CommandList,
 } from "@/components/shadcn/ui/command";
 import {
 	Popover,
@@ -44,10 +45,13 @@ import { Textarea } from "@/components/shadcn/ui/textarea";
 import { FileRejection, useDropzone } from "react-dropzone";
 import { put } from "@vercel/blob";
 import { useAction } from "next-safe-action/hook";
-import { modifyRegistrationData, modifyResume } from "@/actions/user-profile-mod";
+import {
+	modifyRegistrationData,
+	modifyResume,
+} from "@/actions/user-profile-mod";
 import { toast } from "sonner";
 import Link from "next/link";
-import { Loader2 } from "lucide-react"
+import { Loader2 } from "lucide-react";
 
 interface RegistrationData {
 	age: number;
@@ -72,11 +76,11 @@ interface RegistrationData {
 }
 
 interface RegisterFormSettingsProps {
-	data: RegistrationData
+	data: RegistrationData;
 }
 
 export default function RegisterForm({ data }: RegisterFormSettingsProps) {
-	if (data.heardFrom === null) data.heardFrom = undefined
+	if (data.heardFrom === null) data.heardFrom = undefined;
 	const form = useForm<z.infer<typeof RegisterFormValidator>>({
 		resolver: zodResolver(RegisterFormValidator),
 		defaultValues: {
@@ -104,12 +108,10 @@ export default function RegisterForm({ data }: RegisterFormSettingsProps) {
 	const [uploadedFile, setUploadedFile] = useState<File | null>(null);
 	const resumeLink: string = data.resume ?? c.noResumeProvidedURL;
 	// @ts-ignore
-	let f = new File([data.resume], resumeLink.split('/').pop());
+	let f = new File([data.resume], resumeLink.split("/").pop());
 	useEffect(() => {
-		if (resumeLink === c.noResumeProvidedURL)
-			setUploadedFile(null)
-		else
-			setUploadedFile(f)
+		if (resumeLink === c.noResumeProvidedURL) setUploadedFile(null);
+		else setUploadedFile(f);
 	}, []);
 
 	const [isLoading, setIsLoading] = useState(false);
@@ -136,29 +138,27 @@ export default function RegisterForm({ data }: RegisterFormSettingsProps) {
 		modifyRegistrationData,
 		{
 			onSuccess: ({ success }) => {
-				setIsLoading(false)
+				setIsLoading(false);
 				toast.dismiss();
 				toast.success("Account updated successfully!");
 			},
 			onError: () => {
-				setIsLoading(false)
+				setIsLoading(false);
 				toast.dismiss();
-				toast.error("An error occurred while updating your account settings!");
+				toast.error(
+					"An error occurred while updating your account settings!",
+				);
 			},
 		},
 	);
 
-	const { execute: runModifyResume } = useAction(
-		modifyResume,
-		{
-			onSuccess: ({ success }) => {
-			},
-			onError: () => {
-				toast.dismiss();
-				toast.error("An error occurred while uploading resume!");
-			}
-		}
-	)
+	const { execute: runModifyResume } = useAction(modifyResume, {
+		onSuccess: ({ success }) => {},
+		onError: () => {
+			toast.dismiss();
+			toast.error("An error occurred while uploading resume!");
+		},
+	});
 
 	async function onSubmit(data: z.infer<typeof RegisterFormValidator>) {
 		console.log(data);
@@ -213,11 +213,16 @@ export default function RegisterForm({ data }: RegisterFormSettingsProps) {
 
 	return (
 		<div>
-			<Button variant={"secondary"} className={"mb-3"} disabled={goBackLoading} onClick={() => setGoBackLoading(true)}>
+			<Button
+				variant={"secondary"}
+				className={"mb-3"}
+				disabled={goBackLoading}
+				onClick={() => setGoBackLoading(true)}
+			>
 				<Link href={"/settings"}>
 					{goBackLoading ? (
 						<div className={"flex"}>
-							<Loader2 className={"mr-2 h-4 w-4 animate-spin"}/>
+							<Loader2 className={"mr-2 h-4 w-4 animate-spin"} />
 						</div>
 					) : (
 						<Link href={"/settings"}>Back</Link>
@@ -363,8 +368,7 @@ export default function RegisterForm({ data }: RegisterFormSettingsProps) {
 							control={form.control}
 							name="wantsToReceiveMLHEmails"
 							render={({ field }) => (
-								<FormItem
-									className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4">
+								<FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4">
 									<FormControl>
 										<Checkbox
 											checked={field.value}
@@ -411,15 +415,15 @@ export default function RegisterForm({ data }: RegisterFormSettingsProps) {
 														className={cn(
 															"w-full justify-between",
 															!field.value &&
-															"text-muted-foreground",
+																"text-muted-foreground",
 														)}
 													>
 														{field.value
 															? schools.find(
-																(school) =>
-																	school ===
-																	field.value,
-															)
+																	(school) =>
+																		school ===
+																		field.value,
+																)
 															: "Select a University"}
 														<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
 													</Button>
@@ -488,15 +492,15 @@ export default function RegisterForm({ data }: RegisterFormSettingsProps) {
 														className={cn(
 															"w-full justify-between",
 															!field.value &&
-															"text-muted-foreground",
+																"text-muted-foreground",
 														)}
 													>
 														{field.value
 															? majors.find(
-																(major) =>
-																	major ===
-																	field.value,
-															)
+																	(major) =>
+																		major ===
+																		field.value,
+																)
 															: "Select a Major"}
 														<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
 													</Button>
@@ -805,20 +809,20 @@ export default function RegisterForm({ data }: RegisterFormSettingsProps) {
 																		) => {
 																			return checked
 																				? field.onChange(
-																					[
-																						...field.value,
-																						item,
-																					],
-																				)
-																				: field.onChange(
-																					field.value?.filter(
-																						(
-																							value,
-																						) =>
-																							value !==
+																						[
+																							...field.value,
 																							item,
-																					),
-																				);
+																						],
+																					)
+																				: field.onChange(
+																						field.value?.filter(
+																							(
+																								value,
+																							) =>
+																								value !==
+																								item,
+																						),
+																					);
 																		}}
 																	/>
 																</FormControl>
@@ -925,14 +929,24 @@ export default function RegisterForm({ data }: RegisterFormSettingsProps) {
 										>
 											<input {...getInputProps()} />
 											<p className="p-2 text-center">
-												{uploadedFile
-													? oldFile
-														? <Link href={resumeLink}>{uploadedFile.name} ({Math.round(uploadedFile.size)}kb)</Link>
-														: `${uploadedFile.name} (${Math.round(uploadedFile.size / 1024)}kb)`
-
-													: isDragActive
-														? "Drop your resume here..."
-														: "Drag 'n' drop your resume here, or click to select a file"}
+												{uploadedFile ? (
+													oldFile ? (
+														<Link href={resumeLink}>
+															{uploadedFile.name}{" "}
+															(
+															{Math.round(
+																uploadedFile.size,
+															)}
+															kb)
+														</Link>
+													) : (
+														`${uploadedFile.name} (${Math.round(uploadedFile.size / 1024)}kb)`
+													)
+												) : isDragActive ? (
+													"Drop your resume here..."
+												) : (
+													"Drag 'n' drop your resume here, or click to select a file"
+												)}
 											</p>
 											{uploadedFile ? (
 												<Button
@@ -940,9 +954,7 @@ export default function RegisterForm({ data }: RegisterFormSettingsProps) {
 													onClick={() => {
 														setUploadedFile(null);
 														setOldFile(false);
-													}
-
-													}
+													}}
 												>
 													Remove
 												</Button>
@@ -955,14 +967,19 @@ export default function RegisterForm({ data }: RegisterFormSettingsProps) {
 						/>
 					</FormGroupWrapper>
 					<Button
-						onClick={ async () => {
-							setIsLoading(true)
-							let resume: string = c.noResumeProvidedURL
+						onClick={async () => {
+							setIsLoading(true);
+							let resume: string = c.noResumeProvidedURL;
 							if (uploadedFile) {
-								const newBlob = await put(uploadedFile.name, uploadedFile, {
-									access: "public",
-									handleBlobUploadUrl: "/api/upload/resume/register",
-								});
+								const newBlob = await put(
+									uploadedFile.name,
+									uploadedFile,
+									{
+										access: "public",
+										handleBlobUploadUrl:
+											"/api/upload/resume/register",
+									},
+								);
 								resume = newBlob.url;
 							}
 							runModifyRegistrationData({
@@ -970,30 +987,40 @@ export default function RegisterForm({ data }: RegisterFormSettingsProps) {
 								gender: form.watch("gender"),
 								race: form.watch("race"),
 								ethnicity: form.watch("ethnicity"),
-								wantsToReceiveMLHEmails: form.watch("wantsToReceiveMLHEmails"),
+								wantsToReceiveMLHEmails: form.watch(
+									"wantsToReceiveMLHEmails",
+								),
 								university: form.watch("university"),
 								major: form.watch("major"),
 								levelOfStudy: form.watch("levelOfStudy"),
 								shortID: form.watch("shortID"),
-								hackathonsAttended: +form.watch("hackathonsAttended"),
-								softwareExperience: form.watch("softwareBuildingExperience"),
+								hackathonsAttended:
+									+form.watch("hackathonsAttended"),
+								softwareExperience: form.watch(
+									"softwareBuildingExperience",
+								),
 								heardFrom: form.watch("heardAboutEvent"),
 								shirtSize: form.watch("shirtSize"),
-								dietRestrictions: form.watch("dietaryRestrictions"),
-								accommodationNote: form.watch("accommodationNote"),
+								dietRestrictions: form.watch(
+									"dietaryRestrictions",
+								),
+								accommodationNote:
+									form.watch("accommodationNote"),
 								GitHub: form.watch("github"),
 								LinkedIn: form.watch("linkedin"),
 								PersonalWebsite: form.watch("personalWebsite"),
 							});
 							runModifyResume({
-								resume
+								resume,
 							});
 						}}
 						disabled={isLoading}
 					>
 						{isLoading ? (
 							<>
-								<Loader2 className={"mr-2 h-4 w-4 animate-spin"}/>
+								<Loader2
+									className={"mr-2 h-4 w-4 animate-spin"}
+								/>
 								<div>Updating</div>
 							</>
 						) : (
diff --git a/apps/web/src/components/settings/RegistrationSettings.tsx b/apps/web/src/components/settings/RegistrationSettings.tsx
index bc352bd5..4d6f9150 100644
--- a/apps/web/src/components/settings/RegistrationSettings.tsx
+++ b/apps/web/src/components/settings/RegistrationSettings.tsx
@@ -6,23 +6,33 @@ import { useState } from "react";
 import { Loader2 } from "lucide-react";
 
 export default function RegistrationSettings() {
-
 	const [isLoading, setIsLoading] = useState(false);
 
 	return (
 		<main>
 			<div className="rounded-lg border-2 border-muted px-5 py-5">
 				<div className={"mb-5"}>
-					Registration data is only editable in the form. <i>Note: Some hackathons may not accept edited information as it is already in their database</i>
+					Registration data is only editable in the form.{" "}
+					<i>
+						Note: Some hackathons may not accept edited information
+						as it is already in their database
+					</i>
 				</div>
-				<Button variant={"secondary"} asChild disabled={isLoading} onClick={() => setIsLoading(true)}>
+				<Button
+					variant={"secondary"}
+					asChild
+					disabled={isLoading}
+					onClick={() => setIsLoading(true)}
+				>
 					{isLoading ? (
 						<div className={"flex"}>
-							<Loader2 className={"mr-2 h-4 w-4 animate-spin"}/>
+							<Loader2 className={"mr-2 h-4 w-4 animate-spin"} />
 							<div>Please wait...</div>
 						</div>
 					) : (
-						<Link href={"/settings/registration"}>Click here to go back to registration form</Link>
+						<Link href={"/settings/registration"}>
+							Click here to go back to registration form
+						</Link>
 					)}
 				</Button>
 			</div>