Add solution

Author: Xedon

src/$lib/client/pokemon.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { fetchPokemon, type Pokemon } from './pokeClient';
+	export let id: string;
+	let pokemonFetch: Promise<Pokemon>;
+	onMount(() => {
+		pokemonFetch = fetchPokemon(id);
+	});
+</script>
+
+<div class="flex flex-col items-center">
+	{#if pokemonFetch !== undefined}
+		{#await pokemonFetch}
+			<h2>Loading...</h2>
+		{:then pokemon}
+			<img height={200} width={200} src={pokemon.sprites.front_default} alt={pokemon.name} />
+			<div>
+				Name: {pokemon.name.charAt(0).toUpperCase() + pokemon.name.slice(1)}
+			</div>
+			<div>Weight: {pokemon.weight}</div>
+		{/await}
+	{/if}
+</div>

src/$lib/client/randomPokemonLink.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+	let id = (Math.random() * 1000).toFixed();
+</script>
+
+<a href={`/pokemon/${id}`}> Random Pokemon </a>

src/routes/+layout.svelte

@@ -1,5 +1,10 @@
 <script>
+	import RandomPokemonLink from '../$lib/client/randomPokemonLink.svelte';
 	import '../app.css';
 </script>
 
-<slot />
+<div class="flex min-h-screen w-full flex-col items-center p-16 text-white bg-black">
+	<RandomPokemonLink />
+
+	<div class="p-8"><slot /></div>
+</div>

src/routes/+page.svelte

@@ -1,3 +0,0 @@
-<h1 class="text-3xl font-bold underline">Hello world!</h1>
-
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>

src/routes/pokemon/[id]/+page.server.ts

@@ -0,0 +1,13 @@
+import { createPost, readPosts } from '../../../$lib/server/sbClient';
+import type { Actions, PageServerLoad } from './$types';
+
+export const load = (async ({ params }) => {
+	return { id: params.id, posts: await readPosts(params.id).then((data) => data.data ?? []) };
+}) satisfies PageServerLoad;
+
+export const actions = {
+	default: async (event) => {
+		const formData = await event.request.formData();
+		createPost(event.params.id, formData.get('content')!.toString());
+	}
+} satisfies Actions;

src/routes/pokemon/[id]/+page.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import Pokemon from '../../../$lib/client/pokemon.svelte';
+	import type { PageData } from './$types';
+	import { invalidate } from '$app/navigation';
+	import RandomPokemonLink from '../../../$lib/client/randomPokemonLink.svelte';
+
+	export let data: PageData;
+	const invalidateRoute = () => invalidate(`/pokemon/${data.id}`);
+</script>
+
+<Pokemon id={data.id} />
+<div class="p-8 flex flex-col items-center gap-1">
+	<h2 class="text-2xl">Comments</h2>
+	<div class="p-8">
+		{#each data.posts as post}
+			<article>
+				<span>{post.content}</span>
+			</article>
+		{/each}
+		<div />
+	</div>
+</div>
+
+<form class="grid justify-items-center grid-flow-row" method="post" on:submit={invalidateRoute}>
+	<label for="content" class="text-xl"> Comment this Pokemon </label>
+	<textarea id="content" name="content" class="ml-1 text-black" />
+	<input type="submit" />
+</form>