Adds reactivity to content-list

src/views/creators/CreatorBanner.vue

@@ -38,7 +38,7 @@
       <div class="flex flex-col items-center lg:flex-row lg:items-center lg:justify-between">
         <!-- Profile Image Wrapper -->
         <div class="relative flex justify-center lg:w-auto lg:justify-start">
-          
+
           <!-- Profile Image -->
           <div class="absolute lg:ml-72 transform -translate-y-1/2 lg:-translate-y-1/2 z-20">
             <img
@@ -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>
-          <creator-about :creator="creator"></creator-about>
+
+          <publish-content-button :creator="creator"
+                                  @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>
+        <content-list :creator-id="creator.id"
+                      :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 route = useRoute();
+const creator = ref(null)
+const loading = ref(true)
+const contents = ref([])
 
-const creator = ref(null);
-const loading = ref(true);
+const client = useClient()
+const route = useRoute()
+
+function contentPosted(content) {
+  contents.value.unshift(content)
+}
 
 onBeforeMount(async () => await fetchCreatorData(route.params.creator))