routing and login/registration integration

frontend/app/form/frontend_form.tsx

@@ -4,8 +4,19 @@ import ResumeForm from "./resume_form";
 import JobDescriptionForm from "./job_description_form";
 import styles from "./frontend_form.module.css";
 import { Card, CardContent } from "@mui/material";
+import Link from "next/link";
+import { useState } from "react";
 
 export default function FrontendForm() {
+	const [jobDescriptionSubmitted, setJobDescriptionSubmitted] =
+		useState(false);
+	const [resumeSubmitted, setResumeSubmitted] = useState(false);
+	function onJobDescriptionSubmit() {
+		setJobDescriptionSubmitted(true);
+	}
+	function onResumeSubmit() {
+		setResumeSubmitted(true);
+	}
 	return (
 		<div className={styles.container}>
 			<Card className={styles.card}>
@@ -14,8 +25,11 @@ export default function FrontendForm() {
 						Resume and Job Description
 					</h1>
 
-					<ResumeForm />
-					<JobDescriptionForm />
+					<ResumeForm onSubmit={onResumeSubmit} />
+					<JobDescriptionForm onSubmit={onJobDescriptionSubmit} />
+					{jobDescriptionSubmitted && resumeSubmitted ? (
+						<Link href={"/dashboard"}>View Analysis</Link>
+					) : undefined}
 				</CardContent>
 			</Card>
 		</div>

frontend/app/form/job_description_form.tsx

@@ -10,7 +10,7 @@ import {
 	TextField,
 } from "@mui/material";
 
-export default function JobDescriptionForm() {
+export default function JobDescriptionForm(props: { onSubmit?: () => void }) {
 	const [description, setDescription] = useState<string>("");
 	const [message, setMessage] = useState<string | null>(null);
 
@@ -30,9 +30,12 @@ export default function JobDescriptionForm() {
 		}
 
 		// Submits job description
-		backendPost("api/job-description", { description })
+		backendPost("api/job-description", { jobDescription: description })
 			.then((data) => {
 				setMessage(data.message);
+				if (props.onSubmit) {
+					props.onSubmit();
+				}
 			})
 			.catch((error) => {
 				setMessage("" + error);

frontend/app/form/page.tsx

@@ -1,7 +1,11 @@
 import FrontendForm from "./frontend_form";
 
 export default function FormPage() {
-	return <FrontendForm />;
+	return (
+		<>
+			<FrontendForm />
+		</>
+	);
 }
 /**
  * Used to see the visual of the /form

frontend/app/form/resume_form.tsx

@@ -17,7 +17,7 @@ const VisuallyHiddenInput = styled("input")({
 	width: 1,
 });
 
-export default function ResumeForm() {
+export default function ResumeForm(props: { onSubmit?: () => void }) {
 	const [message, setMessage] = useState<string | null>(null);
 
 	const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
@@ -47,6 +47,9 @@ export default function ResumeForm() {
 		backendFormPost("api/resume-upload", formData)
 			.then((data) => {
 				setMessage(data.message);
+				if (props.onSubmit) {
+					props.onSubmit();
+				}
 			})
 			.catch((error) => {
 				setMessage("" + error);

frontend/app/login/login.test.tsx

@@ -15,6 +15,22 @@ jest.mock("../../util/fetching", () => {
 			backendPostMock(...args)) as typeof backendPost,
 	};
 });
+
+const useRouterMock = jest.fn(() => {
+	return {
+		push: (_route: string) => {},
+	};
+});
+
+jest.mock("next/navigation", () => {
+	const originalModule: object = jest.requireActual("next/navigation");
+	return {
+		__esModule: true,
+		...originalModule,
+		useRouter: () => useRouterMock(),
+	};
+});
+
 it("has an h2 that says login", () => {
 	render(<Page />);
 	expect(

frontend/app/login/login.tsx

@@ -1,12 +1,14 @@
 "use client";
 
 import { Button, Card, CardContent, CardHeader, Input } from "@mui/material";
+import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { backendPost } from "util/fetching";
 
 export function Login() {
 	const [postData, setPostData] = useState<string | undefined>();
 	const [blankMessage, setBlankMessage] = useState("");
+	const router = useRouter();
 	return (
 		<>
 			<Card>
@@ -47,6 +49,7 @@ export function Login() {
 								})
 									.then((data) => {
 										setPostData(data.message);
+										router.push("/form");
 									})
 									.catch((reason) => {
 										setPostData("" + reason);

frontend/app/page.tsx

@@ -1,6 +1,5 @@
-import { BackendExample } from "./backend_example";
-import Counter from "./counter";
 import styles from "./page.module.css";
+import Link from "next/link";
 
 export const metadata = {
 	title: "resume analyser",
@@ -10,8 +9,8 @@ export default function Page() {
 	return (
 		<div className={styles.center}>
 			<h1>resume analyser!</h1>
-			<Counter />
-			<BackendExample />
+			<Link href={"login"}>Login</Link>
+			<Link href={"register"}>Register</Link>
 		</div>
 	);
 }

frontend/app/register/register.test.tsx

@@ -16,6 +16,21 @@ jest.mock("../../util/fetching", () => {
 	};
 });
 
+const useRouterMock = jest.fn(() => {
+	return {
+		push: (_route: string) => {},
+	};
+});
+
+jest.mock("next/navigation", () => {
+	const originalModule: object = jest.requireActual("next/navigation");
+	return {
+		__esModule: true,
+		...originalModule,
+		useRouter: () => useRouterMock(),
+	};
+});
+
 it("has an h2 that says register", () => {
 	render(<Page />);
 	expect(

frontend/app/register/register.tsx

@@ -1,13 +1,15 @@
 "use client";
 
 import { Button, Card, CardContent, CardHeader, Input } from "@mui/material";
+import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { backendPost } from "util/fetching";
 
 export function Register() {
 	const [postData, setPostData] = useState<string | undefined>();
 	const [blankMessage, setBlankMessage] = useState("");
 	const [passMessage, setPassMessage] = useState("");
+	const router = useRouter();
 	return (
 		<>
 			<Card>
@@ -60,6 +62,7 @@ export function Register() {
 								backendPost("api/register", fields)
 									.then((data) => {
 										setPostData(data.message);
+										router.push("/login");
 									})
 									.catch((reason) => {
 										setPostData("" + reason);