Awaille joe fait ta magie!

src/views/contents/ContentCard.vue

@@ -76,16 +76,17 @@
             icon
             @click="toggleComments">
           <v-icon>mdi-comment-outline</v-icon>
-        </v-btn>     
-        
-        <donation-button creator="creator"></donation-button>
+        </v-btn>
+
+        <!-- Utilisation de l'objet creator ici -->
+        <donation-button :creator="creator" iconColorClass="text-black"></donation-button>
       </div>
 
       <div :class="{'hidden': !commentsVisible}">
         <h2 class="font-sans font-semibold mt-2">Commentaires</h2>
         <message-list :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>
       </div>
@@ -94,7 +95,9 @@
 </template>
 
 <script setup>
-import { computed, ref } from 'vue';
+import { computed, ref, onBeforeMount } from 'vue';
+import { useRoute } from 'vue-router';
+import { useClient } from "@/plugins/api.js";
 import { time_ago } from "@/internal_time_ago.js";
 import MessageList from "@/views/messages/MessageList.vue";
 import PostMessage from "@/views/messages/PostMessage.vue";
@@ -109,6 +112,12 @@ const props = defineProps({
   }
 });
 
+const route = useRoute();
+const client = useClient();
+const creatorAlias = ref(route.params.creator);
+const creator = ref(null);
+const loading = ref(true);
+
 const hasUrls = computed(() => !!props.content.urls && props.content.urls.length > 0);
 const commentsVisible = ref(false);
 const messages = ref([]);
@@ -116,6 +125,20 @@ const messages = ref([]);
 // Propriété calculée pour vérifier s'il y a des commentaires
 const hasComments = computed(() => messages.value.length > 0);
 
+onBeforeMount(async () => await fetchCreatorData(creatorAlias.value))
+
+async function fetchCreatorData(creatorAlias) {
+  try {
+    loading.value = true;
+    const response = await client.get(`/api/creators/@${creatorAlias}`);
+    creator.value = response.data;
+  } catch (error) {
+    console.error(`Error fetching creator data: ${error}`);
+  } finally {
+    loading.value = false;
+  }
+}
+
 function addMessage(newMessage) {
   messages.value.unshift(newMessage);
   commentsVisible.value = true;
@@ -133,10 +156,6 @@ function dislikeContent() {
   console.log('Content disliked');
 }
 
-function donate() {
-  console.log('Content disliked');
-}
-
 function getComponent(url) {
   if (url.includes('youtube.com') || url.includes('youtu.be')) {
     return YoutubePlayer;