Adds reactivity to content-list

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')
   }
 }