Add GET and POST endpoints.

Author: Mike Nikles

src/global.d.ts

@@ -1 +1,7 @@
 /// <reference types="@sveltejs/kit" />
+
+type Todo = {
+  created_at: Date;
+  text: string;
+  done: boolean;
+}

src/lib/todo-item.svelte

@@ -1,3 +1,7 @@
+<script lang="ts">
+  export let todo: Todo;
+</script>
+
 <style>
   .todo {
     display: grid;
@@ -85,7 +89,7 @@
   </form>
 
   <form action="" method="" class="text">
-    <input type="text" />
+    <input type="text" value="{todo.text}" />
     <button aria-label="Save todo" class="save"></button>
   </form>
 

src/routes/index.svelte

@@ -1,6 +1,28 @@
-<script>
+<script context="module" lang="ts">
+  import type { Load } from "@sveltejs/kit";
+
+  export const load: Load = async ({ fetch }) => {
+    const res = await fetch("/todos.json");
+
+    if (res.ok) {
+      const todos = await res.json();
+      return {
+        props: { todos }
+      }
+    }
+
+    const { message } = await res.json();
+    return {
+      error: new Error(message)
+    }
+  };
+</script>
+
+<script lang="ts">
   import TodoItem from "$lib/todo-item.svelte";
 
+  export let todos: Todo[];
+
   const title = "Todo";
 </script>
 
@@ -43,11 +65,11 @@
 <div class="todos">
   <h1>{title}</h1>
 
-  <form action="" method="" class="new">
+  <form action="/todos.json" method="post" class="new">
     <input type="text" name="text" aria-label="Add a todo" placeholder="+ type to add a todo" />
   </form>
 
-  <TodoItem />
-  <TodoItem />
-  <TodoItem />
+  {#each todos as todo}
+    <TodoItem {todo} />
+  {/each}
 </div>

src/routes/todos/index.json.ts

@@ -0,0 +1,26 @@
+import type { RequestHandler } from "@sveltejs/kit";
+
+// TODO: Persist in database
+let todos: Todo[] = [];
+
+export const get: RequestHandler = () => {
+  return {
+    status: 200,
+    body: todos
+  }
+}
+
+export const post: RequestHandler<{}, FormData> = (request) => {
+  todos.push({
+    created_at: new Date(),
+    text: request.body.get("text"),
+    done: false
+  });
+
+  return {
+    status: 303,
+    headers: {
+      location: "/"
+    }
+  }
+}