From 1f423f09c8b6a68819e9cca4499e73a9a24be5a7 Mon Sep 17 00:00:00 2001
From: Drew Echerd <drewecherd@gmail.com>
Date: Tue, 15 Feb 2022 16:43:15 +0500
Subject: [PATCH] Add GET and POST endpoints.

---
 src/app.d.ts                   |  7 +++++++
 src/lib/todo-item.svelte       |  6 +++++-
 src/routes/index.svelte        | 32 +++++++++++++++++++++++++++-----
 src/routes/todos/index.json.ts | 29 +++++++++++++++++++++++++++++
 4 files changed, 68 insertions(+), 6 deletions(-)
 create mode 100644 src/routes/todos/index.json.ts

diff --git a/src/app.d.ts b/src/app.d.ts
index 7090ee7..e7dd0d9 100644
--- a/src/app.d.ts
+++ b/src/app.d.ts
@@ -1,5 +1,11 @@
 /// <reference types="@sveltejs/kit" />
 
+type Todo = {
+	create_at: Date;
+	text: string;
+	done: boolean;
+}
+
 // See https://kit.svelte.dev/docs/typescript
 // for information about these interfaces
 declare namespace App {
@@ -11,3 +17,4 @@ declare namespace App {
 
 	interface Stuff {}
 }
+
diff --git a/src/lib/todo-item.svelte b/src/lib/todo-item.svelte
index dfa08a4..2ea460e 100644
--- a/src/lib/todo-item.svelte
+++ b/src/lib/todo-item.svelte
@@ -1,3 +1,7 @@
+<script lang="ts">
+  export let todo: Todo;
+</script>
+
 <div class="todo done">
   <form action="" method="">
     <input type="hidden" name="done" value="" />
@@ -5,7 +9,7 @@
   </form>
 
   <form action="" method="" class="text">
-    <input type="text" />
+    <input type="text" value={todo.text} />
     <button aria-label="Save todo" class="save" />
   </form>
 
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 38f97c9..41e3fd1 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,6 +1,28 @@
-<script>
+<!-- context="module" only get's executed once across all the instances -->
+<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 = "Todos";
 </script>
 
@@ -10,7 +32,7 @@
 <div class="todos">
   <h1>{title}</h1>
 
-  <form action="" method="" class="new">
+  <form action="/todos.json" method="post" class="new">
     <input
       type="text"
       name="text"
@@ -18,9 +40,9 @@
       placeholder="+ type to add a todo"
     />
   </form>
-  <TodoItem />
-  <TodoItem />
-  <TodoItem />
+  {#each todos as todo}
+    <TodoItem {todo} />
+  {/each}
 </div>
 
 <style>
diff --git a/src/routes/todos/index.json.ts b/src/routes/todos/index.json.ts
new file mode 100644
index 0000000..31f1970
--- /dev/null
+++ b/src/routes/todos/index.json.ts
@@ -0,0 +1,29 @@
+import type { RequestHandler } from "@sveltejs/kit";
+
+let todos: Todo[] = [];
+
+// get
+export const get: RequestHandler = async ({ request }) => {
+  return {
+      status: 200,
+      body: todos
+  }
+}
+
+// post
+export const post: RequestHandler = async ({ request }) => {
+  const formData = await request.formData()
+  todos.push({
+      create_at: new Date(),
+      done: false,
+      text: formData.get("text") as string
+  })
+
+  return {
+      status: 303,
+      headers: {
+          location: "/"
+      }
+
+  }
+}
\ No newline at end of file