Factorized debounce username

Author: ciscoheat

src/routes/(v2)/v2/debounce-username/+page.server.ts

@@ -1,4 +1,4 @@
-import { superValidate, message, setError } from '$lib/index.js';
+import { superValidate, message, setError, type SuperValidated, type Infer } from '$lib/index.js';
 import { zod } from '$lib/adapters/zod.js';
 import { fail } from '@sveltejs/kit';
 import { schema } from './schema.js';
@@ -12,32 +12,34 @@ export const load = async () => {
 	return { form };
 };
 
+function checkUsername(form: SuperValidated<Infer<typeof schema>>) {
+	if (takenUsernames.includes(form.data.username)) {
+		setError(form, 'username', 'Username is already taken.');
+		return false;
+	}
+	return true;
+}
+
 export const actions: Actions = {
 	post: async ({ request }) => {
 		const form = await superValidate(request, zod(schema));
+
+		if (!form.valid || !checkUsername(form)) return fail(400, { form });
+
 		console.log(form);
 
-		if (!form.valid) return fail(400, { form });
+		// TODO: Create user
 
 		return message(form, 'Form posted successfully!');
 	},
 
 	check: async ({ request }) => {
-		// Introduce a little delay
+		// Introduce a little delay (large DB check)
 		await new Promise((res) => setTimeout(res, Math.random() * 500));
 
-		const formData = await request.formData();
-		console.log(formData);
-
-		const form = await superValidate(formData, zod(usernameSchema));
-		console.log(form);
-
-		if (!form.valid) return { form };
-
-		if (takenUsernames.includes(form.data.username)) {
-			return setError(form, 'username', 'Username is already taken.');
-		}
+		const form = await superValidate(request, zod(usernameSchema));
 
-		return { form };
+		if (!form.valid || !checkUsername(form)) return fail(400, { form });
+		else return { form };
 	}
 };

src/routes/(v2)/v2/debounce-username/+page.svelte

@@ -13,7 +13,8 @@
 
 	const {
 		submitting,
-		submit: checkSubmit
+		submit: submitCheckUsername,
+		posted
 		//enhance: checkEnhance
 	} = superForm(
 		{ username: '' },
@@ -30,13 +31,13 @@
 		}
 	);
 
-	const checkUsername = debounce(250, checkSubmit);
+	const checkUsername = debounce(250, submitCheckUsername);
 
 	// eslint-disable-next-line svelte/valid-compile
 	$page;
 </script>
 
-<SuperDebug data={$form} />
+<SuperDebug data={{ $form, $posted }} />
 
 <h3>Superforms testing ground - Zod</h3>
 
@@ -56,7 +57,7 @@
 			on:input={checkUsername}
 		/>
 		<!-- eslint-disable-next-line svelte/no-at-html-tags -->
-		{#if $submitting}{@html spinner}{:else if $errors.username}❌{:else if $form.username}✅{/if}
+		{#if $submitting}{@html spinner}{:else if $errors.username}❌{:else if $form.username && $posted}✅{/if}
 		{#if $errors.username}<div class="invalid">{$errors.username}</div>{/if}
 	</label>