Fixing return form data.

src/lib/components/pagination/index.svelte

@@ -19,6 +19,7 @@
 	export let pageSize: number; // Reactive, bind
 	export let page: number = 1; // Reactive, bind
 	export let totalItems: number;
+	export let showItemsLeft = false;
 	export let pageSizeInputDisabled: boolean = false;
 	export let pageSizes: ReadonlyArray<Number> = [10];
 	export let forwardText: string;
@@ -74,9 +75,11 @@
 	<p>
 		Page {page || 1} of {totalPages || 1}
 	</p>
-	<p>
-		{itemsLeft} Item{itemsLeft > 1 || itemsLeft === 0 ? 's' : ''} Left
-	</p>
+	{#if showItemsLeft}
+		<p>
+			{itemsLeft} Item{itemsLeft > 1 || itemsLeft === 0 ? 's' : ''} Left
+		</p>
+	{/if}
 	<div style="display: flex; gap: 2rem;">
 		<button
 			type="button"
@@ -107,17 +110,13 @@
 
 <style lang="scss">
 	.container {
-		display: grid;
-		grid-template-columns: repeat(4, 1fr);
+		display: flex;
+		flex: wrap;
+		justify-content: space-between;
 		align-items: center;
 		gap: 1rem;
 		margin: 3rem 0;
 
-		@media (max-width: 640px) {
-			grid-template-columns: repeat(2, 1fr);
-			grid-template-rows: repeat(2, 1fr);
-		}
-
 		.btn {
 			display: flex;
 			gap: 0.5rem;
@@ -131,23 +130,7 @@
 		}
 	}
 
-	/* .list-container :global(.list-box) {
-		height: 100%;
-		position: relative;
-	}
-
-	.list-container :global(.list-options) {
-		position: absolute;
-	}
-
-	.list-container :global(.active) {
-		display: flex;
-		gap: 1rem;
-		padding: 1rem;
-	} */
-
 	button {
-		/* min-width: 50px; */
 		&[aria-current],
 		&.current {
 			color: black; // TODO: Fix these colors

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

@@ -3,6 +3,7 @@
 	import { boredState } from '$lib/stores/boredState';
 
 	export let form: ActionData;
+	console.log('form data', form?.data);
 	const errors = form?.errors;
 	let submitting = $boredState?.loading;
 	let minAge = +form?.data?.minAge || 1;

src/lib/util/gameMapper.ts

@@ -12,6 +12,8 @@ export function convertToSavedGame(game: GameType | SavedGameType): SavedGameTyp
 
 export function mapSavedGameToGame(game: SavedGameType): GameType {
   const { id, name, thumb_url, players, playtime } = game;
+  console.log({ id, name, thumb_url, players, playtime });
+  
   
   return {
     id,

src/lib/zodValidation.ts

@@ -17,26 +17,24 @@ export const saved_game_schema = z.object({
 });
 
 // https://github.com/colinhacks/zod/discussions/330
-// function IntegerString
-//   <schema extends (ZodNumber | ZodOptional<ZodNumber>)>
-//   (schema: schema)
-// {
-//   return (
-//     z.preprocess((value) => (
-//       ( (typeof value === "string") ? parseInt(value, 10)
-//       : (typeof value === "number") ? value
-//       :                               undefined
-//     )), schema)
-//   )
-// }
-
-// minPlayers: IntegerString(z.number().min(1).max(50).optional());
+function IntegerString
+  <schema extends (ZodNumber | ZodOptional<ZodNumber>)>
+  (schema: schema)
+{
+  return (
+    z.preprocess((value) => (
+      ( (typeof value === "string") ? parseInt(value, 10)
+      : (typeof value === "number") ? value
+      :                               undefined
+    )), schema)
+  )
+}
 
 export const search_schema = z.object({
   name: z.string().trim().optional(),
-  minAge: z.preprocess((a) => parseInt(z.string().parse(a), 10), z.number().min(1).max(120).optional()),
-  minPlayers: z.preprocess((a) => parseInt(z.string().parse(a), 10), z.number().min(1).max(50).optional()),
-  maxPlayers: z.preprocess((a) => parseInt(z.string().parse(a), 10), z.number().min(1).max(50).optional()),
+  minAge: IntegerString(z.number().min(1).max(120).optional()),
+  minPlayers: IntegerString(z.number().min(1).max(50).optional()),
+  maxPlayers: IntegerString(z.number().min(1).max(50).optional()),
   exactMinAge: z.preprocess((a) => Boolean(a), z.boolean().optional()),
   exactMinPlayers: z.preprocess((a) => Boolean(a), z.boolean().optional()),
   exactMaxPlayers: z.preprocess((a) => Boolean(a), z.boolean().optional())

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

@@ -39,6 +39,7 @@ export const actions: Actions = {
     const random = formData?.random === 'on';
 
     if (random) {
+      console.log('Random');
       queryParams.random = random;
     } else {
       try {
@@ -82,6 +83,8 @@ export const actions: Actions = {
         }
       } catch (error: unknown) {
         if (error instanceof ZodError) {
+          console.log(error);
+          
           const { fieldErrors: errors } = error.flatten();
           return invalid(400, { data: formData, errors });
         }