Bring back layout transition, fix showing games on collection and wishlist.

src/lib/components/game/index.svelte

@@ -24,7 +24,7 @@
 			<a
 				class="thumbnail"
 				href={`/game/${game.id}`}
-				title={`View ${game.game_name}`}
+				title={`View ${game.name}`}
 				data-sveltekit-preload-data
 			>
 				<img src={game.thumb_url} alt={`Image of ${game.name}`} loading="lazy" decoding="async" />

src/routes/(protected)/collection/+page.server.ts

@@ -1,4 +1,4 @@
-import { fail, redirect } from '@sveltejs/kit';
+import { error, fail, redirect } from '@sveltejs/kit';
 import { setError, superValidate } from 'sveltekit-superforms/server';
 import type { PageServerLoad } from '../../$types.js';
 import prisma from '$lib/prisma.js';
@@ -71,13 +71,11 @@ export const load: PageServerLoad = async ({ fetch, url, locals }) => {
 			const game = item.game;
 			if (game) {
 				let collectionItem: ListGame = {
-					id: item.id,
+					id: game.id,
 					collection_id: item.collection_id,
-					game_id: game.id,
+					name: game.name,
-					game_name: game.name,
 					thumb_url: game.thumb_url,
 					times_played: item.times_played,
-					wishlist_id: '',
 					in_collection: true
 				};
 				collectionItems.push(collectionItem);
@@ -106,38 +104,56 @@ export const actions = {
 		const { params, locals, request } = event;
 		const form = await superValidate(event, modifyListGameSchema);
 
-		const session = await locals.auth.validate();
+		try {
-		if (!session) {
+			const session = await locals.auth.validate();
-			throw redirect(302, '/auth/signin');
+			if (!session) {
-		}
+				throw redirect(302, '/auth/signin');
-
-		let game = await prisma.game.findUnique({
-			where: {
-				id: form.id
 			}
-		});
 
-		if (!game) {
+			let game = await prisma.game.findUnique({
-			game = await prisma.game.create({
+				where: {
-				data: {
+					id: form.data.id
-					name: form.name
 				}
 			});
-			throw redirect(302, '/404');
-		}
 
-		if (game) {
+			if (!game) {
-			const wishlist = await prisma.collectionItem.create({
+				// game = await prisma.game.create({
-				data: {
+				// 	data: {
-					user_id: session.userId,
+				// 		name: form.name
-					name: form.name
+				// 	}
+				// });
+				console.log('game not found');
+				throw redirect(302, '/404');
+			}
+
+			if (game) {
+				const collection = await prisma.collection.findUnique({
+					where: {
+						user_id: session.user.userId
+					}
+				});
+
+				if (!collection) {
+					console.log('Wishlist not found');
+					return error(404, 'Wishlist not found');
 				}
-			});
-		}
 
-		return {
+				await prisma.collectionItem.create({
-			form
+					data: {
-		};
+						game_id: game.id,
+						collection_id: collection.id,
+						times_played: 0
+					}
+				});
+			}
+
+			return {
+				form
+			};
+		} catch (e) {
+			console.error(e);
+			return error(500, 'Something went wrong');
+		}
 	},
 	// Create new wishlist
 	create: async ({ params, locals, request }) => {
@@ -145,6 +161,7 @@ export const actions = {
 		if (!session) {
 			throw redirect(302, '/auth/signin');
 		}
+		return error(405, 'Method not allowed');
 	},
 	// Delete a wishlist
 	delete: async ({ params, locals, request }) => {
@@ -152,56 +169,61 @@ export const actions = {
 		if (!session) {
 			throw redirect(302, '/auth/signin');
 		}
+		return error(405, 'Method not allowed');
 	},
 	// Remove game from a wishlist
 	remove: async (event) => {
 		const { params, locals, request } = event;
 		const form = await superValidate(event, modifyListGameSchema);
 
-		const session = await locals.auth.validate();
+		try {
-		if (!session) {
+			const session = await locals.auth.validate();
-			throw redirect(302, '/auth/signin');
+			if (!session) {
-		}
+				throw redirect(302, '/auth/signin');
-
-		console.log('form', form);
-
-		let collectionItem = await prisma.collectionItem.findUnique({
-			where: {
-				id: form.data.id
-			},
-			include: {
-				collection: {
-					select: {
-						user_id: true
-					}
-				}
 			}
-		});
-		console.log('collectionItem', collectionItem);
-		const belongsToUser = collectionItem?.collection?.user_id === session.userId;
-		console.log('belongsToUser', belongsToUser);
 
-		if (!collectionItem || !belongsToUser) {
+			let game = await prisma.game.findUnique({
-			// game = await prisma.game.create({
-			// 	data: {
-			// 		name: form.name
-			// 	}
-			// });
-			throw redirect(302, '/404');
-		}
-
-		if (collectionItem) {
-			console.log('Going to delete');
-			await prisma.collectionItem.delete({
 				where: {
-					id: collectionItem.id
+					id: form.data.id
 				}
 			});
-		}
 
-		return {
+			if (!game) {
-			form,
+				// game = await prisma.game.create({
-			collection: []
+				// 	data: {
-		};
+				// 		name: form.name
+				// 	}
+				// });
+				console.log('game not found');
+				throw redirect(302, '/404');
+			}
+
+			if (game) {
+				const collection = await prisma.collection.findUnique({
+					where: {
+						user_id: session.user.userId
+					}
+				});
+
+				if (!collection) {
+					console.log('Wishlist not found');
+					return error(404, 'Wishlist not found');
+				}
+
+				await prisma.collectionItem.delete({
+					where: {
+						collection_id: collection.id,
+						game_id: game.id
+					}
+				});
+			}
+
+			return {
+				form
+			};
+		} catch (e) {
+			console.error(e);
+			return error(500, 'Something went wrong');
+		}
 	}
 };

src/routes/(protected)/collection/+page.svelte

@@ -1,66 +1,12 @@
 <script lang="ts">
 	// import { tick, onDestroy } from 'svelte';
 	import Game from '$lib/components/game/index.svelte';
-	import type { SearchSchema } from '$lib/zodValidation.js';
-	import { superForm } from 'sveltekit-superforms/client';
-	import type { SuperValidated } from 'sveltekit-superforms';
-	import type { ModifyListGame } from '$lib/config/zod-schemas.js';
-	import { onMount } from 'svelte';
-	import toast from 'svelte-french-toast';
-	// import { collectionStore } from '$lib/stores/collectionStore';
-	// import type { GameType, SavedGameType } from '$lib/types';
-	// import { boredState } from '$lib/stores/boredState';
-	// import Pagination from '$lib/components/pagination/index.svelte';
-	// import RemoveCollectionDialog from '$lib/components/dialog/RemoveCollectionDialog.svelte';
-	// import RemoveWishlistDialog from '$lib/components/dialog/RemoveWishlistDialog.svelte';
-	// import { createSearchStore, searchHandler } from '$lib/stores/search';
 
 	export let data;
 	console.log(`Page data: ${JSON.stringify(data)}`);
 	let collectionItems = data?.collection || [];
 	console.log('collectionItems', collectionItems);
 
-	// let gameToRemove: GameType | SavedGameType;
-	// let pageSize = 10;
-	// let page = 1;
-
-	// const searchStore = createSearchStore($collectionStore);
-	// console.log('searchStore', $searchStore);
-
-	// const unsubscribe = searchStore.subscribe((model) => searchHandler(model));
-
-	// onDestroy(() => {
-	// 	unsubscribe();
-	// });
-
-	// $: skip = (page - 1) * pageSize;
-	// $: gamesShown = $searchStore.data.slice(skip, skip + pageSize);
-	// $: totalItems = $searchStore.search === '' ? $collectionStore.length : $searchStore.filtered.length;
-
-	// 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 }
-	// 	}));
-	// }
-
 	// async function handleNextPageEvent(event: CustomEvent) {
 	// 	if (+event?.detail?.page === page + 1) {
 	// 		page += 1;
@@ -95,7 +41,7 @@
 			<h2>No games in your collection</h2>
 		{:else}
 			{#each collectionItems as game (game.game_id)}
-				<Game {game} data={data.listManageForm} />
+				<Game {game} />
 			{/each}
 		{/if}
 	</div>

src/routes/(protected)/wishlist/+page.server.ts

@@ -39,7 +39,7 @@ export async function load({ params, locals }) {
 		console.log('wishlist', wishlist);
 
 		return {
-			games: wishlist?.items
+			items: wishlist?.items
 		};
 	} catch (e) {
 		console.error(e);
@@ -109,6 +109,7 @@ export const actions = {
 		if (!session) {
 			throw redirect(302, '/auth/signin');
 		}
+		return error(405, 'Method not allowed');
 	},
 	// Delete a wishlist
 	delete: async ({ params, locals, request }) => {
@@ -116,6 +117,7 @@ export const actions = {
 		if (!session) {
 			throw redirect(302, '/auth/signin');
 		}
+		return error(405, 'Method not allowed');
 	},
 	// Remove game from a wishlist
 	remove: async (event) => {

src/routes/(protected)/wishlist/+page.svelte

@@ -3,20 +3,46 @@
 
 	export let data;
 	console.log('data', data);
-	const games = data.games;
+	const items = data.items || [];
 </script>
 
 <svelte:head>
 	<title>{`Your Wishlist | Bored Game`}</title>
 </svelte:head>
 
-<h2>Games on your wishlist:</h2>
+<h1>Your wishlist</h1>
+
 <div class="games-list">
-	{#if games.length > 0}
+	{#if items.length > 0}
-		{#each games as game (game.id)}
+		{#each items as item (item.id)}
-			<Game {game} />
+			<Game game={item.game} />
 		{/each}
 	{:else}
 		<h2>Sorry no games found!</h2>
 	{/if}
 </div>
+
+<style lang="postcss">
+	h1 {
+		margin: 1.5rem 0rem;
+		width: 100%;
+	}
+
+	.games {
+		margin: 2rem 0rem;
+	}
+
+	.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: 550px) {
+			grid-template-columns: 1fr;
+		}
+	}
+</style>

src/routes/+layout.svelte

@@ -7,6 +7,7 @@
 	import { browser } from '$app/environment';
 	import debounce from 'just-debounce-it';
 	import 'iconify-icon';
+	import Transition from '$lib/components/transition/index.svelte';
 	import Analytics from '$lib/components/analytics.svelte';
 	import Header from '$lib/components/header/index.svelte';
 	import Footer from '$lib/components/footer.svelte';
@@ -122,9 +123,9 @@
 	<Header user={data.user} />
 
 	<main>
-		<!-- <Transition url={data.url} transition={{ type: 'page' }}> -->
+		<Transition url={data.url} transition={{ type: 'page' }}>
 			<slot />
-		<!-- </Transition> -->
+		</Transition>
 	</main>
 
 	<Footer />