Init

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

@@ -1,35 +1,37 @@
 <script lang="ts" setup>
-import {ref} from 'vue'
+import {onMounted, ref} from 'vue';
+import {useRoute} from 'vue-router';
+import {storeToRefs} from 'pinia'; // Import crucial
+import {useMessageStore} from '@/stores/message';
 
-// Exemple de données (à remplacer par vos données Pinia/API)
-const messages = ref([
-  {
-    id: 1,
-    user: {name: 'Utilisateur 1', avatar: 'https://cdn.vuetifyjs.com/images/lists/1.jpg'},
-    content: 'Salut ! Comment ça va ?',
-    timestamp: 'Aujourd\'hui à 12:00'
-  },
-  {
-    id: 2,
-    user: {name: 'Utilisateur 2', avatar: 'https://cdn.vuetifyjs.com/images/lists/2.jpg'},
-    content: 'Je vais très bien, merci ! Et toi ?',
-    timestamp: 'Aujourd\'hui à 12:01'
+const route = useRoute();
+const messageStore = useMessageStore();
+
+// "messages" ici est une référence réactive liée au store
+const {messages, loading} = storeToRefs(messageStore);
+
+const newMessage = ref('');
+
+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);
+    newMessage.value = ''; // On vide le champ après succès
+  } catch (e) {
+    // Gérer l'erreur (ex: notification toast)
   }
-])
+};
 
-const newMessage = ref('')
-
-const sendMessage = () => {
-  if (!newMessage.value.trim()) return
-  // Logique d'envoi ici
-  messages.value.push({
-    id: Date.now(),
-    user: {name: 'Moi', avatar: ''},
-    content: newMessage.value,
-    timestamp: 'À l\'instant'
-  })
-  newMessage.value = ''
-}
+onMounted(() => {
+  const channelId = route.params.id as string;
+  if (channelId) {
+    messageStore.fetchMessages(channelId);
+  }
+});
 </script>
 
 <template>