Awaille joe fait ta magie!

src/views/contents/ContentPage.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="flex h-[calc(100vh-118px)] -mt-2">
-
     <!-- Homemade carousel -->
     <div class="flex-1 flex items-center justify-center bg-neutral-500 max-h-screen relative">
 
@@ -51,16 +50,13 @@
 
         <div class="flex justify-around py-2">
           <v-btn variant="plain" icon @click="likeContent">
-            <v-icon :color="'#313131'">mdi-thumb-up-outline</v-icon> 
+            <v-icon :color="'#313131'">mdi-thumb-up-outline</v-icon>
           </v-btn>
           <v-btn variant="plain" icon @click="dislikeContent">
-            <v-icon :color="'#000000'">mdi-thumb-down-outline</v-icon> 
-          </v-btn>
-          <v-btn variant="plain" icon @click="donate">
-            <v-icon :color="'#7D0863'">mdi-gift-outline</v-icon> 
+            <v-icon :color="'#000000'">mdi-thumb-down-outline</v-icon>
           </v-btn>
+          <donation-button :creator="creator" iconColorClass="text-black"></donation-button>
         </div>
-
       </div>
 
       <div class="border-b-2 p-6">
@@ -68,7 +64,6 @@
         <MessageList :content-id="contentId"></MessageList>
       </div>
 
-
       <div class="border-b-2 p-6">
         <PostMessage :content-id="contentId"></PostMessage>
       </div>
@@ -76,18 +71,17 @@
   </div>
 </template>
 
-
-
-
 <script setup>
 import { ref, computed, onMounted, watch } from 'vue';
 import PostMessage from "@/views/messages/PostMessage.vue";
 import MessageList from "@/views/messages/MessageList.vue";
+import DonationButton from "@/views/creators/donation-button.vue";
 import { useClient } from "@/plugins/api.js";
 import { useRoute } from 'vue-router';
 
 const data = ref();
 const currentImageIndex = ref(0);
+const creator = ref(null);
 
 const route = useRoute();
 const client = useClient();
@@ -96,6 +90,8 @@ const contentId = computed(() => {
   return route.params.contentId;
 });
 
+const creatorAlias = ref(route.params.creator); // Récupération de l'alias du créateur
+
 const currentImage = computed(() => {
   return data.value?.urls[currentImageIndex.value] || '';
 });
@@ -114,6 +110,16 @@ const fetchContentData = async (contentId) => {
   }
 };
 
+
+const fetchCreatorData = async (creatorAlias) => {
+  try {
+    const response = await client.get(`/api/creators/@hutopy`);
+    creator.value = response.data;
+  } catch (error) {
+    console.error(`Error fetching creator data: ${error}`);
+  }
+};
+
 function goBack() {
   window.history.go(-1);
 }
@@ -132,13 +138,17 @@ function previousImage() {
 
 onMounted(() => {
   fetchContentData(contentId.value);
+  fetchCreatorData(creatorAlias.value); // Fetch creator data
 });
 
 watch(contentId, (newContentId) => {
   fetchContentData(newContentId);
 });
-</script>
 
+watch(creatorAlias, (newCreatorAlias) => {
+  fetchCreatorData(newCreatorAlias); // Update creator data if alias changes
+});
+</script>
 
 <style scoped>
 .fixed-width {