Adds reactivity to content-list

src/views/contents/ContentCard.vue

@@ -85,7 +85,7 @@
                          :creator-logo="creatorLogo"
                          iconColorClass="text-black"
         ></donation-button>
-        
+
       </div>
 
       <div :class="{'hidden': !messagesVisible}">
@@ -94,11 +94,12 @@
             :subject-id="props.content.id"
             :messages="messages"
         ></message-list>
-
       </div>
 
       <div class="py-2">
-        <post-message :subject-id="props.content.id" @message-posted="addMessage"></post-message>
+        <post-message :subject-id="props.content.id"
+                      @message-posted="addMessage"
+        ></post-message>
       </div>
     </div>
   </div>
@@ -121,7 +122,7 @@ const props = defineProps({
   }
 });
 
-const emits = defineEmits(['content:deleted'])
+const emits = defineEmits(['content-deleted'])
 
 const contentId = computed(() => props.content.id)
 const creatorId = computed(() => props.content.createdBy)
@@ -167,8 +168,8 @@ function editContent() {
 async function deleteContent() {
   const client = useClient()
   const response = await client.delete(`/api/contents/${contentId.value}`)
-  if (response.status >= 200 && response.status < 300){
-    emits('content:deleted', contentId.value)
+  if (response.status >= 200 && response.status < 300) {
+    emits('content-deleted', contentId.value)
   }
 }
 

src/views/contents/ContentList.vue

@@ -6,7 +6,7 @@
     <template v-for="content in contents" :key="content">
       <content-card :content="content"
                     class="my-1"
-                    @content:deleted="onContentDeleted"
+                    @content-deleted="onContentDeleted"
       ></content-card>
     </template>
 
@@ -32,12 +32,15 @@ const props = defineProps({
   creatorId: {
     type: String,
     required: true
-  }
+  },
+  contents: {
+    type: Array,
+    default: () => [],
+  },
 });
 
 const client = useClient()
-const contents = ref([])
-const page_size = 10
+const contents = ref(props.contents)
 const errorMessage = ref()
 let last_id = null
 
@@ -60,7 +63,9 @@ const creatorIdWatcher = watch(
       }
     })
 
-async function fetchContents({done}) {
+async function fetchContents({done, page_size = 10}) {
+  if (props.creatorId == null) return
+  
   try {
     let uri = `/api/contents/creator/${props.creatorId}?page_size=${page_size}`
     if (last_id !== null) uri = uri + `&last_id=${last_id}`
@@ -84,7 +89,7 @@ async function fetchContents({done}) {
     }
   } catch (error) {
     console.error("Failed to fetch posts", error);
-    errorMessage.value = error
+    errorMessage.value = error.message || "Failed to fetch contents";
     done('error')
   }
 }

src/views/contents/PublishContentButton.vue

@@ -8,6 +8,8 @@ const props = defineProps({
   creator: {type: Object, required: true},
 });
 
+const emits = defineEmits(['content-posted'])
+
 const userStore = useUserStore();
 
 const isDialogActive = ref(false);
@@ -28,15 +30,17 @@ async function publishPost() {
   });
 
   try {
-    await client.post(
+    const content = await client.post(
         `/api/contents/`,
         formData,
         {
           headers: {
             'Content-Type': 'multipart/form-data',
           }
-        }
-    );
+        })
+
+    emits('content-posted', content.data)
+    
     closeDialog();
   } catch (error) {
     console.error(error);
@@ -69,7 +73,7 @@ const closeDialog = () => {
               :style="{ 
                 border: `3px solid ${creator.colors.menu}` 
               }">
-        
+
         <div class="py-4 text-2xl font-bold  border-b mb-2">
           Quicky
         </div>
@@ -116,14 +120,13 @@ const closeDialog = () => {
                         multiple
                         dropzone
                         prepend-icon=""
-                        placeholder="Glissez et déposez des fichiers ici ou cliquez pour sélectionner des fichiers"                        
-          ></v-file-input>      
+                        placeholder="Glissez et déposez des fichiers ici ou cliquez pour sélectionner des fichiers"
+          ></v-file-input>
 
-          <v-btn variant="outlined" :style="{ borderColor: creator.colors.menu, color: creator.colors.menu }" @click="publishPost" class="w-full">
+          <v-btn variant="outlined" :style="{ borderColor: creator.colors.menu, color: creator.colors.menu }"
+                 @click="publishPost" class="w-full">
             Publier
           </v-btn>
-          
-          
 
 
         </v-card-text>