Cleanup pagination and text search plus implement previous page event handling.

src/lib/components/pagination/index.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	// Based on https://carbon-components-svelte.onrender.com/components/Pagination
 	import { afterUpdate, createEventDispatcher } from 'svelte';
 	import { fade } from 'svelte/transition';
 	import {
@@ -12,10 +13,9 @@
 		ChevronLeftIcon,
 		ChevronRightIcon
 	} from '@rgossiaux/svelte-heroicons/outline';
-	import { boredState } from '$root/lib/stores/boredState';
 
 	const dispatch = createEventDispatcher();
-	// export let pageSize = 10;
+
 	export let pageSize: number; // Reactive, bind
 	export let page: number = 1; // Reactive, bind
 	export let totalItems: number;
@@ -31,16 +31,10 @@
 		}
 	});
 
-	console.log('Pagination info');
-	console.log({ pageSize, page, totalItems });
-
 	$: totalPages = Math.max(Math.ceil(totalItems / pageSize), 1);
 	$: backButtonDisabled = disabled || page === 1;
 	$: forwardButtonDisabled = disabled || page === totalPages;
 	$: itemsLeft = totalItems - page * pageSize >= 0 ? totalItems - page * pageSize : 0;
-	console.log('totalPages', totalPages);
-	const prevPage: number = page - 1;
-	const nextPage: number = page + 1;
 </script>
 
 <div class="container">

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

@@ -10,26 +10,31 @@
 	import { gameStore } from '$root/lib/stores/gameSearchStore';
 	import { toast } from '../../toast/toast';
 	import Pagination from '$lib/components/pagination/index.svelte';
-	import { ToastType } from '$root/lib/types';
+	import Game from '$lib/components/game/index.svelte';
+	import { ToastType, type GameType, type SavedGameType } from '$root/lib/types';
+	import SkeletonPlaceholder from '../../SkeletonPlaceholder.svelte';
+	import RemoveCollectionDialog from '../../dialog/RemoveCollectionDialog.svelte';
+	import RemoveWishlistDialog from '../../dialog/RemoveWishlistDialog.svelte';
+
+	interface RemoveGameEvent extends Event {
+		detail: GameType | SavedGameType;
+	}
 
 	export let data: PageData;
-	console.log('search page data', data);
+	// console.log('search page data', data);
 	export let form: ActionData;
-	console.log('search page form', form);
+	// console.log('search page form', form);
 
 	export let showButton: boolean = false;
 	export let advancedSearch: boolean = false;
-	// export let form: ActionData;
+
+	let gameToRemove: GameType | SavedGameType;
+	let numberOfGameSkeleton = 1;
 	let submitButton: HTMLElement;
 	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 });
+	$: skip = (page - 1) * pageSize;
-	console.log({ page });
-	console.log({ totalItems });
 	$: console.log('submit button', submitButton);
 
 	let submitting = $boredState?.loading;
@@ -40,17 +45,18 @@
 	}
 
 	async 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;
 		}
-		// skip = (page - 1) * pageSize;
 		await tick();
-		console.log('New Page Value', page);
+		submitButton.click();
-		console.log('New Skip value', skip);
+	}
-		console.log('New skip value DOM: ', document.getElementById('skip')?.getAttribute('value'));
+
+	async function handlePreviousPageEvent(event: CustomEvent) {
+		if (+event?.detail?.page === page - 1) {
+			page -= 1;
+		}
+		await tick();
 		submitButton.click();
 	}
 
@@ -59,19 +65,32 @@
 		page = 1;
 		pageSize = event.detail.pageSize;
 		await tick();
-		console.log('New limit value DOM: ', document.getElementById('limit')?.getAttribute('value'));
+		// console.log('New limit value DOM: ', document.getElementById('limit')?.getAttribute('value'));
 		submitButton.click();
 	}
+
+	function handleRemoveCollection(event: RemoveGameEvent) {
+		gameToRemove = event?.detail;
+		boredState.update((n) => ({
+			...n,
+			dialog: { isOpen: true, content: RemoveCollectionDialog, additionalData: gameToRemove }
+		}));
+	}
+
+	function handleRemoveWishlist(event: RemoveGameEvent) {
+		gameToRemove = event?.detail;
+		boredState.update((n) => ({
+			...n,
+			dialog: { isOpen: true, content: RemoveWishlistDialog, additionalData: gameToRemove }
+		}));
+	}
 </script>
 
 <form
 	id="search-form"
 	action="/search"
 	method="post"
-	use:enhance={({ data }) => {
+	use:enhance={() => {
-		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 }));
@@ -83,12 +102,8 @@
 			} else if (result.type === 'success') {
 				gameStore.removeAll();
 				gameStore.addAll(result?.data?.games);
-				// totalItems = result?.data?.totalCount;
 				console.log(`Frontend result search enhance: ${JSON.stringify(result)}`);
 				totalItems = result?.data?.totalCount;
-				// skip = result?.data?.skip || 0;
-				// page = skip / pageSize || 0;
-				// console.log('enhance', page, skip, totalItems);
 				toast.send('Sucess!', { duration: 3000, type: ToastType.INFO, dismissible: true });
 				await applyAction(result);
 			} else {
@@ -140,30 +155,55 @@
 			</Disclosure>
 		{/if}
 	</div>
-	<!-- {#if showButton} -->
+	{#if showButton}
-	<button
+		<button
-		id="search-submit"
+			id="search-submit"
-		class="btn"
+			class="btn"
-		type="submit"
+			type="submit"
-		disabled={submitting}
+			disabled={submitting}
-		bind:this={submitButton}
+			bind:this={submitButton}
-	>
+		>
-		Submit
+			Submit
-	</button>
+		</button>
-	<!-- {/if} -->
+	{/if}
 </form>
 
-<Pagination
+{#if $gameStore?.length > 0}
-	{pageSize}
+	<div class="games">
-	{page}
+		<h1>Games Found:</h1>
-	{totalItems}
+		<div class="games-list">
-	forwardText="Next"
+			{#each $gameStore as game (game.id)}
-	backwardText="Prev"
+				<Game
-	pageSizes={[10, 25, 50, 100]}
+					on:handleRemoveWishlist={handleRemoveWishlist}
-	on:nextPageEvent={handleNextPageEvent}
+					on:handleRemoveCollection={handleRemoveCollection}
-	on:previousPageEvent={(event) => console.log('Prev page called', event)}
+					{game}
-	on:perPageEvent={handlePerPageEvent}
+				/>
-/>
+			{/each}
+		</div>
+		<Pagination
+			{pageSize}
+			{page}
+			{totalItems}
+			forwardText="Next"
+			backwardText="Prev"
+			pageSizes={[10, 25, 50, 100]}
+			on:nextPageEvent={handleNextPageEvent}
+			on:previousPageEvent={handlePreviousPageEvent}
+			on:perPageEvent={handlePerPageEvent}
+		/>
+	</div>
+{:else if $boredState.loading}
+	<div class="games">
+		<h1>Games Found:</h1>
+		<div class="games-list">
+			{#each [...Array(numberOfGameSkeleton).keys()] as game, i}
+				<SkeletonPlaceholder
+					style="width: 100%; height: 500px; border-radius: var(--borderRadius);"
+				/>
+			{/each}
+		</div>
+	</div>
+{/if}
 
 <style lang="scss">
 	.search {
@@ -194,4 +234,26 @@
 			flex-wrap: wrap;
 		}
 	}
+
+	.games {
+		margin: 2rem 0rem;
+
+		h1 {
+			margin-bottom: 2rem;
+		}
+	}
+
+	.games-list {
+		display: grid;
+		grid-template-columns: repeat(3, minmax(200px, 1fr));
+		gap: 2rem;
+
+		@media (max-width: 800px) {
+			grid-template-columns: 1fr 1fr;
+		}
+
+		@media (max-width: 650px) {
+			grid-template-columns: 1fr;
+		}
+	}
 </style>

src/routes/+page.svelte

@@ -130,43 +130,6 @@
 	</section>
 </div>
 
-{#if $gameStore?.length > 0}
-	<div class="games">
-		<h1>Games Found:</h1>
-		<div class="games-list">
-			{#each $gameStore as game (game.id)}
-				<Game
-					on:handleRemoveWishlist={handleRemoveWishlist}
-					on:handleRemoveCollection={handleRemoveCollection}
-					{game}
-				/>
-			{/each}
-		</div>
-		<Pagination
-			{pageSize}
-			{page}
-			{totalItems}
-			forwardText="Next"
-			backwardText="Prev"
-			pageSizes={[10, 25, 50, 100]}
-			on:nextPageEvent={handleNextPageEvent}
-			on:previousPageEvent={(event) => console.log('Prev page called', event)}
-			on:perPageEvent={(event) => console.log('Per page called', event)}
-		/>
-	</div>
-{:else if $boredState.loading}
-	<div class="games">
-		<h1>Games Found:</h1>
-		<div class="games-list">
-			{#each [...Array(numberOfGameSkeleton).keys()] as game, i}
-				<SkeletonPlaceholder
-					style="width: 100%; height: 500px; border-radius: var(--borderRadius);"
-				/>
-			{/each}
-		</div>
-	</div>
-{/if}
-
 <style lang="scss">
 	.game-search {
 		display: grid;

src/routes/search/+page.svelte

@@ -41,30 +41,6 @@
 		gameStore.addAll(form?.games);
 	}
 
-	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 }
-		}));
-	}
-
 	function handleNextPageEvent(event: CustomEvent) {
 		console.log('Next page called', event.detail);
 		console.log('Current page: ', page);
@@ -85,8 +61,7 @@
 	<TextSearch showButton advancedSearch />
 </div>
 
-{`Length: ${$gameStore?.length}`}
+<!-- {#if $gameStore?.length > 0}
-{#if $gameStore?.length > 0}
 	<div class="games">
 		<h1>Games Found:</h1>
 		<div class="games-list">
@@ -102,28 +77,6 @@
 {:else if form && form?.status && form.status !== 200}
 	<h1>There was an error searching for games!</h1>
 	<h2>Please try again later.</h2>
-{/if}
+{/if} -->
-
 <style lang="scss">
-	.games {
-		margin: 2rem 0rem;
-
-		h1 {
-			margin-bottom: 2rem;
-		}
-	}
-
-	.games-list {
-		display: grid;
-		grid-template-columns: repeat(3, minmax(200px, 1fr));
-		gap: 2rem;
-
-		@media (max-width: 800px) {
-			grid-template-columns: 1fr 1fr;
-		}
-
-		@media (max-width: 650px) {
-			grid-template-columns: 1fr;
-		}
-	}
 </style>