Add DELETE endpoint.

Author: Mike Nikles

src/global.d.ts

@@ -1,6 +1,7 @@
 /// <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

@@ -93,7 +93,7 @@
     <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/todos/[uid].json.ts

@@ -0,0 +1,6 @@
+import type { RequestHandler } from "@sveltejs/kit";
+import { api } from "./_api";
+
+export const del: RequestHandler = (request) => {
+  return api(request);
+}

src/routes/todos/_api.ts

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

src/routes/todos/index.json.ts

@@ -1,26 +1,15 @@
 import type { RequestHandler } from "@sveltejs/kit";
+import { api } from "./_api";
 
-// TODO: Persist in database
-let todos: Todo[] = [];
-
-export const get: RequestHandler = () => {
-  return {
-    status: 200,
-    body: todos
-  }
+export const get: RequestHandler = (request) => {
+  return api(request);
 }
 
 export const post: RequestHandler<{}, FormData> = (request) => {
-  todos.push({
+  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
   });
-
-  return {
-    status: 303,
-    headers: {
-      location: "/"
-    }
-  }
 }