Develop CRUD endpoints

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 {}
 }
+

src/lib/todo-item.svelte

@@ -1,11 +1,15 @@
+<script lang="ts">
+  export let todo: Todo;
+</script>
+
 <div class="todo done">
   <form action="" method="">
     <input type="hidden" name="done" value="" />
     <button aria-label="Mark done/not done" class="toggle" />
   </form>
 
   <form action="" method="" class="text">
-    <input type="text" />
+    <input type="text" value={todo.text} />
     <button aria-label="Save todo" class="save" />
   </form>
 

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,17 +32,17 @@
 <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>
 
 <style>

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: "/"
+      }
+
+  }
+}