Use form for reviewing

web/src/routes/admin/diff/[submissionId]/+page.server.ts

@@ -1,4 +1,4 @@
-import type { PageServerLoad } from './$types';
+import type { Actions, PageServerLoad } from './$types';
 import * as Diff from 'diff';
 import { error, redirect } from '@sveltejs/kit';
 import { db } from '$lib/server/prisma';
@@ -20,3 +20,20 @@ export const load = (async ({ params }) => {
 	);
 	return { diff: diff };
 }) satisfies PageServerLoad;
+
+export const actions = {
+	submit: async ({ request, params }) => {
+		const submissionId = parseInt(params.submissionId);
+		if (isNaN(submissionId)) {
+			return { success: false };
+		}
+		const data = await request.formData();
+		const correct = data.get('correct');
+		if (!correct) {
+			return { success: false };
+		}
+		const correctBool = correct.toString().toLowerCase() === 'true';
+		await db.submission.delete({ where: { id: submissionId } });
+		return { success: true };
+	}
+} satisfies Actions;

web/src/routes/admin/diff/[submissionId]/+page.svelte

@@ -2,17 +2,30 @@
 	import { Diff2HtmlUI } from 'diff2html/lib/ui/js/diff2html-ui-base';
 	import 'diff2html/bundles/css/diff2html.min.css';
 	import { onMount } from 'svelte';
-	import type { DiffPostData } from './+server';
+	import type { Actions, PageData } from './$types';
+	import { enhance } from '$app/forms';
 	import { goto } from '$app/navigation';
-	import type { PageData } from './$types';
-	import { page } from '$app/stores';
 
 	export let data: PageData;
+	export let form: Actions;
+
+	$: if (form && form.success) {
+		goto('/admin/reviews');
+	}
 
 	let incorrectBtn: HTMLInputElement;
 	let correctBtn: HTMLInputElement;
 	let submitBtn: HTMLButtonElement;
-	let messageText: HTMLTextAreaElement;
+
+	let correct = false;
+
+	function updateCorrect() {
+		if (correctBtn.checked) {
+			correct = true;
+		} else {
+			correct = false;
+		}
+	}
 
 	onMount(() => {
 		const diff2htmlUi = new Diff2HtmlUI(document.getElementById('diff')!, data.diff, {
@@ -27,29 +40,13 @@
 
 		incorrectBtn.addEventListener('change', () => {
 			submitBtn.disabled = false;
+			updateCorrect();
 		});
 		correctBtn.addEventListener('change', () => {
 			submitBtn.disabled = false;
+			updateCorrect();
 		});
 	});
-
-	async function onSubmitClick() {
-		if (incorrectBtn.checked) {
-			let postData: DiffPostData = {
-				correct: false,
-				message: messageText.value
-			};
-			await fetch($page.url, { method: 'POST', body: JSON.stringify(postData) });
-			goto('/admin/reviews');
-		} else if (correctBtn.checked) {
-			let postData: DiffPostData = {
-				correct: true,
-				message: messageText.value
-			};
-			await fetch($page.url, { method: 'POST', body: JSON.stringify(postData) });
-			goto('/admin/reviews');
-		}
-	}
 </script>
 
 <svelte:head>
@@ -58,41 +55,45 @@
 
 <h1 style="text-align:center" class="mb-4">Diff</h1>
 
+{#if form && !form.success}
+	<div class="alert alert-danger">Submission was not successful</div>
+{:else if form && form.success}
+	<div class="alert alert-success">Success!</div>
+{/if}
+
 <a href="/admin/reviews" class="btn btn-outline-primary">Back</a>
 <div class="mt-3" id="diff" />
 
-<h5>Message</h5>
+<form method="POST" action="?/submit" use:enhance>
-<textarea bind:this={messageText} class="mb-3 form-control" />
+	<h5>Message</h5>
+	<textarea class="mb-3 form-control" />
 
-<div class="row justify-content-end">
+	<div class="row justify-content-end">
-	<div class="text-end">
+		<div class="text-end">
-		<div class="btn-group" role="group">
+			<input name="correct" type="hidden" value={correct} />
-			<input
+			<div class="btn-group" role="group">
-				bind:this={incorrectBtn}
+				<input
-				type="radio"
+					bind:this={incorrectBtn}
-				class="btn-check"
+					type="radio"
-				name="btnradio"
+					class="btn-check"
-				id="btn_incorrect"
+					name="btnradio"
-				autocomplete="off"
+					id="btn_incorrect"
-			/>
+					autocomplete="off"
-			<label class="btn btn-outline-danger" for="btn_incorrect">Incorrect</label>
+				/>
-			<input
+				<label class="btn btn-outline-danger" for="btn_incorrect">Incorrect</label>
-				bind:this={correctBtn}
+				<input
-				type="radio"
+					bind:this={correctBtn}
-				class="btn-check"
+					type="radio"
-				name="btnradio"
+					class="btn-check"
-				id="btn_correct"
+					name="btnradio"
-				autocomplete="off"
+					id="btn_correct"
-			/>
+					autocomplete="off"
-			<label class="btn btn-outline-success" for="btn_correct">Correct</label>
+				/>
+				<label class="btn btn-outline-success" for="btn_correct">Correct</label>
+			</div>
+			<button bind:this={submitBtn} id="submit_btn" type="submit" class="btn btn-primary" disabled
+				>Submit</button
+			>
 		</div>
-		<button
-			bind:this={submitBtn}
-			on:click={onSubmitClick}
-			id="submit_btn"
-			type="button"
-			class="btn btn-primary"
-			disabled>Submit</button
-		>
 	</div>
-</div>
+</form>

web/src/routes/admin/diff/[submissionId]/+server.ts

@@ -1,23 +0,0 @@
-import { error, json } from '@sveltejs/kit';
-import type { RequestHandler } from './$types';
-import { z } from 'zod';
-import { db } from '$lib/server/prisma';
-
-const diffPostData = z.object({
-	correct: z.boolean(),
-	message: z.string()
-});
-export type DiffPostData = z.infer<typeof diffPostData>;
-
-export const POST = (async ({ request, params }) => {
-	const submissionId = parseInt(params.submissionId);
-	if (isNaN(submissionId)) {
-		throw error(400, 'Invalid submission');
-	}
-	const req = diffPostData.safeParse(await request.json());
-	if (!req.success) {
-		throw error(400, 'Invalid data format');
-	}
-	await db.submission.delete({ where: { id: submissionId } });
-	return json({ success: true });
-}) satisfies RequestHandler;