From 67cd3b1747b2db9f257cf543ef6b1f1ae3d170f6 Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@pm.me>
Date: Wed, 9 Nov 2022 17:38:49 -0600
Subject: [PATCH] Binding variable to the submit button of the form and in
 event handlers waiting for the DOM to update with tick.

---
 src/lib/components/pagination/index.svelte    |   4 +-
 .../components/search/textSearch/index.svelte | 187 ++++++++++++++----
 src/routes/+page.svelte                       |   3 +-
 src/routes/search/+page.svelte                |  57 +-----
 4 files changed, 155 insertions(+), 96 deletions(-)

diff --git a/src/lib/components/pagination/index.svelte b/src/lib/components/pagination/index.svelte
index ebc22b5..60df686 100644
--- a/src/lib/components/pagination/index.svelte
+++ b/src/lib/components/pagination/index.svelte
@@ -48,9 +48,9 @@
 		<p>Per-page:</p>
 		<Listbox
 			class="list-box"
-			value={$boredState?.search?.pageSize || 10}
+			value={pageSize || 10}
 			on:change={(e) => {
-				dispatch('update', { pageSize: e.detail, page });
+				dispatch('perPageEvent', { pageSize: e.detail, page });
 			}}
 			let:open
 		>
diff --git a/src/lib/components/search/textSearch/index.svelte b/src/lib/components/search/textSearch/index.svelte
index b680175..1ce44f7 100644
--- a/src/lib/components/search/textSearch/index.svelte
+++ b/src/lib/components/search/textSearch/index.svelte
@@ -1,13 +1,36 @@
 <script lang="ts">
+	import { tick } from 'svelte';
+	import type { ActionData, PageData } from './$types';
 	import { fade } from 'svelte/transition';
 	import { Disclosure, DisclosureButton, DisclosurePanel } from '@rgossiaux/svelte-headlessui';
 	import { ChevronRightIcon } from '@rgossiaux/svelte-heroicons/solid';
 	import { boredState } from '$lib/stores/boredState';
 	import AdvancedSearch from '$lib/components/search/advancedSearch/index.svelte';
+	import { applyAction, enhance } from '$app/forms';
+	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';
+
+	export let data: PageData;
+	console.log('search page data', data);
+	export let form: ActionData;
+	console.log('search page form', form);
 
 	export let showButton: boolean = false;
 	export let advancedSearch: boolean = false;
-	export let form: ActionData;
+	// export let form: ActionData;
+	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 });
+	console.log({ page });
+	console.log({ totalItems });
+	$: console.log('submit button', submitButton);
 
 	let submitting = $boredState?.loading;
 	let name = form?.name || '';
@@ -15,52 +38,132 @@
 	if (form?.error) {
 		disclosureOpen = true;
 	}
+
+	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);
+		console.log('New Skip value', skip);
+		console.log('New skip value DOM: ', document.getElementById('skip')?.getAttribute('value'));
+		submitButton.click();
+	}
+
+	async function handlePerPageEvent(event: CustomEvent) {
+		console.log('Per Page Event called', event.detail);
+		page = 1;
+		pageSize = event.detail.pageSize;
+		await tick();
+		console.log('New limit value DOM: ', document.getElementById('limit')?.getAttribute('value'));
+		submitButton.click();
+	}
 </script>
 
-<div class="search">
-	<fieldset class="text-search" aria-busy={submitting} disabled={submitting}>
-		<label for="name">
-			Search
-			<input
-				id="name"
-				name="name"
-				bind:value={name}
-				type="text"
-				aria-label="Search boardgame"
-				placeholder="Search boardgame"
-			/>
-		</label>
-	</fieldset>
-	{#if advancedSearch}
-		<Disclosure>
-			<DisclosureButton
-				class="disclosure-button"
-				on:click={() => (disclosureOpen = !disclosureOpen)}
-			>
-				<span>Advanced Search?</span>
-				<ChevronRightIcon
-					class="icon disclosure-icon"
-					style={disclosureOpen
-						? 'transform: rotate(90deg); transition: transform 0.5s ease;'
-						: 'transform: rotate(0deg); transition: transform 0.5s ease;'}
+<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);
+			// `result` is an `ActionResult` object
+			if (result.type === 'error') {
+				toast.send('Error!', { duration: 3000, type: ToastType.ERROR, dismissible: true });
+				await applyAction(result);
+			} 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 {
+				await applyAction(result);
+			}
+		};
+	}}
+>
+	<input id="skip" type="hidden" name="skip" bind:value={skip} />
+	<input id="limit" type="hidden" name="limit" bind:value={pageSize} />
+	<div class="search">
+		<fieldset class="text-search" aria-busy={submitting} disabled={submitting}>
+			<label for="name">
+				Search
+				<input
+					id="name"
+					name="name"
+					bind:value={name}
+					type="text"
+					aria-label="Search boardgame"
+					placeholder="Search boardgame"
 				/>
-			</DisclosureButton>
+			</label>
+		</fieldset>
+		{#if advancedSearch}
+			<Disclosure>
+				<DisclosureButton
+					class="disclosure-button"
+					on:click={() => (disclosureOpen = !disclosureOpen)}
+				>
+					<span>Advanced Search?</span>
+					<ChevronRightIcon
+						class="icon disclosure-icon"
+						style={disclosureOpen
+							? 'transform: rotate(90deg); transition: transform 0.5s ease;'
+							: 'transform: rotate(0deg); transition: transform 0.5s ease;'}
+					/>
+				</DisclosureButton>
 
-			{#if disclosureOpen}
-				<div transition:fade>
-					<!-- Using `static`, `DisclosurePanel` is always rendered,
+				{#if disclosureOpen}
+					<div transition:fade>
+						<!-- Using `static`, `DisclosurePanel` is always rendered,
                 and ignores the `open` state -->
-					<DisclosurePanel static>
-						<AdvancedSearch {form} />
-					</DisclosurePanel>
-				</div>
-			{/if}
-		</Disclosure>
-	{/if}
-</div>
-{#if showButton}
-	<button id="search-submit" class="btn" type="submit" disabled={submitting}>Submit</button>
-{/if}
+						<DisclosurePanel static>
+							<AdvancedSearch {form} />
+						</DisclosurePanel>
+					</div>
+				{/if}
+			</Disclosure>
+		{/if}
+	</div>
+	<!-- {#if showButton} -->
+	<button
+		id="search-submit"
+		class="btn"
+		type="submit"
+		disabled={submitting}
+		bind:this={submitButton}
+	>
+		Submit
+	</button>
+	<!-- {/if} -->
+</form>
+
+<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={handlePerPageEvent}
+/>
 
 <style lang="scss">
 	.search {
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index e0a9b97..0e7e752 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -17,6 +17,7 @@
 
 	export let data: PageData;
 	export let form: ActionData;
+	let submitButton: HTMLElement;
 	console.log('form routesss', form);
 	console.log('Formed data:', JSON.stringify(data));
 
@@ -118,7 +119,7 @@
 			};
 		}}
 	>
-		<TextSearch showButton advancedSearch {form} />
+		<TextSearch showButton advancedSearch {submitButton} {form} />
 	</form>
 	<section>
 		<p>Or pick a random game!</p>
diff --git a/src/routes/search/+page.svelte b/src/routes/search/+page.svelte
index baf87d3..b9b7425 100644
--- a/src/routes/search/+page.svelte
+++ b/src/routes/search/+page.svelte
@@ -28,6 +28,7 @@
 	console.log({ totalItems });
 	let submitting = $boredState?.loading;
 	let numberOfGameSkeleton = 1;
+	let submitButton: HTMLElement;
 	console.log('Search page total count: ', totalItems);
 
 	$: if (data?.games) {
@@ -73,53 +74,18 @@
 		}
 		console.log('New page value: ', page);
 		console.log('New skip value: ', skip);
-		document.getElementById('skip')?.setAttribute('value', `${page * pageSize}`);
+		// document.getElementById('skip')?.setAttribute('value', `${page * pageSize}`);
 		console.log('New skip value DOM: ', document.getElementById('skip')?.getAttribute('value'));
-		document.getElementById('search-submit')?.click();
+		submitButton.click();
+		// document.getElementById('search-submit')?.click();
 	}
 </script>
 
 <div class="game-search">
-	{skip}
-	<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);
-				// `result` is an `ActionResult` object
-				if (result.type === 'error') {
-					toast.send('Error!', { duration: 3000, type: ToastType.ERROR, dismissible: true });
-					await applyAction(result);
-				} 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 {
-					await applyAction(result);
-				}
-			};
-		}}
-	>
-		<input id="skip" type="hidden" name="skip" value={skip} />
-		<input id="limit" type="hidden" name="limit" value={pageSize} />
-		<TextSearch showButton advancedSearch {form} />
-	</form>
+	<TextSearch showButton advancedSearch />
 </div>
 
+{`Length: ${$gameStore?.length}`}
 {#if $gameStore?.length > 0}
 	<div class="games">
 		<h1>Games Found:</h1>
@@ -132,17 +98,6 @@
 				/>
 			{/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 form && form?.status && form.status !== 200}
 	<h1>There was an error searching for games!</h1>