Handle review submit

web/package-lock.json

@@ -14,7 +14,8 @@
 				"diff": "^5.1.0",
 				"diff2html": "^3.4.35",
 				"highlight.js": "^11.7.0",
-				"prisma": "^4.13.0"
+				"prisma": "^4.13.0",
+				"zod": "^3.21.4"
 			},
 			"devDependencies": {
 				"@sveltejs/adapter-auto": "^2.0.1",
@@ -3210,6 +3211,14 @@
 			"funding": {
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
+		},
+		"node_modules/zod": {
+			"version": "3.21.4",
+			"resolved": "https://registry.npmjs.org/zod/-/zod-3.21.4.tgz",
+			"integrity": "sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==",
+			"funding": {
+				"url": "https://github.com/sponsors/colinhacks"
+			}
 		}
 	}
 }

web/package.json

@@ -37,6 +37,7 @@
 		"diff": "^5.1.0",
 		"diff2html": "^3.4.35",
 		"highlight.js": "^11.7.0",
-		"prisma": "^4.13.0"
+		"prisma": "^4.13.0",
+		"zod": "^3.21.4"
 	}
 }

web/src/routes/diff-test/+page.svelte

@@ -3,9 +3,16 @@
 	import 'diff2html/bundles/css/diff2html.min.css';
 	import { onMount } from 'svelte';
 	import type { PageData } from './$types';
+	import type { DiffPostData } from './+server';
+	import { goto } from '$app/navigation';
 
 	export let data: PageData;
 
+	let incorrectBtn: HTMLInputElement;
+	let correctBtn: HTMLInputElement;
+	let submitBtn: HTMLButtonElement;
+	let messageText: HTMLTextAreaElement;
+
 	onMount(() => {
 		const diff2htmlUi = new Diff2HtmlUI(document.getElementById('diff')!, data.diff, {
 			drawFileList: false,
@@ -17,17 +24,25 @@
 		});
 		diff2htmlUi.draw();
 
-		let incorrectBtn = document.getElementById('btn_incorrect')! as HTMLInputElement;
-		let correctBtn = document.getElementById('btn_correct')! as HTMLInputElement;
-		let submitBtn = document.getElementById('submit_btn')! as HTMLButtonElement;
-
-		incorrectBtn?.addEventListener('change', () => {
+		incorrectBtn.addEventListener('change', () => {
 			submitBtn.disabled = false;
 		});
-		correctBtn?.addEventListener('change', () => {
+		correctBtn.addEventListener('change', () => {
 			submitBtn.disabled = false;
 		});
 	});
+
+	async function onSubmitClick() {
+		if (incorrectBtn.checked) {
+			let data: DiffPostData = { correct: false, message: messageText.value };
+			await fetch('/diff-test', { method: 'POST', body: JSON.stringify(data) });
+			goto('/reviews');
+		} else if (correctBtn.checked) {
+			let data: DiffPostData = { correct: true, message: messageText.value };
+			await fetch('/diff-test', { method: 'POST', body: JSON.stringify(data) });
+			goto('/reviews');
+		}
+	}
 </script>
 
 <svelte:head>
@@ -39,14 +54,38 @@
 <a href="/reviews" class="btn btn-outline-primary">Back</a>
 <div class="mt-3" id="diff" />
 
+<h5>Message</h5>
+<textarea bind:this={messageText} class="mb-3 form-control" />
+
 <div class="row justify-content-end">
 	<div class="text-end">
 		<div class="btn-group" role="group">
-			<input type="radio" class="btn-check" name="btnradio" id="btn_incorrect" autocomplete="off" />
+			<input
+				bind:this={incorrectBtn}
+				type="radio"
+				class="btn-check"
+				name="btnradio"
+				id="btn_incorrect"
+				autocomplete="off"
+			/>
 			<label class="btn btn-outline-danger" for="btn_incorrect">Incorrect</label>
-			<input type="radio" class="btn-check" name="btnradio" id="btn_correct" autocomplete="off" />
+			<input
+				bind:this={correctBtn}
+				type="radio"
+				class="btn-check"
+				name="btnradio"
+				id="btn_correct"
+				autocomplete="off"
+			/>
 			<label class="btn btn-outline-success" for="btn_correct">Correct</label>
 		</div>
-		<button id="submit_btn" type="button" class="btn btn-primary" disabled>Submit</button>
+		<button
+			bind:this={submitBtn}
+			on:click={onSubmitClick}
+			id="submit_btn"
+			type="button"
+			class="btn btn-primary"
+			disabled>Submit</button
+		>
 	</div>
 </div>

web/src/routes/diff-test/+server.ts

@@ -0,0 +1,19 @@
+import { error, json } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+import { z } from 'zod';
+
+const diffPostData = z.object({
+	correct: z.boolean(),
+	message: z.string()
+});
+export type DiffPostData = z.infer<typeof diffPostData>;
+
+export const POST = (async ({ request }) => {
+	const req = diffPostData.safeParse(await request.json());
+	if (!req.success) {
+		throw error(400, 'Invalid data format');
+	}
+	console.log(req.data.correct);
+	console.log(req.data.message);
+	return json({ success: true });
+}) satisfies RequestHandler;