Merge pull request #10 from gitpod-io/mikenikles/develop-crud-endpoints-9

Develop CRUD endpoints

Author: mikenikles

src/global.d.ts

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

src/hooks.ts

@@ -0,0 +1,10 @@
+import type { Handle } from "@sveltejs/kit";
+
+export const handle: Handle = async ({ request, resolve }) => {
+  if (request.query.has("_method")) {
+    request.method = request.query.get("_method").toUpperCase();
+  }
+
+  const response = await resolve(request);
+  return response;
+};

src/lib/todo-item.svelte

@@ -1,3 +1,7 @@
+<script lang="ts">
+  export let todo: Todo;
+</script>
+
 <style>
   .todo {
     display: grid;
@@ -66,7 +70,6 @@
     opacity: 1;
   }
   
-  /* TODO: Uncomment when the API endpoints are available
   .done {
     transform: none;
     opacity: 0.4;
@@ -75,21 +78,21 @@
   
   .done .toggle {
     background-image: url("data:image/svg+xml,%3Csvg width='22' height='16' viewBox='0 0 22 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5 1.5L7.4375 14.5L1.5 8.5909' stroke='%23676778' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-  } */
+  }
 </style>
 
-<div class="todo">
-  <form action="" method="">
-    <input type="hidden" name="done" value="" />
-    <button aria-label="Mark done/not done" class="toggle"></button>
+<div class="todo" class:done={todo.done}>
+  <form action="/todos/{todo.uid}.json?_method=patch" method="post">
+    <input type="hidden" name="done" value="{todo.done ? '' : 'true'}" />
+    <button aria-label="Mark todo as {todo.done ? 'not done' : 'done'}" class="toggle"></button>
   </form>
 
-  <form action="" method="" class="text">
-    <input type="text" />
+  <form action="/todos/{todo.uid}.json?_method=patch" method="post" class="text">
+    <input type="text" name="text" value="{todo.text}" />
     <button aria-label="Save todo" class="save"></button>
   </form>
 
-  <form action="" method="">
+  <form action="/todos/{todo.uid}.json?_method=delete" method="post">
     <button aria-label="Delete todo" class="delete"></button>
   </form>
 </div>

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/[uid].json.ts

@@ -0,0 +1,13 @@
+import type { RequestHandler } from "@sveltejs/kit";
+import { api } from "./_api";
+
+export const del: RequestHandler = (request) => {
+  return api(request);
+}
+
+export const patch: RequestHandler<{}, FormData> = (request) => {
+  return api(request, {
+    text: request.body.get("text"),
+    done: request.body.has("done") ? !!request.body.get("done") : undefined
+  });
+}

src/routes/todos/_api.ts

@@ -0,0 +1,52 @@
+import type { Request } from "@sveltejs/kit";
+
+// TODO: Persist in database
+let todos: Todo[] = [];
+
+export const api = (request: Request, data?: Record<string, unknown>) => {
+  let body = {};
+  let status = 500;
+
+  switch (request.method.toUpperCase()) {
+    case "GET":
+      body = todos;
+      status = 200;
+      break;
+    case "POST":
+      todos.push(data as Todo);
+      body = data;
+      status = 201;
+      break;
+    case "DELETE":
+      todos = todos.filter(todo => todo.uid !== request.params.uid)
+      status = 200;
+      break;
+    case "PATCH":
+      todos = todos.map(todo => {
+        if (todo.uid === request.params.uid) {
+          if (data.text) todo.text = data.text as string;
+          else todo.done = data.done as boolean;
+        }
+        return todo;
+      });
+      status = 200;
+      break;
+  
+    default:
+      break;
+  }
+
+  if (request.method.toUpperCase() !== "GET") {
+    return {
+      status: 303,
+      headers: {
+        location: "/"
+      }
+    };
+  }
+
+  return {
+    status,
+    body
+  }
+}

src/routes/todos/index.json.ts

@@ -0,0 +1,15 @@
+import type { RequestHandler } from "@sveltejs/kit";
+import { api } from "./_api";
+
+export const get: RequestHandler = (request) => {
+  return api(request);
+}
+
+export const post: RequestHandler<{}, FormData> = (request) => {
+  return api(request, {
+    uid: `${Date.now()}`, // TODO: Replace with the UID from the datbase
+    created_at: new Date(),
+    text: request.body.get("text"),
+    done: false
+  });
+}