From bac9b7f8881f6485a2685994937bc1769aa84970 Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@pm.me>
Date: Wed, 26 Oct 2022 17:31:57 -0400
Subject: [PATCH] Fixed random search in form action and the random component.

---
 src/lib/components/search/random/index.svelte | 95 ++++++++++++-------
 src/routes/+page.svelte                       |  2 +-
 src/routes/search/+page.server.ts             | 74 ++++++++-------
 3 files changed, 103 insertions(+), 68 deletions(-)

diff --git a/src/lib/components/search/random/index.svelte b/src/lib/components/search/random/index.svelte
index 441a80d..835cd73 100644
--- a/src/lib/components/search/random/index.svelte
+++ b/src/lib/components/search/random/index.svelte
@@ -1,43 +1,72 @@
 <script lang="ts">
-  import { boredState } from '$lib/stores/boredState';
-  import { gameStore } from '$lib/stores/gameSearchStore';
+	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 submitting = $boredState?.loading;
+	let checked = true;
 </script>
 
-<form on:submit|preventDefault={handleSubmit} method="post">
-  <fieldset aria-busy={submitting} disabled={submitting}>
-    <input type="checkbox" id="random" name="random" hidden checked />
-    <button class="btn" type="submit" disabled={submitting}>Random Game 🎲</button>
-  </fieldset>
+<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} />
+		<button class="btn" type="submit" disabled={submitting}>Random Game 🎲</button>
+	</fieldset>
 </form>
 
 <style lang="scss">
-  fieldset {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-  }
+	fieldset {
+		display: grid;
+		grid-template-columns: repeat(3, 1fr);
+	}
 
-  button {
-    max-width: 450px;
-    padding: var(--spacing-8) var(--spacing-16);
-  }
+	button {
+		max-width: 450px;
+		padding: var(--spacing-8) var(--spacing-16);
+	}
 </style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 62e1af6..8527455 100644
--- a/src/routes/+page.svelte
+++ b/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
diff --git a/src/routes/search/+page.server.ts b/src/routes/search/+page.server.ts
index c57fd32..874a83a 100644
--- a/src/routes/search/+page.server.ts
+++ b/src/routes/search/+page.server.ts
@@ -29,44 +29,50 @@ export const actions: Actions = {
       name: ''
     };
 
-    const minAge = form.get('minAge');
-    const minPlayers = form.get('minPlayers');
-    const maxPlayers = form.get('maxPlayers');
-    const exactMinAge = form.get('exactMinAge') || false;
-    const exactMinPlayers = form.get('exactMinPlayers') || false;
-    const exactMaxPlayers = form.get('exactMaxPlayers') || false;
-    
-    if (minAge) {
-      if (exactMinAge) {
-        queryParams.min_age = +minAge;
-      } else {
-        queryParams.gt_min_age = +minAge === 1 ? 0 : +minAge - 1;
-      }
-    }
+    const random = form.get('random') && form.get('random') === 'on';
 
-    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 (random) {
+      queryParams.random = random;
+    } else {
+      const minAge = form.get('minAge');
+      const minPlayers = form.get('minPlayers');
+      const maxPlayers = form.get('maxPlayers');
+      const exactMinAge = form.get('exactMinAge') || false;
+      const exactMinPlayers = form.get('exactMinPlayers') || false;
+      const exactMaxPlayers = form.get('exactMaxPlayers') || false;
+
+      if (minAge) {
+        if (exactMinAge) {
+          queryParams.min_age = +minAge;
+        } else {
+          queryParams.gt_min_age = +minAge === 1 ? 0 : +minAge - 1;
+        }
       }
 
-      if (exactMaxPlayers) {
-        queryParams.max_players = +maxPlayers;
-      } else {
-        queryParams.lt_max_players = +maxPlayers + 1;
-      }
-    }
+      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;
+        }
 
-    const name = form.has('name') ? form.get('name') : await request?.text();
-    console.log('name', name);
-    if (name) {
-      queryParams.name = `${name}`;
+        if (exactMaxPlayers) {
+          queryParams.max_players = +maxPlayers;
+        } else {
+          queryParams.lt_max_players = +maxPlayers + 1;
+        }
+      }
+
+      const name = form.has('name') ? form.get('name') : await request?.text();
+      console.log('name', name);
+      if (name) {
+        queryParams.name = `${name}`;
+      }
     }
 
     const newQueryParams: Record<string, string> = {};