feat(messages): add update and delete functionality for messages

app/components/MessagesPanel.vue

@@ -1,34 +1,62 @@
 <script setup lang="ts">
-const { data: messages, refresh } = await useFetch('/api/messages')
-const newMessage = ref('')
+const { data: messages, refresh } = await useFetch("/api/messages");
+const newMessage = ref("");
+// const updateMessage = ref('')
 
-async function sendMessage (){
-  if (!newMessage.value.trim()) return
-  await $fetch('/api/messages', {
-    method: 'POST',
+async function sendMessage() {
+  if (!newMessage.value.trim()) return;
+  await $fetch("/api/messages", {
+    method: "POST",
     body: {
-      text: newMessage.value
-    }
-  })
-  newMessage.value = ''
-  await refresh()
+      text: newMessage.value,
+    },
+  });
+  newMessage.value = "";
+  await refresh();
+}
+
+async function deleteMessage(messageID: number | undefined) {
+  await $fetch("/api/messages", {
+    method: "DELETE",
+    body: {
+      messageID,
+    },
+  });
+  await refresh();
+}
+
+async function updateMessage(
+  messageID: number | undefined,
+  text: string | undefined
+) {
+  await $fetch("/api/messages", {
+    method: "PUT",
+    body: {
+      messageID,
+      text,
+    },
+  });
+  await refresh();
 }
 </script>
 
 <template>
   <div>
     <h3>Messages</h3>
+
     <form @submit.prevent="sendMessage">
-      <input v-model="newMessage" placeholder="Type a message">
-      <button type="submit">
-        Send
-      </button>
+      <input v-model="newMessage" placeholder="Type a message" />
+      <button type="submit">Send</button>
     </form>
+
     <p v-for="message of messages" :key="message.id">
-      {{ message.text }} - {{ new Date(message.created_at).toLocaleString('fr-FR') }}
-    </p>
-    <p v-if="!messages?.length">
-      No messages yet
+      <input type="text" v-model="message.text" />
+      <button @click="updateMessage(message.id, message.text)">update</button><button>
+        <i @click="deleteMessage(message.id)">delete</i>
+      </button>
+      -
+      {{ new Date(message.created_at || 0).toLocaleString("en") }}
     </p>
+    <p v-if="!messages?.length">No messages yet</p>
   </div>
 </template>

nuxt.config.ts

@@ -23,5 +23,11 @@ export default defineNuxtConfig({
     }
   },
   // Development
-  devtools: { enabled: true },
-})
+  devtools: {
+    enabled: true,
+
+    timeline: {
+      enabled: true,
+    },
+  },
+})

server/api/messages/index.delete.ts

@@ -0,0 +1,11 @@
+export default eventHandler(async (event) => {
+  const { messageID } = await readBody(event)
+  const db = hubDatabase()
+
+  await db
+    .prepare('DELETE FROM messages WHERE id = ?1')
+    .bind(messageID)
+    .run()
+
+  return {}
+})

server/api/messages/index.put.ts

@@ -0,0 +1,11 @@
+export default eventHandler(async (event) => {
+  const { messageID, text }: { messageID: number, text: string } = await readBody(event)
+  const db = hubDatabase()
+
+  await db
+    .prepare('UPDATE messages SET text = ?1 WHERE id = ?2')
+    .bind(text, messageID)
+    .run()
+
+  return {}
+})