Fixing code and naming.

src/routes/(app)/(protected)/collections/[id]/+page.server.ts

@@ -34,7 +34,12 @@ export async function load(event) {
 
 	try {
 		const collection = await db.query.collections.findFirst({
-			where: and(eq(collections.user_id, user.id), eq(collections.id, id)),
+			columns: {
+				id: true,
+				cuid: true,
+				name: true,
+			},
+			where: and(eq(collections.user_id, user.id), eq(collections.cuid, id)),
 		});
 		console.log('collection', collection);
 
@@ -49,6 +54,10 @@ export async function load(event) {
 		}
 
 		const collectionItems = await db.query.collection_items.findMany({
+			columns: {
+				collection_id: true,
+				times_played: true,
+			},
 			where: eq(collection_items.collection_id, collection.id),
 			with: {
 				game: {
@@ -70,22 +79,22 @@ export async function load(event) {
 			console.log('item', item);
 			const game = item.game;
 			if (game) {
-				let collectionItem: ListGame = {
+				items.push({
 					id: game.id,
 					collection_id: item.collection_id,
-					name: game.name,
+					game_name: game.name ?? "Game doesn't have a name",
 					thumb_url: game.thumb_url,
-					times_played: item.times_played,
+					times_played: item.times_played ?? 0,
 					in_collection: true,
-				};
-				items.push(collectionItem);
+				});
 			}
 		}
 
 		return {
 			searchForm,
 			listManageForm,
-			collection: items,
+			collection,
+			items,
 		};
 	} catch (e) {
 		console.error(e);
@@ -94,7 +103,10 @@ export async function load(event) {
 	return {
 		searchForm,
 		listManageForm,
-		collection: [],
+		collection: {
+			name: "Collection doesn't have a name",
+		},
+		items: [],
 	};
 }
 

src/routes/(app)/(protected)/collections/[id]/+page.svelte

@@ -4,8 +4,9 @@
 
 	export let data;
 	console.log(`Page data: ${JSON.stringify(data)}`);
-	let collectionItems = data?.collection || [];
-	console.log('collectionItems', collectionItems);
+	let collection = data?.collection ?? {};
+	let items = data?.items || [];
+	console.log('items', items);
 
 	// async function handleNextPageEvent(event: CustomEvent) {
 	// 	if (+event?.detail?.page === page + 1) {
@@ -29,18 +30,18 @@
 </script>
 
 <svelte:head>
-	<title>Your Collection | Bored Game</title>
+	<title>{collection.name ?? 'Your Collection'} | Bored Game</title>
 </svelte:head>
 
-<h1>Your Collection</h1>
+<h1>{collection.name ?? 'Your Collection'}</h1>
 <!-- <input type="text" id="search" name="search" placeholder="Search Your Collection" bind:value={$searchStore.search} /> -->
 
 <div class="games">
 	<div class="games-list">
-		{#if collectionItems.length === 0}
+		{#if items.length === 0}
 			<h2>No games in your collection</h2>
 		{:else}
-			{#each collectionItems as game (game.game_id)}
+			{#each items as game (game.game_id)}
 				<Game {game} />
 			{/each}
 		{/if}

src/routes/(app)/(protected)/wishlists/[id]/+page.server.ts

@@ -26,23 +26,10 @@ export async function load(event) {
 			redirect(302, '/404');
 		}
 
-		const items = await db.query.wishlist_items.findMany({
-			where: eq(wishlist_items.wishlist_id, wishlist.id),
-			with: {
-				game: {
-					columns: {
-						id: true,
-						name: true,
-						thumb_url: true,
-					},
-				},
-			},
-		});
-
 		console.log('wishlist', wishlist);
 
 		return {
-			items,
+			wishlist,
 		};
 	} catch (e) {
 		console.error(e);