Add PATCH endpoint - mark as done.

Author: Mike Nikles

src/lib/todo-item.svelte

@@ -70,7 +70,6 @@
     opacity: 1;
   }
   
-  /* TODO: Uncomment when the API endpoints are available
   .done {
     transform: none;
     opacity: 0.4;
@@ -79,13 +78,13 @@
   
   .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="/todos/{todo.uid}.json?_method=patch" method="post" class="text">

src/routes/todos/[uid].json.ts

@@ -7,6 +7,7 @@ export const del: RequestHandler = (request) => {
 
 export const patch: RequestHandler<{}, FormData> = (request) => {
   return api(request, {
-    text: request.body.get("text")
+    text: request.body.get("text"),
+    done: request.body.has("done") ? !!request.body.get("done") : undefined
   });
 }

src/routes/todos/_api.ts

@@ -24,7 +24,8 @@ export const api = (request: Request, data?: Record<string, unknown>) => {
     case "PATCH":
       todos = todos.map(todo => {
         if (todo.uid === request.params.uid) {
-          todo.text = data.text as string;
+          if (data.text) todo.text = data.text as string;
+          else todo.done = data.done as boolean;
         }
         return todo;
       });