src/lib/components/editor.svelte

@@ -1,30 +1,52 @@
 <script lang="ts">
     import { CalendarDate } from "@internationalized/date";
     import { onMount } from "svelte";
-    
+    import { formatDate } from "$lib/date";
+    import { createEntry, updateEntry, deleteEntry } from "$lib/upload.ts";
+
     let {
-      dateValue = $bindable<CalendarDate | undefined>(
-                  new CalendarDate(2026, 2, 1),
-              ),
-    } = $props()
-    
-    let edit = $state(false)
-    
+        dateValue = $bindable<CalendarDate | undefined>(
+            new CalendarDate(2026, 2, 1),
+        ),
+    } = $props();
+
+    let edit = $state<boolean>(false);
+
     let entry = $state({
-      date: dateValue.toString(),
-      image: "",
-      content: ""
-    })
-    
+        date: dateValue.toString(),
+        image: "",
+        content: "",
+    });
+
     onMount(async () => {
-      const res = await fetch(`/api/entry?date=${dateValue.toString()}`)
-      const data = await res.json()
-      entry = data
-    })
+        const res = await fetch(`/api/entry?date=${dateValue.toString()}`);
+        const data = await res.json();
+        if (data) {
+            entry = { date: dateValue.toString(), ...data[0] };
+        }
+    });
 </script>
 
-{JSON.stringify(entry)}
+<div class="flex flex-row items-center justify-between">
+    <h1 class="text-3xl">{formatDate(entry.date)}</h1>
 
-<!-- <div class="flex flex-row items-center justify-between"> -->
-    <h1 class="text-3xl">{entry["date"]}</h1>
-<!-- </div> -->
+    {#if !edit}
+        <button
+            class="btn bg-secondary py-2 px-3 rounded-lg hover:opacity-60 transition-brightness"
+            onclick={() => (edit = !edit)}>Edit</button
+        >
+    {:else}
+        <button class="bg-destructive py-2 px-3 rounded-lg" onclick={deleteEntry}>
+            delete
+        </button>
+        <button
+            class="bg-secondary py-2 px-3 rounded-lg"
+            onclick={() => (edit = false)}
+        >
+            cancel
+        </button>
+        <button class="bg-primary text-accent py-2 px-3 rounded-lg">
+            save
+        </button>
+    {/if}
+</div>

src/lib/upload.ts

@@ -55,3 +55,19 @@ export async function updateEntry(entry) {
     body: JSON.stringify(entry),
   });
 }
+
+export async function deleteEntry(entry) {
+  const res = await fetch(`/api/entry/delete`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify({ id: entry.id })
+  });
+  
+  if (res.ok) {
+    entry = null;
+  } else {
+    alert('Failed to delete entry');
+  }
+}