Change pagination showing, added type for search.

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { tick } from 'svelte';
+	import { applyAction, enhance, type SubmitFunction } from '$app/forms';
 	import type { ActionData, PageData } from './$types';
-	import { applyAction, enhance } from '$app/forms';
 	import { fade } from 'svelte/transition';
 	import { Disclosure, DisclosureButton, DisclosurePanel } from '@rgossiaux/svelte-headlessui';
 	import { ChevronRightIcon } from '@rgossiaux/svelte-heroicons/solid';
@@ -105,15 +105,18 @@
 		}));
 	}
 
-	// TODO: Keep all Pagination Values on back and forth browser
+	const submitSearch: SubmitFunction = ({ form, data, action, cancel }) => {
-	// TODO: Add cache for certain number of pages so back and forth doesn't request data again
+		const { name } = Object.fromEntries(data);
-</script>
+		if (!disclosureOpen && name?.length === 0) {
+			toast.send('Please enter a search term', {
+				duration: 3000,
+				type: ToastType.ERROR,
+				dismissible: true
+			});
+			cancel();
+			return;
+		}
 
-<form
-	id="search-form"
-	action="/search"
-	method="post"
-	use:enhance={() => {
 		gameStore.removeAll();
 		boredState.update((n) => ({ ...n, loading: true }));
 		return async ({ result }) => {
@@ -126,14 +129,19 @@
 				gameStore.removeAll();
 				gameStore.addAll(result?.data?.games);
 				totalItems = result?.data?.totalCount;
-				// toast.send('Sucess!', { duration: 3000, type: ToastType.INFO, dismissible: true });
+				// toast.send('Success!', { duration: 3000, type: ToastType.INFO, dismissible: true });
 				await applyAction(result);
 			} else {
 				await applyAction(result);
 			}
 		};
-	}}
+	};
->
+
+	// TODO: Keep all Pagination Values on back and forth browser
+	// TODO: Add cache for certain number of pages so back and forth doesn't request data again
+</script>
+
+<form id="search-form" action="/search" method="post" use:enhance={submitSearch}>
 	<input id="skip" type="hidden" name="skip" bind:value={skip} />
 	<input id="limit" type="hidden" name="limit" bind:value={pageSize} />
 	<div class="search">

src/lib/types.ts

@@ -7,16 +7,21 @@ export type Dialog = {
 }
 
 export type Search = {
-  totalCount: number;
+  name: string;
-  pageSize: number;
+  minAge: string;
+  minPlayers: string;
+  maxPlayers: string;
+  exactMinAge: string;
+  exactMinPlayers: string;
+  exactMaxPlayers: string;
   skip: number;
   currentPage: number;
+  limit: number;
 }
 
 export type BoredStore = {
   loading: boolean;
   dialog: Dialog;
-  search: Search;
 };
 
 export enum ToastType {

src/routes/collection/+page.svelte

@@ -79,19 +79,21 @@
 					{game}
 				/>
 			{/each}
-			<Pagination
-				{pageSize}
-				{page}
-				{totalItems}
-				forwardText="Next"
-				backwardText="Prev"
-				pageSizes={[10, 25, 50, 100]}
-				on:nextPageEvent={handleNextPageEvent}
-				on:previousPageEvent={handlePreviousPageEvent}
-				on:perPageEvent={handlePerPageEvent}
-			/>
 		{/if}
 	</div>
+	{#if $collectionStore.length !== 0}
+		<Pagination
+			{pageSize}
+			{page}
+			{totalItems}
+			forwardText="Next"
+			backwardText="Prev"
+			pageSizes={[10, 25, 50, 100]}
+			on:nextPageEvent={handleNextPageEvent}
+			on:previousPageEvent={handlePreviousPageEvent}
+			on:perPageEvent={handlePerPageEvent}
+		/>
+	{/if}
 </div>
 
 <style lang="scss">

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, invalid, type ServerLoadEvent } from '@sveltejs/kit';
-import type { GameType, SearchQuery } from '$root/lib/types';
+import type { GameType, Search, SearchQuery } from '$root/lib/types';
 import { mapAPIGameToBoredGame } from '$root/lib/util/gameMapper';
 import { search_schema } from '$root/lib/zodValidation';
 import { ZodError } from 'zod';
@@ -17,7 +17,7 @@ export const actions: Actions = {
   default: async ({ request }: RequestEvent): Promise<any> => {
     console.log("In search action specific")
     // Do things in here
-    const formData = Object.fromEntries(await request.formData());
+    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)

src/routes/wishlist/+page.svelte

@@ -75,19 +75,21 @@
 					{game}
 				/>
 			{/each}
-			<Pagination
-				{pageSize}
-				{page}
-				{totalItems}
-				forwardText="Next"
-				backwardText="Prev"
-				pageSizes={[10, 25, 50, 100]}
-				on:nextPageEvent={handleNextPageEvent}
-				on:previousPageEvent={handlePreviousPageEvent}
-				on:perPageEvent={handlePerPageEvent}
-			/>
 		{/if}
 	</div>
+	{#if $wishlistStore.length !== 0}
+		<Pagination
+			{pageSize}
+			{page}
+			{totalItems}
+			forwardText="Next"
+			backwardText="Prev"
+			pageSizes={[10, 25, 50, 100]}
+			on:nextPageEvent={handleNextPageEvent}
+			on:previousPageEvent={handlePreviousPageEvent}
+			on:perPageEvent={handlePerPageEvent}
+		/>
+	{/if}
 </div>
 
 <style lang="scss">