From 454259d9e781968f30db94941380fa30bd0cc01d Mon Sep 17 00:00:00 2001
From: Josh Creek <8179928+jcreek@users.noreply.github.com>
Date: Mon, 8 Apr 2024 21:09:34 +0100
Subject: [PATCH] feat(#19): Add a basic My Dex page

---
 src/lib/components/PokemonSprite.svelte  |  2 +-
 src/lib/helpers/dex.json                 | 52 ++++++++++++------------
 src/routes/api/pokedexentries/+server.ts | 26 ++++++++++++
 src/routes/mydex/+page.svelte            | 49 ++++++++++++++++++++++
 4 files changed, 102 insertions(+), 27 deletions(-)
 create mode 100644 src/routes/api/pokedexentries/+server.ts
 create mode 100644 src/routes/mydex/+page.svelte

diff --git a/src/lib/components/PokemonSprite.svelte b/src/lib/components/PokemonSprite.svelte
index ad25da5..789c0c1 100644
--- a/src/lib/components/PokemonSprite.svelte
+++ b/src/lib/components/PokemonSprite.svelte
@@ -32,5 +32,5 @@
 {#if imagePath}
 	<img src={imagePath} alt="sprite" />
 {:else}
-	<p>Loading...</p>
+	<span class="loading loading-spinner loading-xs"></span>
 {/if}
diff --git a/src/lib/helpers/dex.json b/src/lib/helpers/dex.json
index 24a1a5b..b66de8c 100644
--- a/src/lib/helpers/dex.json
+++ b/src/lib/helpers/dex.json
@@ -38,7 +38,7 @@
 		"columnNumber": 3,
 		"pokedexNumber": 3,
 		"name": "Venusaur",
-		"form": "Gigantamax",
+		"form": "",
 		"generation": 1,
 		"originGame": "Red/Blue/Yellow",
 		"altOriginGame": "LG: Pikachu/Eevee",
@@ -98,7 +98,7 @@
 		"columnNumber": 1,
 		"pokedexNumber": 6,
 		"name": "Charizard",
-		"form": "Gigantamax",
+		"form": "",
 		"generation": 1,
 		"originGame": "Red/Blue/Yellow",
 		"altOriginGame": "LG: Pikachu/Eevee",
@@ -143,7 +143,7 @@
 		"columnNumber": 4,
 		"pokedexNumber": 9,
 		"name": "Blastoise",
-		"form": "Gigantamax",
+		"form": "",
 		"generation": 1,
 		"originGame": "Red/Blue/Yellow",
 		"altOriginGame": "LG: Pikachu/Eevee",
@@ -188,7 +188,7 @@
 		"columnNumber": 1,
 		"pokedexNumber": 12,
 		"name": "Butterfree",
-		"form": "Gigantamax",
+		"form": "",
 		"generation": 1,
 		"originGame": "Red/Blue/Yellow",
 		"altOriginGame": "LG: Pikachu/Eevee",
@@ -1178,7 +1178,7 @@
 		"columnNumber": 1,
 		"pokedexNumber": 52,
 		"name": "Meowth",
-		"form": "Gigantamax",
+		"form": "",
 		"generation": 1,
 		"originGame": "Blue",
 		"altOriginGame": "LG: Eevee",
@@ -1523,7 +1523,7 @@
 		"columnNumber": 6,
 		"pokedexNumber": 68,
 		"name": "Machamp",
-		"form": "Gigantamax",
+		"form": "",
 		"generation": 1,
 		"originGame": "Red/Blue/Yellow",
 		"altOriginGame": "LG: Pikachu/Eevee",
@@ -2093,7 +2093,7 @@
 		"columnNumber": 2,
 		"pokedexNumber": 94,
 		"name": "Gengar",
-		"form": "Gigantamax",
+		"form": "",
 		"generation": 1,
 		"originGame": "Red/Blue/Yellow",
 		"altOriginGame": "LG: Pikachu/Eevee",
@@ -2183,7 +2183,7 @@
 		"columnNumber": 2,
 		"pokedexNumber": 99,
 		"name": "Kingler",
-		"form": "Gigantamax",
+		"form": "",
 		"generation": 1,
 		"originGame": "Red/Blue/Yellow",
 		"altOriginGame": "LG: Pikachu/Eevee",
@@ -2914,7 +2914,7 @@
 		"columnNumber": 2,
 		"pokedexNumber": 131,
 		"name": "Lapras",
-		"form": "Gigantamax",
+		"form": "",
 		"generation": 1,
 		"originGame": "Red/Blue/Yellow",
 		"altOriginGame": "LG: Pikachu/Eevee",
@@ -3109,7 +3109,7 @@
 		"columnNumber": 3,
 		"pokedexNumber": 143,
 		"name": "Snorlax",
-		"form": "Gigantamax",
+		"form": "",
 		"generation": 1,
 		"originGame": "Red/Blue/Yellow",
 		"altOriginGame": "LG: Pikachu/Eevee",
@@ -11538,7 +11538,7 @@
 		"columnNumber": 6,
 		"pokedexNumber": 569,
 		"name": "Garbodor",
-		"form": "Gigantamax",
+		"form": "",
 		"generation": 5,
 		"originGame": "Black/White",
 		"altOriginGame": "Black 2/White 2",
@@ -16428,7 +16428,7 @@
 		"columnNumber": 1,
 		"pokedexNumber": 810,
 		"name": "Melmetal",
-		"form": "Gigantamax",
+		"form": "",
 		"generation": null,
 		"originGame": "GO",
 		"altOriginGame": "",
@@ -16473,7 +16473,7 @@
 		"columnNumber": 4,
 		"pokedexNumber": 813,
 		"name": "Rillaboom",
-		"form": "Gigantamax",
+		"form": "",
 		"generation": 8,
 		"originGame": "Sword/Shield",
 		"altOriginGame": "",
@@ -16518,7 +16518,7 @@
 		"columnNumber": 1,
 		"pokedexNumber": 816,
 		"name": "Cinderace",
-		"form": "Gigantamax",
+		"form": "",
 		"generation": 8,
 		"originGame": "Sword/Shield",
 		"altOriginGame": "",
@@ -16563,7 +16563,7 @@
 		"columnNumber": 4,
 		"pokedexNumber": 819,
 		"name": "Inteleon",
-		"form": "Gigantamax",
+		"form": "",
 		"generation": 8,
 		"originGame": "Sword/Shield",
 		"altOriginGame": "",
@@ -16638,7 +16638,7 @@
 		"columnNumber": 3,
 		"pokedexNumber": 824,
 		"name": "Corviknight",
-		"form": "Gigantamax",
+		"form": "",
 		"generation": 8,
 		"originGame": "Sword/Shield",
 		"altOriginGame": "",
@@ -16683,7 +16683,7 @@
 		"columnNumber": 6,
 		"pokedexNumber": 827,
 		"name": "Orbeetle",
-		"form": "Gigantamax",
+		"form": "",
 		"generation": 8,
 		"originGame": "Sword/Shield",
 		"altOriginGame": "",
@@ -16803,7 +16803,7 @@
 		"columnNumber": 2,
 		"pokedexNumber": 835,
 		"name": "Drednaw",
-		"form": "Gigantamax",
+		"form": "",
 		"generation": 8,
 		"originGame": "Sword/Shield",
 		"altOriginGame": "",
@@ -16878,7 +16878,7 @@
 		"columnNumber": 1,
 		"pokedexNumber": 840,
 		"name": "Coalossal",
-		"form": "Gigantamax",
+		"form": "",
 		"generation": 8,
 		"originGame": "Sword/Shield",
 		"altOriginGame": "",
@@ -16908,7 +16908,7 @@
 		"columnNumber": 3,
 		"pokedexNumber": 842,
 		"name": "Flapple",
-		"form": "Gigantamax",
+		"form": "",
 		"generation": 8,
 		"originGame": "Sword",
 		"altOriginGame": "",
@@ -16923,7 +16923,7 @@
 		"columnNumber": 4,
 		"pokedexNumber": 843,
 		"name": "Appletun",
-		"form": "Gigantamax",
+		"form": "",
 		"generation": 8,
 		"originGame": "Shield",
 		"altOriginGame": "",
@@ -16953,7 +16953,7 @@
 		"columnNumber": 6,
 		"pokedexNumber": 845,
 		"name": "Sandaconda",
-		"form": "Gigantamax",
+		"form": "",
 		"generation": 8,
 		"originGame": "Sword/Shield",
 		"altOriginGame": "",
@@ -17073,7 +17073,7 @@
 		"columnNumber": 2,
 		"pokedexNumber": 852,
 		"name": "Centiskorch",
-		"form": "Gigantamax",
+		"form": "",
 		"generation": 8,
 		"originGame": "Sword/Shield",
 		"altOriginGame": "",
@@ -17208,7 +17208,7 @@
 		"columnNumber": 5,
 		"pokedexNumber": 859,
 		"name": "Hatterene",
-		"form": "Gigantamax",
+		"form": "",
 		"generation": 8,
 		"originGame": "Sword/Shield",
 		"altOriginGame": "",
@@ -17253,7 +17253,7 @@
 		"columnNumber": 2,
 		"pokedexNumber": 862,
 		"name": "Grimmsnarl",
-		"form": "Gigantamax",
+		"form": "",
 		"generation": 8,
 		"originGame": "Sword/Shield",
 		"altOriginGame": "",
@@ -18468,7 +18468,7 @@
 		"columnNumber": 5,
 		"pokedexNumber": 880,
 		"name": "Copperajah",
-		"form": "Gigantamax",
+		"form": "",
 		"generation": 8,
 		"originGame": "Sword/Shield",
 		"altOriginGame": "",
diff --git a/src/routes/api/pokedexentries/+server.ts b/src/routes/api/pokedexentries/+server.ts
new file mode 100644
index 0000000..23fd8bb
--- /dev/null
+++ b/src/routes/api/pokedexentries/+server.ts
@@ -0,0 +1,26 @@
+import { json } from '@sveltejs/kit';
+import { dbConnect, dbDisconnect } from '$lib/utils/db';
+import { type PokedexEntry } from '$lib/models/PokedexEntry';
+import PokedexEntryRepository from '$lib/repositories/PokedexEntryRepository';
+
+export const GET = async () => {
+	return json(await fetchPokeDexEntriesFromDatabase());
+};
+
+async function fetchPokeDexEntriesFromDatabase() {
+	let pokemonData = null as PokedexEntry[] | null;
+
+	try {
+		await dbConnect();
+		const repo = new PokedexEntryRepository();
+		pokemonData = await repo.findAll();
+		// order by pokedexNumber property, ascending
+		pokemonData = pokemonData.sort((a, b) => a.pokedexNumber - b.pokedexNumber);
+	} catch (error) {
+		console.error(error);
+	} finally {
+		dbDisconnect();
+	}
+
+	return pokemonData;
+}
diff --git a/src/routes/mydex/+page.svelte b/src/routes/mydex/+page.svelte
new file mode 100644
index 0000000..c46930d
--- /dev/null
+++ b/src/routes/mydex/+page.svelte
@@ -0,0 +1,49 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { type PokedexEntry } from '$lib/models/PokedexEntry';
+	import PokemonSprite from '$lib/components/PokemonSprite.svelte';
+
+	let pokemonData = null as PokedexEntry[] | null;
+
+	async function fetchPokeDexEntries() {
+		const response = await fetch('/api/pokedexentries');
+		if (!response.ok) {
+			throw new Error('Failed to fetch Pokémon data');
+		}
+
+		pokemonData = await response.json();
+	}
+
+	onMount(async () => {
+		const cachedData = localStorage.getItem('pokeDexEntries');
+		if (cachedData) {
+			// Use cached data
+			pokemonData = JSON.parse(cachedData);
+		} else {
+			await fetchPokeDexEntries();
+			// Cache data in local storage
+			localStorage.setItem('pokeDexEntries', JSON.stringify(pokemonData));
+		}
+	});
+</script>
+
+{#if pokemonData}
+	{#each pokemonData as pokemon}
+		<div>
+			<PokemonSprite
+				pokedexNumber={pokemon.pokedexNumber.toString().padStart(3, '0')}
+				form={pokemon.form
+					.replace(/[^a-zA-Z ]/g, '')
+					.trim()
+					.replace(/ /g, '-')}
+			/>
+			<p>
+				{pokemon.pokedexNumber.toString().padStart(3, '0')}
+				{pokemon.pokemon}
+				{pokemon.form}
+			</p>
+		</div>
+	{/each}
+{:else}
+	<span class="loading loading-spinner loading-xl"></span>
+{/if}