Adding server side validations.

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

@@ -1,6 +1,8 @@
 <script lang="ts">
 	import { boredState } from '$lib/stores/boredState';
 
+	export let form: ActionData;
+	console.log('form', form);
 	let submitting = $boredState?.loading;
 	let minAge = 1;
 	let minPlayers = 1;
@@ -9,12 +11,11 @@
 	let exactMaxPlayers = false;
 </script>
 
-<!-- <form on:submit|preventDefault={handleSubmit} method="post"> -->
 <fieldset class="advanced-search" aria-busy={submitting} disabled={submitting}>
 	<div>
 		<label for="minAge">
 			Min Age
-      <input id="minAge" name="minAge" bind:value={minAge} type="number" min={1} max={120} />
+			<input id="minAge" name="minAge" bind:value={minAge} type="number" min="1" max="120" />
 		</label>
 	</div>
 	<div>
@@ -25,8 +26,8 @@
 				name="minPlayers"
 				bind:value={minPlayers}
 				type="number"
-        min={0}
+				min="1"
-        max={50}
+				max="50"
 			/>
 		</label>
 		<label for="exactMinPlayers" style="display: flex; gap: 1rem; place-items: center;">
@@ -38,6 +39,9 @@
 				bind:checked={exactMinPlayers}
 			/>
 		</label>
+		{#if form?.error?.id === 'minPlayers'}
+			{form.error.message}
+		{/if}
 	</div>
 	<div>
 		<label for="maxPlayers">
@@ -47,8 +51,8 @@
 				name="maxPlayers"
 				bind:value={maxPlayers}
 				type="number"
-        min={0}
+				min="1"
-        max={50}
+				max="50"
 			/>
 		</label>
 		<label for="exactMaxPlayers" style="display: flex; gap: 1rem; place-items: center;">

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

@@ -7,12 +7,12 @@
 
 	export let showButton: boolean = false;
 	export let advancedSearch: boolean = false;
+	export let form: ActionData;
 
 	let submitting = $boredState?.loading;
 	let name = '';
 </script>
 
-<!-- <form on:submit|preventDefault={handleSearch} method="post"> -->
 <div class="search">
 	<fieldset class="text-search" aria-busy={submitting} disabled={submitting}>
 		<label for="name">
@@ -44,7 +44,7 @@
 					<!-- Using `static`, `DisclosurePanel` is always rendered,
                 and ignores the `open` state -->
 					<DisclosurePanel static>
-            <AdvancedSearch />
+						<AdvancedSearch form />
 					</DisclosurePanel>
 				</div>
 			{/if}

src/routes/+page.svelte

@@ -14,28 +14,13 @@
 
 	export let data: PageData;
 	export let form: ActionData;
+	console.log('form routesss', form);
 	console.log('Formed data:', JSON.stringify(data));
 	let pageSize: number;
 	let currentPage: number;
 	$: totalItems = 0;
 	console.log('totalItems', totalItems);
 
-	async function handleSearch(event: SubmitEvent) {
-		boredState.update((n) => ({ ...n, loading: true }));
-		const form = event.target as HTMLFormElement;
-		console.log('form', form);
-		const response = await fetch('/api/game', {
-			method: 'POST',
-			headers: { accept: 'application/json' },
-			body: new FormData(form)
-		});
-		const responseData = await response.json();
-		boredState.update((n) => ({ ...n, loading: false }));
-		gameStore.removeAll();
-		gameStore.addAll(responseData?.games);
-		totalItems = responseData?.totalCount;
-	}
-
 	// async function handleItemsPerPageChange(event) {
 	//   const perPage = event?.detail;
 	//   if ($gameStore.length )
@@ -113,11 +98,12 @@
 					await applyAction(result);
 				} else {
 					console.log('Invalid');
+					await applyAction(result);
 				}
 			};
 		}}
 	>
-		<TextSearch showButton advancedSearch />
+		<TextSearch showButton advancedSearch {form} />
 	</form>
 	<section>
 		<p>Or pick a random game!</p>

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

@@ -44,15 +44,18 @@ export const actions: Actions = {
       }
     }
 
-    if (minPlayers) {
+    if (minPlayers && maxPlayers) {
+      if (minPlayers > maxPlayers) {
+        return invalid(400, { minPlayers, error: { id: 'minPlayers', message: 'Min must be less than max' } });
+      } else if (maxPlayers < minPlayers) {
+        return invalid(400, { maxPlayers, error: { id: 'maxPlayers', message: 'Max must be greater than min' } });
+      }
       if (exactMinPlayers) {
         queryParams.min_players = +minPlayers;
       } else {
         queryParams.gt_min_players = +minPlayers === 1 ? 0 : +minPlayers - 1;
       }
-    }
 
-    if (maxPlayers) {
       if (exactMaxPlayers) {
         queryParams.max_players = +maxPlayers;
       } else {