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>     
+        </v-btn>
-        
+
-        <donation-button creator="creator"></donation-button>
+        <!-- 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;

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-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-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 {

src/views/creators/CreatorBanner.vue

@@ -61,8 +61,8 @@
         <div class="px-6 mt-2">
           <subscribe-button :creator="creator"></subscribe-button>
         </div>
-        
+
-        <donation-button :creator="creator"></donation-button>
+        <donation-button :creator="creator" iconColorClass="text-white"></donation-button>
 
 
         <div class="flex flex-row align-center">

src/views/creators/donation-button.vue

@@ -1,8 +1,9 @@
 <template>
-  <v-btn variant="text" icon  @click="donationModal = true">
+  <v-btn variant="text" icon @click="donationModal = true">
-    <v-icon class="text-2xl">mdi-gift-outline</v-icon>
+    <v-icon :class="['text-2xl', iconColorClass]">mdi-gift-outline</v-icon>
   </v-btn>
 
+
   <v-dialog v-model="donationModal" max-width="500">
     <v-form>
       <v-card class="text-center rounded-xl" :style="{ border: `3px solid ${creator.colors.menu}` }">
@@ -55,7 +56,7 @@
     <template v-slot:default>
       <v-card>
         <div id="checkout">
-          <!-- Checkout will insert the payment form here -->
+         
         </div>
         <v-card-actions>
           <v-spacer></v-spacer>
@@ -83,6 +84,7 @@ const client = useClient();
 
 const props = defineProps({
   creator: {type: Object, required: true},
+  iconColorClass: { type: String, default: 'text-black' }
 });