Implementing same search page logic on the main page.

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

@@ -84,6 +84,9 @@
 			dialog: { isOpen: true, content: RemoveWishlistDialog, additionalData: gameToRemove }
 		}));
 	}
+
+	// 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
@@ -94,7 +97,6 @@
 		boredState.update((n) => ({ ...n, loading: true }));
 		return async ({ result }) => {
 			boredState.update((n) => ({ ...n, loading: false }));
-			console.log(result);
 			// `result` is an `ActionResult` object
 			if (result.type === 'error') {
 				toast.send('Error!', { duration: 3000, type: ToastType.ERROR, dismissible: true });
@@ -102,9 +104,8 @@
 			} else if (result.type === 'success') {
 				gameStore.removeAll();
 				gameStore.addAll(result?.data?.games);
-				console.log(`Frontend result search enhance: ${JSON.stringify(result)}`);
 				totalItems = result?.data?.totalCount;
-				toast.send('Sucess!', { duration: 3000, type: ToastType.INFO, dismissible: true });
+				// toast.send('Sucess!', { duration: 3000, type: ToastType.INFO, dismissible: true });
 				await applyAction(result);
 			} else {
 				await applyAction(result);
@@ -245,15 +246,20 @@
 
 	.games-list {
 		display: grid;
-		grid-template-columns: repeat(3, minmax(200px, 1fr));
+		--listColumns: 4;
+		grid-template-columns: repeat(var(--listColumns), minmax(200px, 1fr));
 		gap: 2rem;
 
+		@media (max-width: 1200px) {
+			--listColumns: 3;
+		}
+
 		@media (max-width: 800px) {
-			grid-template-columns: 1fr 1fr;
+			--listColumns: 2;
 		}
 
 		@media (max-width: 650px) {
-			grid-template-columns: 1fr;
+			--listColumns: 1;
 		}
 	}
 </style>

src/routes/+page.svelte

@@ -1,30 +1,11 @@
 <script lang="ts">
-	import { enhance, applyAction } from '$app/forms';
 	import type { ActionData, PageData } from './$types';
-	import { ToastType, type GameType, type SavedGameType } from '$root/lib/types';
-	import { toast } from '$root/lib/components/toast/toast';
-	import { gameStore } from '$lib/stores/gameSearchStore';
-	import { boredState } from '$root/lib/stores/boredState';
-	// import { md, xl } from '$root/lib/stores/mediaQueryStore';
-	import RemoveCollectionDialog from '$root/lib/components/dialog/RemoveCollectionDialog.svelte';
-	import Game from '$lib/components/game/index.svelte';
 	import TextSearch from '$lib/components/search/textSearch/index.svelte';
 	import RandomSearch from '$lib/components/search/random/index.svelte';
 	import Random from '$lib/components/random/index.svelte';
-	import Pagination from '$lib/components/pagination/index.svelte';
-	import RemoveWishlistDialog from '$root/lib/components/dialog/RemoveWishlistDialog.svelte';
-	import SkeletonPlaceholder from '$root/lib/components/SkeletonPlaceholder.svelte';
 
 	export let data: PageData;
 	export let form: ActionData;
-	let submitButton: HTMLElement;
-	console.log('form routesss', form);
-	console.log('Formed data:', JSON.stringify(data));
-
-	let pageSize = 10;
-	let page = 0;
-	let submitting = $boredState?.loading;
-	let numberOfGameSkeleton = 1;
 	// if ($xl) {
 	// 	numberOfGameSkeleton = 8;
 	// } else if ($md) {
@@ -32,48 +13,6 @@
 	// } else {
 	// 	numberOfGameSkeleton = 1;
 	// }
-
-	console.log({ submitting });
-	console.log('Form total count:' + form?.totalCount);
-	console.log('Data total count: ' + data?.totalCount);
-	let totalItems = form?.totalCount || data?.totalCount || 0;
-	console.log('totalItems', totalItems);
-
-	// async function handleItemsPerPageChange(event) {
-	//   const perPage = event?.detail;
-	//   if ($gameStore.length )
-	// }
-	async function handleNextPageEvent(event: CustomEvent) {
-		console.log('Next page called', event);
-		page = event.detail || page;
-		document.getElementById('search-form')?.submit();
-	}
-
-	let gameToRemove: GameType | SavedGameType;
-
-	interface RemoveGameEvent extends Event {
-		detail: GameType | SavedGameType;
-	}
-
-	function handleRemoveCollection(event: RemoveGameEvent) {
-		console.log('Remove collection event handler');
-		console.log('event', event);
-		gameToRemove = event?.detail;
-		boredState.update((n) => ({
-			...n,
-			dialog: { isOpen: true, content: RemoveCollectionDialog, additionalData: gameToRemove }
-		}));
-	}
-
-	function handleRemoveWishlist(event: RemoveGameEvent) {
-		console.log('Remove wishlist event handler');
-		console.log('event', event);
-		gameToRemove = event?.detail;
-		boredState.update((n) => ({
-			...n,
-			dialog: { isOpen: true, content: RemoveWishlistDialog, additionalData: gameToRemove }
-		}));
-	}
 </script>
 
 <svelte:head>
@@ -81,53 +20,18 @@
 </svelte:head>
 
 <h1>Search Boardgames!</h1>
-<p style="margin: 1rem 0;">
-	Input your requirements to search for board games that match your criteria.
-</p>
 <div class="game-search">
-	<form
-		id="search-form"
-		action="/search"
-		method="post"
-		use:enhance={({ data }) => {
-			gameStore.removeAll();
-			data.append('limit', pageSize.toString());
-			data.append('skip', Math.floor(page * pageSize).toString());
-			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');
-					const resultGames = result?.data?.games;
-					if (resultGames?.length <= 0) {
-						toast.send('No results found 😿', {
-							duration: 3000,
-							type: ToastType.ERROR,
-							dismissible: true
-						});
-					}
-					gameStore.addAll(resultGames);
-					totalItems = result?.data?.totalCount;
-					console.log(`Frontend base page: ${JSON.stringify(result)}`);
-					await applyAction(result);
-				} else {
-					console.log('Invalid');
-					await applyAction(result);
-				}
-			};
-		}}
-	>
-		<TextSearch showButton advancedSearch {submitButton} {form} />
-	</form>
 	<section>
+		<p style="margin: 1rem 0;">
+			Input your requirements to search for board games that match your criteria.
+		</p>
 		<p>Or pick a random game!</p>
 		<div class="random-buttons">
 			<RandomSearch />
 			<Random />
 		</div>
 	</section>
+	<TextSearch showButton advancedSearch {data} {form} />
 </div>
 
 <style lang="scss">
@@ -141,33 +45,6 @@
 		}
 	}
 
-	.games {
-		margin: 2rem 0rem;
-
-		h1 {
-			margin-bottom: 2rem;
-		}
-	}
-
-	.games-list {
-		display: grid;
-		--listColumns: 4;
-		grid-template-columns: repeat(var(--listColumns), minmax(200px, 1fr));
-		gap: 2rem;
-
-		@media (max-width: 1200px) {
-			--listColumns: 3;
-		}
-
-		@media (max-width: 800px) {
-			--listColumns: 2;
-		}
-
-		@media (max-width: 650px) {
-			--listColumns: 1;
-		}
-	}
-
 	.random-buttons {
 		display: flex;
 		place-content: space-between;

src/routes/search/+page.svelte

@@ -1,35 +1,10 @@
 <script lang="ts">
-	import { applyAction, enhance } from '$app/forms';
-	import { ToastType, type GameType, type SavedGameType } from '$root/lib/types';
 	import type { ActionData, PageData } from './$types';
-	import Game from '$lib/components/game/index.svelte';
 	import { gameStore } from '$lib/stores/gameSearchStore';
 	import TextSearch from '$lib/components/search/textSearch/index.svelte';
-	import RemoveCollectionDialog from '$root/lib/components/dialog/RemoveCollectionDialog.svelte';
-	import { boredState } from '$root/lib/stores/boredState';
-	import { toast } from '$root/lib/components/toast/toast';
-	import Pagination from '$lib/components/pagination/index.svelte';
-	import RemoveWishlistDialog from '$root/lib/components/dialog/RemoveWishlistDialog.svelte';
 
 	export let data: PageData;
-	console.log('search page data', data);
 	export let form: ActionData;
-	console.log('search page form', form);
-
-	let gameToRemove: GameType | SavedGameType;
-	let pageSize = 10;
-	console.log('Form data page', +form?.data?.page);
-	let page = +form?.data?.page || 1;
-	$: skip = (page - 1) * pageSize;
-	console.log({ skip });
-	let totalItems = form?.totalCount || data?.totalCount || 0;
-	console.log({ pageSize });
-	console.log({ page });
-	console.log({ totalItems });
-	let submitting = $boredState?.loading;
-	let numberOfGameSkeleton = 1;
-	let submitButton: HTMLElement;
-	console.log('Search page total count: ', totalItems);
 
 	$: if (data?.games) {
 		gameStore.removeAll();
@@ -40,25 +15,10 @@
 		gameStore.removeAll();
 		gameStore.addAll(form?.games);
 	}
-
-	function handleNextPageEvent(event: CustomEvent) {
-		console.log('Next page called', event.detail);
-		console.log('Current page: ', page);
-		if (+event?.detail?.page === page + 1) {
-			console.log('Page equals plus one');
-			page += 1;
-		}
-		console.log('New page value: ', page);
-		console.log('New skip value: ', skip);
-		// document.getElementById('skip')?.setAttribute('value', `${page * pageSize}`);
-		console.log('New skip value DOM: ', document.getElementById('skip')?.getAttribute('value'));
-		submitButton.click();
-		// document.getElementById('search-submit')?.click();
-	}
 </script>
 
 <div class="game-search">
-	<TextSearch showButton advancedSearch />
+	<TextSearch showButton advancedSearch {data} {form} />
 </div>
 
 <!-- {#if $gameStore?.length > 0}