proposition frontend

frontend/src/composables/useMessages.ts

@@ -0,0 +1,55 @@
+import { ref, onMounted } from 'vue';
+
+export interface Reply {
+  id: string;
+  content: string;
+  authorIp: string;
+  createdAt: string;
+}
+
+export interface Message extends Reply {
+  parentId: string | null;
+  replies: Reply[];
+}
+
+const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:3000';
+
+export function useMessages() {
+  const messages = ref<Message[]>([]);
+  const loading = ref(false);
+  const sending = ref(false);
+
+  async function fetchMessages(): Promise<void> {
+    loading.value = true;
+    try {
+      const res = await fetch(`${API_URL}/api/messages`);
+      if (res.ok) {
+        // L'API renvoie du plus récent au plus ancien ; on inverse pour affichage chronologique
+        messages.value = ((await res.json()) as Message[]).reverse();
+      }
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  async function postMessage(content: string): Promise<boolean> {
+    if (!content.trim()) return false;
+    sending.value = true;
+    try {
+      const res = await fetch(`${API_URL}/api/messages`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ content: content.trim() }),
+      });
+      if (!res.ok) return false;
+      await fetchMessages();
+      return true;
+    } finally {
+      sending.value = false;
+    }
+  }
+
+  onMounted(fetchMessages);
+
+  return { messages, loading, sending, postMessage };
+}