Fixing API TS file for routes, fixing loading data on the game page after migration, etc.

src/routes/+page.server.ts

@@ -1,5 +1,5 @@
 import { boardGameApi } from './_api';
-import type { Action } from '@sveltejs/kit';
+import { error, type Action } from '@sveltejs/kit';
 
 export const POST: Action = async ({ request, locals }) => {
   const form = await request.formData();
@@ -26,11 +26,9 @@ export const POST: Action = async ({ request, locals }) => {
   if (response.status === 404) {
     // user hasn't created a todo list.
     // start with an empty array
-    throw new Error("@migration task: Migrate this return statement (https://github.com/sveltejs/kit/discussions/5774#discussioncomment-3292699)");
+    // throw new Error("@migration task: Migrate this return statement (https://github.com/sveltejs/kit/discussions/5774#discussioncomment-3292699)");
     return {
-      body: {
-        games: []
-      }
+      games: []
     };
   }
 
@@ -38,16 +36,15 @@ export const POST: Action = async ({ request, locals }) => {
     const gameResponse = await response.json();
     const games = gameResponse?.games;
     console.log('games', games);
-    throw new Error("@migration task: Migrate this return statement (https://github.com/sveltejs/kit/discussions/5774#discussioncomment-3292699)");
+    // throw new Error("@migration task: Migrate this return statement (https://github.com/sveltejs/kit/discussions/5774#discussioncomment-3292699)");
     return {
-      body: {
-        games: gameResponse?.games
-      }
+      games: gameResponse?.games
     };
   }
 
-  throw new Error("@migration task: Migrate this return statement (https://github.com/sveltejs/kit/discussions/5774#discussioncomment-3292699)");
-  return {
-    status: response.status
-  };
+  // throw new Error("@migration task: Migrate this return statement (https://github.com/sveltejs/kit/discussions/5774#discussioncomment-3292699)");
+  // return {
+  //   status: response.status
+  // };
+  throw error(response.status);
 };

src/routes/api/game/+server.ts

@@ -26,9 +26,8 @@ export const POST: RequestHandler = async ({ request }) => {
 
   const urlQueryParams = new URLSearchParams(newQueryParams);
 
-  const url = `https://api.boardgameatlas.com/api/search${
-    urlQueryParams ? `?${urlQueryParams}` : ''
-  }`;
+  const url = `https://api.boardgameatlas.com/api/search${urlQueryParams ? `?${urlQueryParams}` : ''
+    }`;
   const response = await fetch(url, {
     method: 'get',
     headers: {
@@ -40,8 +39,8 @@ export const POST: RequestHandler = async ({ request }) => {
     // user hasn't created a todo list.
     // start with an empty array
     return json$1({
-  games: []
-});
+      games: []
+    });
   }
 
   if (response.status === 200) {
@@ -51,9 +50,10 @@ export const POST: RequestHandler = async ({ request }) => {
     gameList.forEach((game) => {
       games.push(mapAPIGameToBoredGame(game));
     });
+
     return json$1({
-  games
-});
+      games
+    });
   }
 
   return new Response(undefined, { status: response.status });

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

@@ -18,7 +18,7 @@
 
   $: existsInCollection = $collectionStore.find((item: SavedGameType) => item.id === game.id);
   export let data: PageData;
-  export let game: GameType = data.game;
+  export let game: GameType = data?.game;
   console.log('page game', game);
   let seeMore: boolean = false;
   console.log(game?.description?.indexOf('</p>'));
@@ -90,6 +90,12 @@
       </button>
     {/if}
   </section>
+{:else}
+  <section class="description">
+    <span>
+      {@html game?.description}
+    </span>
+  </section>
 {/if}
 
 <style lang="scss">

src/routes/todos/+page.server.ts

@@ -1,67 +1,55 @@
-import { api } from './_api';
-import type { PageServerLoad, Action } from '@sveltejs/kit';
+import { error } from '@sveltejs/kit';
+import { api } from './api';
+import type { PageServerLoad, Action } from './$types';
+
+type Todo = {
+  uid: string;
+  created_at: Date;
+  text: string;
+  done: boolean;
+  pending_delete: boolean;
+};
 
 export const load: PageServerLoad = async ({ locals }) => {
   // locals.userid comes from src/hooks.js
-  const response = await api('get', `todos/${locals.userid}`);
+  const response = await api('GET', `todos/${locals.userid}`);
 
   if (response.status === 404) {
     // user hasn't created a todo list.
     // start with an empty array
     return {
-  todos: []
-};
+      todos: [] as Todo[]
+    };
   }
 
   if (response.status === 200) {
     return {
-  todos: await response.json()
-};
+      todos: (await response.json()) as Todo[]
+    };
   }
 
-  throw new Error("@migration task: Migrate this return statement (https://github.com/sveltejs/kit/discussions/5774#discussioncomment-3292699)");
-  return {
-    status: response.status
-  };
+  throw error(response.status);
 };
 
 export const POST: Action = async ({ request, locals }) => {
   const form = await request.formData();
 
-  await api('post', `todos/${locals.userid}`, {
+  await api('POST', `todos/${locals.userid}`, {
     text: form.get('text')
   });
-
-  throw new Error("@migration task: Migrate this return statement (https://github.com/sveltejs/kit/discussions/5774#discussioncomment-3292699)");
-  return {};
-};
-
-// If the user has JavaScript disabled, the URL will change to
-// include the method override unless we redirect back to /todos
-const redirect = {
-  status: 303,
-  headers: {
-    location: '/todos'
-  }
 };
 
 export const PATCH: Action = async ({ request, locals }) => {
   const form = await request.formData();
 
-  await api('patch', `todos/${locals.userid}/${form.get('uid')}`, {
+  await api('PATCH', `todos/${locals.userid}/${form.get('uid')}`, {
     text: form.has('text') ? form.get('text') : undefined,
     done: form.has('done') ? !!form.get('done') : undefined
   });
-
-  throw new Error("@migration task: Migrate this return statement (https://github.com/sveltejs/kit/discussions/5774#discussioncomment-3292699)");
-  return redirect;
 };
 
 export const DELETE: Action = async ({ request, locals }) => {
   const form = await request.formData();
 
-  await api('delete', `todos/${locals.userid}/${form.get('uid')}`);
-
-  throw new Error("@migration task: Migrate this return statement (https://github.com/sveltejs/kit/discussions/5774#discussioncomment-3292699)");
-  return redirect;
+  await api('DELETE', `todos/${locals.userid}/${form.get('uid')}`);
 };

src/routes/todos/+page.svelte

@@ -1,27 +1,15 @@
 <script lang="ts">
-  // throw new Error(
-  //   '@migration task: Add data prop (https://github.com/sveltejs/kit/discussions/5774#discussioncomment-3292707)'
-  // );
-
   import { enhance } from '$lib/form';
   import { scale } from 'svelte/transition';
   import { flip } from 'svelte/animate';
+  import type { PageData } from './$types';
 
-  type Todo = {
-    uid: string;
-    created_at: Date;
-    text: string;
-    done: boolean;
-    pending_delete: boolean;
-  };
-
-  // export let data;
-  export let todos: Todo[];
-  console.log('todos', todos);
+  export let data: Pagedata;
 </script>
 
 <svelte:head>
   <title>Todos</title>
+  <meta name="description" content="A todo list app" />
 </svelte:head>
 
 <div class="todos">
@@ -40,7 +28,7 @@
     <input name="text" aria-label="Add todo" placeholder="+ tap to add a todo" />
   </form>
 
-  {#each todos as todo (todo.uid)}
+  {#each data.todos as todo (todo.uid)}
     <div
       class="todo"
       class:done={todo.done}

src/routes/todos/_api.ts

@@ -1,22 +0,0 @@
-/*
-	This module is used by the /todos endpoint to
-	make calls to api.svelte.dev, which stores todos
-	for each user. The leading underscore indicates that this is
-	a private module, _not_ an endpoint — visiting /todos/_api
-	will net you a 404 response.
-
-	(The data on the todo app will expire periodically; no
-	guarantees are made. Don't use it to organize your life.)
-*/
-
-const base = 'https://api.svelte.dev';
-
-export function api(method: string, resource: string, data?: Record<string, unknown>) {
-  return fetch(`${base}/${resource}`, {
-    method,
-    headers: {
-      'content-type': 'application/json'
-    },
-    body: data && JSON.stringify(data)
-  });
-}

src/routes/todos/api.ts

@@ -0,0 +1,20 @@
+/*
+  This module is used by the /todos endpoint to
+  make calls to api.svelte.dev, which stores todos
+  for each user.
+
+  (The data on the todo app will expire periodically; no
+  guarantees are made. Don't use it to organise your life.)
+*/
+
+const base = 'https://api.svelte.dev';
+
+export function api(method: string, resource: string, data?: Record<string, unknown>) {
+  return fetch(`${base}/${resource}`, {
+    method,
+    headers: {
+      'content-type': 'application/json'
+    },
+    body: data && JSON.stringify(data)
+  });
+}