Fixed random search in form action and the random component.

src/lib/components/search/random/index.svelte

@@ -1,31 +1,60 @@
 <script lang="ts">
+	import { applyAction, enhance } from '$app/forms';
 	import { boredState } from '$lib/stores/boredState';
 	import { gameStore } from '$lib/stores/gameSearchStore';
+	import { ToastType } from '$root/lib/types';
+	import { toast } from '../../toast/toast';
 
-  async function handleSubmit(event: SubmitEvent) {
-    // submitting = true;
-    boredState.update((n) => ({ ...n, loading: true }));
-    const form = event.target as HTMLFormElement;
-    console.log('form', form);
-    const response = await fetch('/api/games', {
-      method: 'POST',
-      headers: { accept: 'application/json' },
-      body: new FormData(form)
-    });
-    const responseData = await response.json();
-    // submitting = false;
-    boredState.update((n) => ({ ...n, loading: false }));
-    gameStore.removeAll();
-    gameStore.addAll(responseData?.games);
-    // games = responseData?.games;
-  }
+	// async function handleSubmit(event: SubmitEvent) {
+	// 	// submitting = true;
+	// 	boredState.update((n) => ({ ...n, loading: true }));
+	// 	const form = event.target as HTMLFormElement;
+	// 	console.log('form', form);
+	// 	const response = await fetch('/api/games', {
+	// 		method: 'POST',
+	// 		headers: { accept: 'application/json' },
+	// 		body: new FormData(form)
+	// 	});
+	// 	const responseData = await response.json();
+	// 	// submitting = false;
+	// 	boredState.update((n) => ({ ...n, loading: false }));
+	// 	gameStore.removeAll();
+	// 	gameStore.addAll(responseData?.games);
+	// 	// games = responseData?.games;
+	// }
 
 	let submitting = $boredState?.loading;
+	let checked = true;
 </script>
 
-<form on:submit|preventDefault={handleSubmit} method="post">
+<form
+	action="/search"
+	method="POST"
+	use:enhance={() => {
+		boredState.update((n) => ({ ...n, loading: true }));
+		return async ({ result }) => {
+			boredState.update((n) => ({ ...n, loading: false }));
+			console.log('result main page search', result);
+			// `result` is an `ActionResult` object
+			if (result.type === 'success') {
+				console.log('In success');
+				gameStore.removeAll();
+				const resultGames = result?.data?.games;
+				if (resultGames?.length <= 0) {
+					toast.send('No results!', { duration: 3000, type: ToastType.INFO, dismissible: true });
+				}
+				gameStore.addAll(resultGames);
+				console.log(`Frontend result: ${JSON.stringify(result)}`);
+				await applyAction(result);
+			} else {
+				console.log('Invalid');
+				await applyAction(result);
+			}
+		};
+	}}
+>
 	<fieldset aria-busy={submitting} disabled={submitting}>
-    <input type="checkbox" id="random" name="random" hidden checked />
+		<input type="checkbox" id="random" name="random" hidden {checked} />
 		<button class="btn" type="submit" disabled={submitting}>Random Game 🎲</button>
 	</fieldset>
 </form>

src/routes/+page.svelte

@@ -73,7 +73,7 @@
 
 <h1>Search Boardgames!</h1>
 <p style="margin: 1rem 0;">
-	Input your requirements to search for board game that match your criteria.
+	Input your requirements to search for board games that match your criteria.
 </p>
 <div class="game-search">
 	<form

src/routes/search/+page.server.ts

@@ -29,6 +29,11 @@ export const actions: Actions = {
       name: ''
     };
 
+    const random = form.get('random') && form.get('random') === 'on';
+
+    if (random) {
+      queryParams.random = random;
+    } else {
       const minAge = form.get('minAge');
       const minPlayers = form.get('minPlayers');
       const maxPlayers = form.get('maxPlayers');
@@ -68,6 +73,7 @@ export const actions: Actions = {
       if (name) {
         queryParams.name = `${name}`;
       }
+    }
 
     const newQueryParams: Record<string, string> = {};
     for (const key in queryParams) {