When adding a comments, it is visible on the client

package.json

@@ -14,6 +14,7 @@
     "@xtiannyeto/vue-auth-social": "^0.1.9",
     "axios": "^1.6.7",
     "pinia": "^2.1.7",
+    "uuid": "^10.0.0",
     "vue": "^3.4.15",
     "vue-router": "^4.2.5",
     "vue3-google-login": "^2.0.26",

src/views/contents/ContentCard.vue

@@ -1,6 +1,6 @@
 <template>
 
-  <div class="shadow-md rounded-lg bg-blue-100">
+  <div class="shadow-md rounded-lg bg-gray-50">
 
     <div class="text-lg font-bold">
       {{ props.content.title }}
@@ -45,12 +45,12 @@
 
       <div>
         <h2 class="font-sans font-semibold">Commentaires</h2>
-        <message-list :subject-id="props.content.id">
+        <message-list :subject-id="props.content.id" :messages="messages">
         </message-list>
       </div>
       
       <div class="border-t-2 border-gray-300 mt-4 pt-4">
-        <post-message :subject-id="props.content.id">
+        <post-message :subject-id="props.content.id" @message-posted="addMessage">
         </post-message>
       </div>
       
@@ -62,10 +62,10 @@
 
 <script setup>
 
-import {defineProps, computed} from 'vue';
+import {defineProps, computed, reactive} from 'vue';
+import {time_ago} from "@/internal_time_ago.js";
 import MessageList from "@/views/messages/MessageList.vue";
 import PostMessage from "@/views/messages/PostMessage.vue";
-import {time_ago} from "@/internal_time_ago.js";
 
 const isHttpUrl = computed(() => props.content?.uri?.startsWith('http'))
 
@@ -76,4 +76,13 @@ const props = defineProps({
   }
 });
 
+const messages = reactive([]);
+
+function addMessage(newMessage) {
+  console.table(newMessage, 'test')
+  console.table(messages)
+  messages.unshift(newMessage)
+  console.table(messages)
+}
+
 </script>

src/views/messages/MessageList.vue

@@ -45,13 +45,16 @@ const props = defineProps({
   subjectId: {
     type: String,
     required: true
+  },
+  messages: {
+    default: []
   }
 });
 
 const errorMessage = ref()
 let last_id = null
 const client = useClient();
-const messages = ref([]);
+const messages = ref(props.messages);
 
 onBeforeMount(async () => {
   if (props.subjectId == null) return

src/views/messages/PostMessage.vue

@@ -13,7 +13,7 @@
       </div>
 
       <v-text-field
-          v-model="message"
+          v-model="value"
           density="compact"
           variant="solo-inverted"
           placeholder="Votre commentaire..."
@@ -35,7 +35,9 @@
 <script setup>
 
 import {useClient} from '@/plugins/api.js';
-import {defineProps, ref} from 'vue';
+import {defineEmits, defineProps, ref} from 'vue';
+import {useUserStore} from "@/stores/user.js";
+import {v7} from 'uuid'
 
 const props = defineProps({
   subjectId: {
@@ -44,16 +46,34 @@ const props = defineProps({
   }
 });
 
+const emit = defineEmits(['message-posted']);
+
 const client = useClient();
-const message = ref("");
+const value = ref("");
+const user = useUserStore();
 
 const publish = async () => {
-  await client.post(
-      `/api/messages/`,
-      {
-        "subjectId": props.subjectId,
-        "message": message.value
-      });
+
+  try {
+    const messageId = v7()
+    await client.post(`/api/messages/`,
+        {
+          "id": messageId,
+          "subjectId": props.subjectId,
+          "message": value.value
+        })
+    emit('message-posted',
+        {
+          "id": messageId,
+          "subjectId": props.subjectId,
+          "createdBy": user.getCurrentUser().id,
+          "createdAt": new Date(Date.now()).toISOString(),
+          "value": value.value,
+          parentId: null,
+        })
+  } catch (error) {
+    console.error(`post api/message : ${error}`)
+  }
 }
 
 </script>