From 71b525a5b1c91845ddf59b43898748fbabc426d4 Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@pm.me>
Date: Fri, 4 Nov 2022 18:02:11 -0400
Subject: [PATCH] Keeping advanced search open if error and using Skeleton on
 search results.

---
 src/lib/components/SkeletonPlaceholder.svelte |  2 ++
 .../search/advancedSearch/index.svelte        | 24 +++++++++++--------
 .../components/search/textSearch/index.svelte | 15 ++++++++----
 src/routes/+page.svelte                       | 24 ++++++++++++++-----
 src/styles/global.scss                        |  6 ++++-
 5 files changed, 50 insertions(+), 21 deletions(-)

diff --git a/src/lib/components/SkeletonPlaceholder.svelte b/src/lib/components/SkeletonPlaceholder.svelte
index d94d899..05e1d87 100644
--- a/src/lib/components/SkeletonPlaceholder.svelte
+++ b/src/lib/components/SkeletonPlaceholder.svelte
@@ -74,6 +74,7 @@
 
 	.bx--skeleton__placeholder {
 		--cds-skeleton-01: #474747;
+		border-radius: var(--borderRadius);
 		position: relative;
 		padding: 0;
 		border: none;
@@ -94,6 +95,7 @@
 
 	.bx--skeleton__placeholder::before {
 		--cds-skeleton-02: #525252;
+		border-radius: var(--borderRadius);
 		position: absolute;
 		top: 0;
 		left: 0;
diff --git a/src/lib/components/search/advancedSearch/index.svelte b/src/lib/components/search/advancedSearch/index.svelte
index 4c7ea50..5e1738c 100644
--- a/src/lib/components/search/advancedSearch/index.svelte
+++ b/src/lib/components/search/advancedSearch/index.svelte
@@ -3,11 +3,11 @@
 	import { boredState } from '$lib/stores/boredState';
 
 	export let form: ActionData;
-	console.log('advanced search form', form);
+	console.log('advanced search form data', form);
 	let submitting = $boredState?.loading;
-	let minAge = form?.minAge || 1;
-	let minPlayers = form?.minPlayers || 1;
-	let maxPlayers = form?.maxPlayers || 1;
+	let minAge = +form?.minAge || 1;
+	let minPlayers = +form?.minPlayers || 1;
+	let maxPlayers = +form?.maxPlayers || 1;
 	let exactMinPlayers = form?.exactMinPlayers || false;
 	let exactMaxPlayers = form?.exactMaxPlayers || false;
 </script>
@@ -41,9 +41,11 @@
 			/>
 		</label>
 		{#if form?.error?.id === 'minPlayers'}
-			<p aria-label={`Error: ${form.error.message}`} class="center error">
-				Error: {form.error.message}
-			</p>
+			<div id="minPlayers-error" class="error">
+				<p aria-label={`Error: ${form.error.message}`} class="center">
+					Error: {form.error.message}
+				</p>
+			</div>
 		{/if}
 	</div>
 	<div>
@@ -68,9 +70,11 @@
 			/>
 		</label>
 		{#if form?.error?.id === 'maxPlayers'}
-			<p aria-label={`Error: ${form.error.message}`} class="center error">
-				Error: {form.error.message}
-			</p>
+			<div id="maxPlayers-error" class="error">
+				<p aria-label={`Error: ${form.error.message}`} class="center">
+					Error: {form.error.message}
+				</p>
+			</div>
 		{/if}
 	</div>
 </fieldset>
diff --git a/src/lib/components/search/textSearch/index.svelte b/src/lib/components/search/textSearch/index.svelte
index 8df89a3..aaf043d 100644
--- a/src/lib/components/search/textSearch/index.svelte
+++ b/src/lib/components/search/textSearch/index.svelte
@@ -11,6 +11,10 @@
 
 	let submitting = $boredState?.loading;
 	let name = form?.name || '';
+	let disclosureOpen = false;
+	if (form?.error) {
+		disclosureOpen = true;
+	}
 </script>
 
 <div class="search">
@@ -28,18 +32,21 @@
 		</label>
 	</fieldset>
 	{#if advancedSearch}
-		<Disclosure let:open>
-			<DisclosureButton class="disclosure-button">
+		<Disclosure>
+			<DisclosureButton
+				class="disclosure-button"
+				on:click={() => (disclosureOpen = !disclosureOpen)}
+			>
 				<span>Advanced Search?</span>
 				<ChevronRightIcon
 					class="icon disclosure-icon"
-					style={open
+					style={disclosureOpen
 						? 'transform: rotate(90deg); transition: transform 0.5s ease;'
 						: 'transform: rotate(0deg); transition: transform 0.5s ease;'}
 				/>
 			</DisclosureButton>
 
-			{#if open}
+			{#if disclosureOpen}
 				<div transition:fade>
 					<!-- Using `static`, `DisclosurePanel` is always rendered,
                 and ignores the `open` state -->
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 1148b94..e95285d 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -20,6 +20,9 @@
 	console.log('Formed data:', JSON.stringify(data));
 	let pageSize: number;
 	let currentPage: number;
+	let submitting = $boredState?.loading;
+	console.log({ submitting });
+
 	$: totalItems = 0;
 	console.log('totalItems', totalItems);
 
@@ -51,9 +54,7 @@
 		}));
 	}
 
-	let isOpen: boolean = false;
 	let gameToRemove: GameType | SavedGameType;
-	console.log('isOpen', isOpen);
 
 	interface RemoveGameEvent extends Event {
 		detail: GameType | SavedGameType;
@@ -144,7 +145,21 @@
 				/>
 			{/each}
 		</div>
-		<!-- <Pagination
+	</div>
+{:else if $boredState.loading}
+	<div class="games">
+		<h1>Games Found:</h1>
+		<div class="games-list">
+			{#each [1, 2, 3, 4] as game, i}
+				<SkeletonPlaceholder
+					style="width: 100%; height: 500px; border-radius: var(--borderRadius);"
+				/>
+			{/each}
+		</div>
+	</div>
+{/if}
+
+<!-- <Pagination
 			{pageSize}
 			{currentPage}
 			{totalItems}
@@ -155,9 +170,6 @@
 			on:previousPageEvent={(event) => console.log('Prev page called', event)}
 			on:perPageEvent={(event) => console.log('Per page called', event)}
 		/> -->
-	</div>
-{/if}
-
 <style lang="scss">
 	.game-search {
 		display: grid;
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 4140e53..c1754e2 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -355,7 +355,11 @@ ol {
 }
 
 .error {
-  color: var(--tomatoOrange);
+  margin: 1rem;
+  padding: 0.5rem;
+  border-radius: var(--borderRadius);
+  background-color: var(--tomatoOrange);
+  font-weight: 700;
 }
 
 /* Base Dialog Styles */