Adds reactivity to content-list

src/views/contents/ContentCard.vue

@@ -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)
@@ -168,7 +169,7 @@ 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)
+    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 contents = ref(props.contents)
-const page_size = 10
 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);
@@ -119,13 +123,12 @@ const closeDialog = () => {
                         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>
       </v-card>
     </v-form>

src/views/creators/CreatorBanner.vue

@@ -77,9 +77,17 @@
         </div>
         <!-- Buttons -->
         <div class="flex flex-wrap items-center  mt-2 sm:mt-8 md:mt-4 lg:mt-0 lg:ml-auto space-x-2 sm:space-x-4">
-          <publish-content-button :creator="creator"></publish-content-button>
+
-          <div class="text-white text-2xl">{{ creator.about.title }}</div>
+          <publish-content-button :creator="creator"
-          <creator-about :creator="creator"></creator-about>
+                                  @content-posted="addContent"
+          ></publish-content-button>
+
+          <div class="text-white text-2xl">
+            {{ creator.about.title }}
+          </div>
+          
+          <creator-about :creator="creator"
+          ></creator-about>
         </div>
       </div>
     </div>
@@ -96,6 +104,12 @@ const props = defineProps({
   creator: {type: Object, required: true},
 });
 
+const emits = defineEmits(['content-posted'])
+
+function addContent(content) {
+  emits('content-posted', content)
+}
+
 function GetSocialsUrls() {
 
   const socials = [];

src/views/creators/CreatorPage.vue

@@ -1,12 +1,15 @@
 <template>
   <div v-if="creator && creator.id">
 
-    <creator-banner :creator="creator"></creator-banner>
+    <creator-banner :creator="creator"
+                    @content-posted="contentPosted"
+    ></creator-banner>
 
     <div class="max-w-[800px] mx-auto flex flex-row justify-center ">
       <div class="w-full h-full mx-1">
-        <content-list :creator-id="creator.id">
+        <content-list :creator-id="creator.id"
-        </content-list>
+                      :contents="contents"
+        ></content-list>
       </div>
     </div>
   </div>
@@ -34,11 +37,16 @@ import {useClient} from "@/plugins/api.js";
 import CreatorBanner from "@/views/creators/CreatorBanner.vue";
 import ContentList from "@/views/contents/ContentList.vue";
 
-const client = useClient();
+const creator = ref(null)
-const route = useRoute();
+const loading = ref(true)
+const contents = ref([])
 
-const creator = ref(null);
+const client = useClient()
-const loading = ref(true);
+const route = useRoute()
+
+function contentPosted(content) {
+  contents.value.unshift(content)
+}
 
 onBeforeMount(async () => await fetchCreatorData(route.params.creator))
 

src/views/messages/MessageList.vue

@@ -1,12 +1,14 @@
 <template>
   <v-infinite-scroll
       :items="messages"
-      :onLoad="load"
+      :onLoad="fetchMessages"
       mode="manual"
       class="justify-items-center"
   >
-    <template v-for="(message, index) in messages" :key="index">
+    <template v-for="message in messages" :key="message">
-      <message :message="message" class="border-b"></message>
+      <message :message="message"
+               class="border-b"
+      ></message>
     </template>
 
     <template v-slot:load-more="{ props }">
@@ -48,14 +50,15 @@ const messages = ref(props.messages);
 
 onBeforeMount(async () => {
   if (props.subjectId == null) return;
-  await load({
+  await fetchMessages({
     page_size: 2,
-    done: function (status) {},
+    done: function (status) {
+    },
   });
 });
 
-async function load({ done, page_size = 10 }) {
+async function fetchMessages({done, page_size = 10}) {
-  if (props.subjectId == null) return;
+  if (props.subjectId == null) return
 
   try {
     let uri = `/api/messages/${props.subjectId}?page_size=${page_size}`;

src/views/messages/PostMessage.vue

@@ -52,13 +52,12 @@
 </template>
 
 <script setup>
-import {ref} from 'vue';
+import {ref} from 'vue'
-import {v7} from 'uuid';
+import {v7} from 'uuid'
-import {useRouter} from "vue-router";
+import {useClient} from '@/plugins/api.js'
-import {useClient} from '@/plugins/api.js';
+import {useUserStore} from "@/stores/userStore.js"
-import {useUserStore} from "@/stores/userStore.js";
+import {useAuthStore} from "@/stores/authStore.js"
-import {useAuthStore} from "@/stores/authStore.js";
+import LoginForm from "@/views/main/LoginForm.vue"
-import LoginForm from "@/views/main/LoginForm.vue";
 
 const closeModal = () => {
   loginModal.value = false;
@@ -71,12 +70,11 @@ const props = defineProps({
   }
 });
 
-const emit = defineEmits(['message-posted'])
+const emits = defineEmits(['message-posted'])
 
 const loginModal = ref(false);
 const client = useClient()
 const value = ref("")
-const router = useRouter()
 const userStore = useUserStore()
 const authStore = useAuthStore()
 
@@ -91,7 +89,7 @@ const publish = async () => {
         "subjectId": props.subjectId,
         "message": value.value
       })
-      emit('message-posted', {
+      emits('message-posted', {
         "id": messageId,
         "subjectId": props.subjectId,
         "createdBy": userStore.user.id,