init

frontend/src/pages/server/channel/index.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import {onMounted, ref} from 'vue';
+import {computed, onMounted, ref} from 'vue';
 import {useRoute} from 'vue-router';
 import {storeToRefs} from 'pinia'; // Import crucial
 import {useMessageStore} from '@/stores/message';
@@ -11,15 +11,15 @@ const messageStore = useMessageStore();
 const {messages, loading} = storeToRefs(messageStore);
 
 const newMessage = ref('');
+const channelId = computed(() => route.params.channelId as string);
 
 const sendMessage = async () => {
   if (!newMessage.value.trim()) return;
 
   const content = newMessage.value;
-  const channelId = route.params.id as string;
 
   try {
-    await messageStore.sendMessage(channelId, content);
+    await messageStore.sendMessage(channelId.value, content);
     newMessage.value = ''; // On vide le champ après succès
   } catch (e) {
     // Gérer l'erreur (ex: notification toast)
@@ -27,9 +27,8 @@ const sendMessage = async () => {
 };
 
 onMounted(() => {
-  const channelId = route.params.id as string;
   if (channelId) {
-    messageStore.fetchMessages(channelId);
+    messageStore.fetchMessages(channelId.value);
   }
 });
 </script>
@@ -48,14 +47,14 @@ onMounted(() => {
         >
           <template v-slot:prepend>
             <v-avatar color="grey-lighten-2" size="40">
-              <v-img v-if="msg.user.avatar" :src="msg.user.avatar"></v-img>
-              <v-icon v-else icon="mdi-account"></v-icon>
+              <!--              <v-img v-if="msg.user.avatar" :src="msg.user.avatar"></v-img>-->
+              <v-icon icon="mdi-account"></v-icon>
             </v-avatar>
           </template>
 
           <v-list-item-title class="d-flex align-center">
-            <span class="font-weight-bold text-subtitle-1 mr-2">{{ msg.user.name }}</span>
-            <span class="text-caption text-grey">{{ msg.timestamp }}</span>
+            <span class="font-weight-bold text-subtitle-1 mr-2">{{ msg.user_id }}</span>
+            <span class="text-caption text-grey">{{ msg.created_at }}</span>
           </v-list-item-title>
 
           <v-list-item-subtitle class="text-body-1 text-high-emphasis opacity-100">

frontend/src/stores/message.ts

@@ -3,9 +3,12 @@ import {useApi} from "@/composables/useApi.ts";
 
 interface Message {
   id: string;
+  channel_id: string;
+  user_id: string;
   content: string;
-  user: { name: string; avatar: string };
-  timestamp: string;
+  created_at: string;
+  updated_at: string | null;
+  reply_to_id: string | null;
 }
 
 export const useMessageStore = defineStore("message", {
@@ -16,10 +19,16 @@ export const useMessageStore = defineStore("message", {
   actions: {
     async fetchMessages(channel_id: string) {
       this.loading = true;
+
+      // Query params
+      let params = new URLSearchParams();
+      params.append("channel_id", channel_id);
+      const queryString = params.toString();
+
       try {
         const api = useApi();
         // Utilisation du paramètre pour cibler le channel
-        const response = await api.get(`/api/messages/${channel_id}`);
+        const response = await api.get(`/messages${queryString ? `?${queryString}` : ""}`);
         this.messages = await response.json();
       } catch (error) {
         console.error("Erreur lors du chargement des messages:", error);
@@ -29,9 +38,14 @@ export const useMessageStore = defineStore("message", {
     },
     async sendMessage(channelId: string, content: string) {
       const api = useApi();
+      console.log("channelId", channelId);
       try {
         // Envoi au serveur pour persistance
-        const response = await api.post(`/api/messages/${channelId}`, {content});
+        const response = await api.post('/messages', {
+          channel_id: channelId,
+          content: content,
+          reply_to_id: null
+        });
         const newMessage = await response.json();
 
         // Ajout local immédiat (optimistic update)