From 7fe85df58b361b2679d95916ff979ccbf687a0f3 Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@pm.me>
Date: Mon, 31 Oct 2022 15:09:21 -0500
Subject: [PATCH] Fixing add remove for both stores on other pages.

---
 src/routes/+layout.svelte         |  1 -
 src/routes/+page.svelte           | 33 +++++++++--
 src/routes/search/+page.server.ts | 95 -------------------------------
 src/routes/search/+page.svelte    | 23 +++++++-
 4 files changed, 47 insertions(+), 105 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index b725b38..f15bb3f 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -40,7 +40,6 @@
 		}
 		if (collectionEmpty && localStorage?.collection && localStorage?.collection?.length !== 0) {
 			const collection = JSON.parse(localStorage.collection);
-			console.log('collection', collection);
 			if (collection?.length !== 0) {
 				collectionStore.addAll(collection);
 			}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 80c9d09..826a965 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -11,6 +11,7 @@
 	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';
 
 	export let data: PageData;
 	export let form: ActionData;
@@ -57,8 +58,8 @@
 		detail: GameType | SavedGameType;
 	}
 
-	function handleRemoveGame(event: RemoveGameEvent) {
-		console.log('Base Page handle remove');
+	function handleRemoveCollection(event: RemoveGameEvent) {
+		console.log('Remove collection event handler');
 		console.log('event', event);
 		gameToRemove = event?.detail;
 		boredState.update((n) => ({
@@ -66,6 +67,16 @@
 			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>
@@ -124,7 +135,12 @@
 		<h1>Games Found:</h1>
 		<div class="games-list">
 			{#each $gameStore as game (game.id)}
-				<Game on:removeGameEvent={handleRemoveGame} {game} />
+				<Game
+					on:handleRemoveWishlist={handleRemoveWishlist}
+					on:handleRemoveCollection={handleRemoveCollection}
+					minimal
+					{game}
+				/>
 			{/each}
 		</div>
 		<!-- <Pagination
@@ -162,15 +178,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;
 		}
 	}
 
diff --git a/src/routes/search/+page.server.ts b/src/routes/search/+page.server.ts
index 1715cfe..65bb7b0 100644
--- a/src/routes/search/+page.server.ts
+++ b/src/routes/search/+page.server.ts
@@ -120,99 +120,4 @@ export const actions: Actions = {
       totalCount: 0
     };
   }
-
-  //   const id = form.get('id');
-  //   const ids = form.get('ids');
-  //   const minAge = form.get('minAge');
-  //   const minPlayers = form.get('minPlayers');
-  //   const maxPlayers = form.get('maxPlayers');
-  //   const exactMinAge = form.get('exactMinAge') || false;
-  //   const exactMinPlayers = form.get('exactMinPlayers') || false;
-  //   const exactMaxPlayers = form.get('exactMaxPlayers') || false;
-  //   const random = form.get('random') === 'on' || false;
-
-  //   if (minAge) {
-  //     if (exactMinAge) {
-  //       queryParams.min_age = +minAge;
-  //     } else {
-  //       queryParams.gt_min_age = +minAge === 1 ? 0 : +minAge - 1;
-  //     }
-  //   }
-
-  //   if (minPlayers) {
-  //     if (exactMinPlayers) {
-  //       queryParams.min_players = +minPlayers;
-  //     } else {
-  //       queryParams.gt_min_players = +minPlayers === 1 ? 0 : +minPlayers - 1;
-  //     }
-  //   }
-
-  //   if (maxPlayers) {
-  //     if (exactMaxPlayers) {
-  //       queryParams.max_players = +maxPlayers;
-  //     } else {
-  //       queryParams.lt_max_players = +maxPlayers + 1;
-  //     }
-  //   }
-
-  //   if (id) {
-  //     queryParams.ids = new Array(`${id}`);
-  //   }
-
-  //   if (ids) {
-  //     // TODO: Pass in ids array from localstorage / game store
-  //     queryParams.ids = new Array(ids);
-  //   }
-
-  //   queryParams.random = random;
-  //   console.log('queryParams', queryParams);
-
-  //   const newQueryParams: Record<string, string> = {};
-  //   for (const key in queryParams) {
-  //     newQueryParams[key] = `${queryParams[key as keyof typeof queryParams]}`;
-  //   }
-
-  //   const urlQueryParams = new URLSearchParams(newQueryParams);
-
-  //   const url = `https://api.boardgameatlas.com/api/search${urlQueryParams ? `?${urlQueryParams}` : ''
-  //     }`;
-  //   const response = await fetch(url, {
-  //     method: 'get',
-  //     headers: {
-  //       'content-type': 'application/json'
-  //     }
-  //   });
-  //   console.log('response status', response.status);
-  //   console.log('board game response action', response);
-  //   if (response.status === 404) {
-  //     // user hasn't created a todo list.
-  //     // start with an empty array
-  //     return {
-  //       success: true,
-  //       games: [],
-  //       totalCount: 0
-  //     };
-  //   }
-
-  //   if (response.status === 200) {
-  //     const gameResponse = await response.json();
-  //     console.log('gameResponse', gameResponse);
-  //     const gameList = gameResponse?.games;
-  //     const games: GameType[] = [];
-  //     gameList.forEach((game: GameType) => {
-  //       games.push(mapAPIGameToBoredGame(game));
-  //     });
-  //     console.log('action games', games);
-  //     return {
-  //       games,
-  //       totalCount: games.length
-  //     };
-  //   }
-
-  //   return { success: false };
-  // }
-  // create: async function create({ request, locals }): Promise<any> {
-  //   const data = await getFormDataObject<any>(request);
-  //   return data;
-  // }
 }
diff --git a/src/routes/search/+page.svelte b/src/routes/search/+page.svelte
index 2e4d4dd..09d296c 100644
--- a/src/routes/search/+page.svelte
+++ b/src/routes/search/+page.svelte
@@ -8,6 +8,7 @@
 	import { ToastType, type GameType, type SavedGameType } from '$root/lib/types';
 	import { boredState } from '$root/lib/stores/boredState';
 	import { toast } from '$root/lib/components/toast/toast';
+	import RemoveWishlistDialog from '$root/lib/components/dialog/RemoveWishlistDialog.svelte';
 
 	export let data: PageData;
 	export let form: ActionData;
@@ -27,7 +28,8 @@
 		detail: GameType | SavedGameType;
 	}
 
-	function handleRemoveGame(event: RemoveGameEvent) {
+	function handleRemoveCollection(event: RemoveGameEvent) {
+		console.log('Remove collection event handler');
 		console.log('event', event);
 		gameToRemove = event?.detail;
 		boredState.update((n) => ({
@@ -35,6 +37,16 @@
 			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>
 
 <div class="game-search">
@@ -53,7 +65,7 @@
 				} else {
 					gameStore.removeAll();
 					gameStore.addAll(result?.data?.games);
-					totalItems = result?.data?.totalCount;
+					// totalItems = result?.data?.totalCount;
 					console.log(`Frontend result: ${JSON.stringify(result)}`);
 					toast.send('Sucess!', { duration: 3000, type: ToastType.INFO, dismissible: true });
 					await applyAction(result);
@@ -70,7 +82,12 @@
 		<h1>Games Found:</h1>
 		<div class="games-list">
 			{#each $gameStore as game (game.id)}
-				<Game on:removeGameEvent={handleRemoveGame} {game} />
+				<Game
+					on:handleRemoveWishlist={handleRemoveWishlist}
+					on:handleRemoveCollection={handleRemoveCollection}
+					minimal
+					{game}
+				/>
 			{/each}
 		</div>
 	</div>