Cleanup random API and create named action for a random search.

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

@@ -5,30 +5,12 @@
 	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;
-	// }
-
 	let submitting = $boredState?.loading;
 	let checked = true;
 </script>
 
 <form
-	action="/search"
+	action="/search?/random"
 	method="POST"
 	use:enhance={() => {
 		gameStore.removeAll();
@@ -58,7 +40,7 @@
 	}}
 >
 	<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/lib/types.ts

@@ -1,10 +1,10 @@
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponent } from 'svelte';
 
 export type Dialog = {
 	isOpen: boolean;
 	content?: typeof SvelteComponent;
 	additionalData?: SavedGameType | GameType;
-}
+};
 
 export type Search = {
 	name: string;
@@ -17,7 +17,7 @@ export type Search = {
 	skip: number;
 	currentPage: number;
 	limit: number;
-}
+};
 
 export type BoredStore = {
 	loading: boolean;
@@ -46,7 +46,7 @@ export type SavedGameType = {
 	thumb_url: string;
 	players: string;
 	playtime: string;
-}
+};
 
 export type GameType = {
 	id: string;

src/routes/game/[id]/+page.server.ts

@@ -2,13 +2,7 @@ import { error } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
 import { boardGameApi } from '../../api';
 
-type GamePageParams = {
+export const load: PageServerLoad = async ({ params, setHeaders }) => {
-	params: {
-		id: string;
-	};
-};
-
-export const load: PageServerLoad = async ({ params, setHeaders }: GamePageParams) => {
 	const queryParams = {
 		ids: `${params?.id}`
 	};

src/routes/game/[id]/+page.svelte

@@ -225,6 +225,7 @@
 		place-items: center;
 		gap: 1.5rem;
 		margin: 1rem;
+		line-height: 1.5em;
 	}
 
 	.overflow-description {

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

@@ -1,7 +1,7 @@
 import type { Actions, PageServerLoad, RequestEvent } from '../$types';
 import { BOARD_GAME_ATLAS_CLIENT_ID } from '$env/static/private';
 import { error, fail } from '@sveltejs/kit';
-import type { GameType, Search, SearchQuery } from '$root/lib/types';
+import type { GameType, RandomSearch, Search, SearchQuery } from '$root/lib/types';
 import { mapAPIGameToBoredGame } from '$root/lib/util/gameMapper';
 import { search_schema } from '$root/lib/zodValidation';
 import { ZodError } from 'zod';
@@ -144,90 +144,20 @@ export const load: PageServerLoad = async ({ fetch, url }) => {
 };
 
 export const actions: Actions = {
-	default: async ({ request }: RequestEvent): Promise<any> => {
+	random: async ({ request }: RequestEvent): Promise<any> => {
-		console.log('In search action specific');
-		// Do things in here
-		const formData = Object.fromEntries(await request.formData()) as Search;
-		console.log('formData', formData);
-		console.log('passed in limit:', formData?.limit);
-		console.log('passed in skip:', formData?.skip);
-		const limit = formData?.limit || 10;
-		const skip = formData?.skip || 0;
-
 		const queryParams: SearchQuery = {
 			order_by: 'rank',
 			ascending: false,
-			limit: +limit,
-			skip: +skip,
 			client_id: BOARD_GAME_ATLAS_CLIENT_ID,
-			fuzzy_match: true,
+			random: true
-			name: ''
 		};
 
-		// TODO: Check name length and not search if not advanced search
-
-		const random = formData?.random === 'on';
-
-		if (random) {
-			console.log('Random');
-			queryParams.random = random;
-		} else {
-			try {
-				const {
-					name,
-					minAge,
-					minPlayers,
-					maxPlayers,
-					exactMinAge,
-					exactMinPlayers,
-					exactMaxPlayers
-				} = search_schema.parse(formData);
-
-				if (minAge) {
-					if (exactMinAge) {
-						queryParams.min_age = minAge;
-					} else {
-						queryParams.gt_min_age = minAge === 1 ? 0 : minAge - 1;
-					}
-				}
-
-				if (minPlayers) {
-					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 {
-						queryParams.lt_max_players = maxPlayers + 1;
-					}
-				}
-
-				if (name) {
-					queryParams.name = name;
-				}
-			} catch (error: unknown) {
-				if (error instanceof ZodError) {
-					console.log(error);
-
-					const { fieldErrors: errors } = error.flatten();
-					return fail(400, { data: formData, errors });
-				}
-			}
-		}
-
 		const newQueryParams: Record<string, string> = {};
 		for (const key in queryParams) {
-			console.log('key', key);
-			console.log('queryParams[key]', queryParams[key as keyof SearchQuery]);
 			newQueryParams[key] = `${queryParams[key as keyof SearchQuery]}`;
 		}
 
 		const urlQueryParams = new URLSearchParams(newQueryParams);
-		console.log('urlQueryParams', urlQueryParams);
 
 		try {
 			const url = `https://api.boardgameatlas.com/api/search${
@@ -260,20 +190,14 @@ export const actions: Actions = {
 				// console.log('returning from search', games)
 
 				return {
-					games,
+					games
-					totalCount,
-					limit: parseInt(limit),
-					skip: parseInt(skip)
 				};
 			}
 		} catch (e) {
 			console.log(`Error searching board games ${e}`);
 		}
 		return {
-			games: [],
+			games: []
-			totalCount: 0,
-			limit,
-			skip
 		};
 	}
 };