Merge pull request #125 from HackAtUCI/feature/client-apply

Implement client-side application form submission

Author: taesungh

apps/site/src/app/apply/sections/Components/DropdownSelect.tsx

@@ -26,7 +26,7 @@ const OtherPopup = ({ value, name }: OtherProps) => {
 				</label>
 				<input
 					type="text"
-					name={`${name}-other-input`}
+					name={`other_${name}`}
 					id={`${name}-other-input`}
 					className="border-b-2 p-1 h-6 border-black w-6/12"
 					required

apps/site/src/app/apply/sections/Components/RadioSelect.tsx

@@ -10,17 +10,17 @@ interface RadioInputs {
 	containerClass: string;
 }
 
-interface IsChecked {
+interface OtherInputProps {
 	isChecked: boolean;
-	id: string;
+	name: string;
 }
 
-const OtherInput = forwardRef<HTMLInputElement, IsChecked>(
-	({ isChecked, id }, ref) => (
+const OtherInput = forwardRef<HTMLInputElement, OtherInputProps>(
+	({ isChecked, name }, ref) => (
 		<input
 			ref={ref}
 			type="text"
-			name={`${id}-other`}
+			name={name}
 			className={
 				isChecked
 					? "border-b-2 p-1 h-6 border-black w-6/12"
@@ -76,7 +76,7 @@ export default function RadioSelect({
 								</label>
 								<OtherInput
 									isChecked={isOtherChecked}
-									id={IdentifierId}
+									name={`other_${name}`}
 									ref={otherRef}
 								/>
 							</div>

apps/site/src/app/apply/sections/Form/Form.tsx

@@ -1,3 +1,8 @@
+"use client";
+
+import { FormEvent, useState } from "react";
+import axios from "axios";
+
 import Button from "@/lib/components/Button/Button";
 
 import BasicInformation from "./BasicInformation";
@@ -8,20 +13,82 @@ import ResumeInformation from "./ResumeInformation";
 
 import styles from "./Form.module.scss";
 
+const APPLY_PATH = "/api/user/apply";
+const FIELDS_WITH_OTHER = ["pronouns", "ethnicity", "school", "major"];
+
 export default function Form() {
+	const [submitting, setSubmitting] = useState(false);
+	const [sessionExpired, setSessionExpired] = useState(false);
+
+	const handleSubmit = async (
+		event: FormEvent<HTMLFormElement>,
+	): Promise<void> => {
+		// Disable native post submission
+		event.preventDefault();
+		setSubmitting(true);
+		setSessionExpired(false);
+
+		const formData = new FormData(event.currentTarget);
+
+		// Use other values when selected
+		for (const field of FIELDS_WITH_OTHER) {
+			const otherField = `other_${field}`;
+			if (formData.get(field) === "other") {
+				formData.set(field, formData.get(otherField)!);
+				formData.delete(otherField);
+			}
+		}
+
+		const formEntries = Object.fromEntries(formData.entries());
+		console.debug(formEntries);
+
+		try {
+			const res = await axios.post(APPLY_PATH, formData);
+			if (res.status === 201) {
+				console.log("Application submitted");
+				// TODO: show submitted message
+			}
+		} catch (err) {
+			console.error(err);
+			if (axios.isAxiosError(err)) {
+				if (err.response?.status === 401) {
+					setSessionExpired(true);
+				}
+			}
+		}
+
+		setSubmitting(false);
+	};
+
+	const sessionExpiredMessage = (
+		<p className="text-red-500 w-11/12">
+			Your session has expired. Please{" "}
+			<a
+				href="/login"
+				target="_blank"
+				className="text-blue-600 underline"
+			>
+				log in from a new tab
+			</a>{" "}
+			to restore your session and then try submitting again.
+		</p>
+	);
+
 	return (
 		<form
 			method="post"
 			className={`${styles.form} text-[#000000] w-8/12 flex flex-col items-center py-12 gap-10 z-1 max-[800px]:w-9/12 max-[400px]:w-11/12`}
 			action="/api/user/apply"
 			encType="multipart/form-data"
+			onSubmit={handleSubmit}
 		>
 			<BasicInformation />
 			<SchoolInformation />
 			<ProfileInformation />
 			<ResumeInformation />
 			<AgeInformation />
-			<Button text="Submit Application" />
+			<Button text="Submit Application" disabled={submitting} />
+			{sessionExpired && sessionExpiredMessage}
 		</form>
 	);
 }

apps/site/src/lib/components/Button/Button.tsx

@@ -8,13 +8,15 @@ interface ButtonProps {
 	href?: string;
 	isLightVersion?: boolean;
 	usePrefetch?: boolean;
+	disabled?: boolean;
 }
 
 const Button: React.FC<ButtonProps> = ({
 	text,
 	href,
 	className,
 	isLightVersion,
+	disabled,
 }) => {
 	if (href) {
 		return (
@@ -32,7 +34,11 @@ const Button: React.FC<ButtonProps> = ({
 		);
 	}
 	return (
-		<button type="submit" className={styles.button + " font-body"}>
+		<button
+			type="submit"
+			className={styles.button + " font-body"}
+			disabled={disabled}
+		>
 			{text}
 		</button>
 	);