Add WIP for content and creators

src/router/index.js

@@ -1,5 +1,4 @@
 import {createRouter, createWebHistory} from 'vue-router'
-import ARPS from '@/views/manualusers/ARPS.vue'
 import GuillaumeAime from '@/views/manualusers/GuillaumeAime.vue'
 import About from '@/views/documentation/About.vue'
 import ContentPolicy from '@/views/documentation/ContentPolicy.vue'
@@ -19,8 +18,8 @@ import ChloeBeaugrand from '../views/manualusers/ChloeProfile.vue'
 import Leffet from '../views/manualusers/LeffetProfile.vue'
 import MathieuCaron from '../views/manualusers/MathieuCaron.vue'
 import CreatorList from '../views/creators/CreatorList.vue'
-import Creator from "@/views/creators/Creator.vue";
+import CreatorPage from "@/views/creators/CreatorPage.vue";
-import Content from "@/views/contents/Content.vue";
+import ContentPage from "@/views/contents/ContentPage.vue";
 import PostContent from "@/views/contents/PostContent.vue";
 
 const routes = [
@@ -35,11 +34,11 @@ const routes = [
     },
     {
         path: '/content/:contentId',
-        component: Content
+        component: ContentPage
     },
     {
         path: '/@:creator',
-        component: Creator
+        component: CreatorPage
     },
     {
         path: '/creators/@:creator',
@@ -66,10 +65,6 @@ const routes = [
         path: '/@mathieucaron',
         component: MathieuCaron
     },
-    {
-        path: '/@arps',
-        component: ARPS
-    },
     
     {
         path: '/helpandcontact',

src/views/contents/ContentCard.vue

@@ -10,7 +10,7 @@
       </v-img>
 
       <iframe v-if="isHttpUrl"
-              :src="props.content.banner"
+              :src="props?.content?.uri"
               title="YouTube video player"
               allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
               referrerpolicy="strict-origin-when-cross-origin"
@@ -19,8 +19,11 @@
 
     </div>
 
+    <router-link :to="'content/' + props?.content?.id">
+    
       <div class="text-lg font-bold">{{ props.content.title }}</div>
-    <div class="text-sm text-gray-500">{{ props.content.title }}</div>
+      <div class="text-sm text-gray-500">{{ props.content.description }}</div>
+    </router-link>
 
   </div>
 
@@ -30,7 +33,7 @@
 
 import {defineProps, computed} from 'vue';
 
-const isHttpUrl = computed(() => props.content.url.startsWith('http'))
+const isHttpUrl = computed(() => props.content?.uri?.startsWith('http'))
 
 const props = defineProps({
   content: {

src/views/contents/ContentList.vue

@@ -27,11 +27,11 @@ const contents = ref();
 
 onBeforeMount(async () => {
   if (props.creatorId == null) return
-  
   try {
     const response = await client.get(`/api/contents/user/${props.creatorId}`)
     if (response.status >= 200 && response.status < 300) {      
       contents.value = response.data
+      console.table(contents.value)
     }
   } catch (error) {
     console.error("Failed to fetch posts", error);

src/views/creators/Creator.vue

@@ -1,52 +0,0 @@
-<template>
-  <div>
-
-    <v-img cover
-           max-height="375"
-           :src="creator?.portrait_url">
-    </v-img>
-
-    <div class="w-full p-6">
-<!--            <ContentList :creator-id="creator?.id">-->
-                  <ContentList creator-id="00000001-0000-0000-0000-000000000001">
-            </ContentList>
-    </div>
-
-  </div>
-</template>
-
-<script setup>
-
-import {onMounted, watch, ref, computed} from 'vue';
-import {useRoute} from 'vue-router';
-import {useClient} from "@/plugins/api.js";
-import ContentList from "@/views/contents/ContentList.vue";
-
-const creator = ref()
-
-const route = useRoute();
-const creatorAlias = computed(() => {
-  return route.params.creator;
-})
-
-console.log(`Opening ${creatorAlias.value} creator page`)
-
-const client = useClient();
-const fetchCreatorData = async (creatorAlias) => {
-  try {
-    const response = await client.get(`/api/creators/@${creatorAlias}`)
-    creator.value = response.data
-  } catch (error) {
-    console.error(`Error fetching content: ${error}`)
-  }
-}
-
-onMounted(() => {
-  fetchCreatorData(creatorAlias.value);
-});
-
-watch(creatorAlias, (newCreatorAlias) => {
-  fetchCreatorData(newCreatorAlias);
-});
-
-</script>   

src/views/creators/CreatorPage.vue

@@ -1,35 +1,55 @@
-<template>
+<template>
+
   <!--  Bannière-->
   <div class="relative bottom-4  z-20 m">
     <div class="relative flex flex-col">
+
       <!-- Social Network-->
-      <div class="bg-black bg-opacity-50 flex flex-col md:flex-row items-center justify-between py-2 px-4 min-h-24">
+      <div class="bg-opacity-50 flex flex-col md:flex-row items-center justify-between py-2 px-4 min-h-24"
+           :style="'background-color: #' + creatorColorTop">
+
         <div class="text-white mb-2 md:mb-0 w-full md:w-auto flex justify-between md:block">
           <div class="text-lg">1000+ Abonnés</div>
           <div class="text-sm">500 Contacts en commun</div>
         </div>
+
         <div class="grid grid-cols-6  md:flex flex-wrap space-x-0 md:space-x-10 gap-6 ">
-          <a href="https://facebook.com" target="_blank"
+
+          <a v-if="creatorFacebook"
+             :href="creatorFacebook"
+             target="_blank"
              class="text-white text-2xl transform transition-transform duration-200 hover:scale-125 hover:text-blue-500">
             <v-icon>mdi-facebook</v-icon>
           </a>
-          <a href="https://twitter.com" target="_blank"
+
+          <a v-if="creatorX"
+             :href="creatorX"
+             target="_blank"
              class="text-white text-2xl transform transition-transform duration-200 hover:scale-125 hover:text-blue-400">
             <v-icon>mdi-twitter</v-icon>
           </a>
-          <a href="https://instagram.com" target="_blank"
+
+          <a v-if="creatorInstagram"
+             :href="creatorInstagram" target="_blank"
              class="text-white text-2xl transform transition-transform duration-200 hover:scale-125 hover:text-pink-500">
             <v-icon>mdi-instagram</v-icon>
           </a>
-          <a href="https://tiktok.com" target="_blank"
+
+          <a v-if="creatorTiktok"
+             :href="creatorTiktok"
+             target="_blank"
              class="transform transition-transform duration-200 hover:scale-110">
             <img src="/images/hutopymedia/icons/white/tiktokwhite.png" alt="TikTok" class="w-9 h-9">
           </a>
-          <a href="https://youtube.com" target="_blank"
+
+          <a v-if="creatorYoutube"
+             :href="creatorYoutube" target="_blank"
              class="text-white text-2xl transform transition-transform duration-200 hover:scale-125 hover:text-red-500">
             <v-icon>mdi-youtube</v-icon>
           </a>
-          <a href="https://yoursite.com" target="_blank"
+
+          <a v-if="creatorWebsite"
+             :href="creatorWebsite" target="_blank"
              class="text-white text-2xl transform transition-transform duration-200 hover:scale-125 hover:text-gray-500">
             <v-icon>mdi-web</v-icon>
           </a>
@@ -42,7 +62,8 @@
     <div class="relative">
       <!--Banner-->
       <div>
-        <img class=" w-full drop-shadow-[0_15px_10px_rgba(0,0,0,0.7)]" :src="imageSrc" alt="Profile Banner">
+        <img class=" w-full drop-shadow-[0_15px_10px_rgba(0,0,0,0.7)] w-[2048px] h-[569px]"
+             :src="creatorBanner" alt="Profile Banner">
       </div>
       <!--User info -->
       <div class="absolute top-1/2 right-10 text-white z-30 transform -translate-y-1/2">
@@ -57,11 +78,12 @@
 
   <!-- Actions Button & image profile -->
   <div class="relative bottom-4 w-full">
-    <div class="bg-gray-800 py-4 relative shadow-lg" style="background-color: #24120E">
+    <div class="py-4 relative shadow-lg"
+         :style="'background-color: #' + creatorColorBottom">
       <div class="flex flex-col sm:flex-row items-center sm:justify-between">
         <img
             class="left-5 rounded-full border-solid border-2 sm:absolute sm:top-1/2 sm:transform sm:-translate-y-1/2 md:left-20 z-20"
-            :src="profilePicture"
+            :src="creatorPortrait"
             alt="Profile Picture"
             style="border-color: rgb(70, 37, 24); max-width: 250px; width: 100%;">
         <div class="flex flex-wrap sm:flex-nowrap items-center mt-4 sm:mt-0 sm:ml-auto space-x-2 sm:space-x-4">
@@ -88,13 +110,54 @@
     </div>
   </div>
 
+  <div class="w-full mt-20">
 
+    <v-tabs
+        v-model="tab"
+        bg-color="primary"
+    >
+      <v-tab value="content">Contenu</v-tab>
+      <v-tab value="community">Communauté</v-tab>
+    </v-tabs>
+
+
+    <v-card-text>
+      <v-tabs-window v-model="tab">
+        <v-tabs-window-item value="content">
+          <div class="w-full h-full p-6">
+            <ContentList v-if="creatorId"
+                         :creator-id="creatorId">
+            </ContentList>
+          </div>
+        </v-tabs-window-item>
+
+        <v-tabs-window-item value="community">
+          <div>
+            <div class="border-b-2 p-6">
+              <PostMessage v-if="creatorId"
+                           :content-id="creatorId">
+              </PostMessage>
+            </div>
+
+            <div class="border-b-2 p-6">
+              <h2 class="font-sans font-semibold">Commentaires</h2>
+              <MessageList v-if="creatorId"
+                           :content-id="creatorId">
+              </MessageList>
+            </div>
+          </div>
+        </v-tabs-window-item>
+
+      </v-tabs-window>
+    </v-card-text>
+
+  </div>
 
   <!--Post-modale-->
   <v-dialog v-model="isDialogActive" max-width="500">
     <template v-slot:default="{ isActive }">
       <v-card class="text-center rounded-xl">
-        <div class="text-white p-4 rounded-t" style="background-color: #110E0F">
+        <div class="text-white p-4 rounded-t" :style="'background-color: #' + creatorColorMenu">
           <h2>Publication</h2>
         </div>
         <v-card-text class="bg">
@@ -124,22 +187,102 @@
     </template>
   </v-dialog>
 
- 
-  
-  
 </template>
 
 
-
 <script setup>
-import {ref} from 'vue';
 
-let imageSrc = '/images/usersmedia/ARPS/banners/bannerARPS01.png';
+import {onMounted, watch, ref, computed} from 'vue';
-let profilePicture = '/images/usersmedia/ARPS/profilepictures/profileARPS.png';
+import {useRoute} from 'vue-router';
-let isDialogActive = ref(false);
+import {useClient} from "@/plugins/api.js";
-let message = ref('');
+import ContentList from "@/views/contents/ContentList.vue";
-let files = ref([]);
+import PostMessage from "@/views/messages/PostMessage.vue";
-let isArticle = ref(false);
+import MessageList from "@/views/messages/MessageList.vue";
+
+const tab = ref()
+
+// FETCH CREATOR NAME
+const route = useRoute();
+const creatorAlias = computed(() => {
+  return route.params.creator;
+})
+
+// CREATOR METADATA
+const creator = ref()
+const creatorId = computed(() => {
+  return creator?.value?.id
+})
+const creatorFacebook = computed(() => {
+  return creator?.value?.socialNetworks?.facebookUrl
+})
+const creatorX = computed(() => {
+  return creator?.value?.socialNetworks?.xUrl
+})
+const creatorWebsite = computed(() => {
+  return creator?.value?.socialNetworks?.yourWebsiteUrl
+})
+const creatorTiktok = computed(() => {
+  return creator?.value?.socialNetworks?.tikTokUrl
+})
+const creatorYoutube = computed(() => {
+  return creator?.value?.socialNetworks?.youtubeUrl
+})
+const creatorInstagram = computed(() => {
+  return creator?.value?.socialNetworks?.instagramUrl
+})
+const creatorLinkedIn = computed(() => {
+  return creator?.value?.socialNetworks?.linkedInUrl
+})
+const creatorReddit = computed(() => {
+  return creator?.value?.socialNetworks?.redditUrl
+})
+const creatorPortrait = computed(() => {
+  return creator?.value?.storedDataUrls?.profilePictureUrl
+})
+const creatorBanner = computed(() => {
+  return creator?.value?.storedDataUrls?.bannerPictureUrl
+})
+
+const creatorColorTop = computed(() => {
+  return creator?.value?.profileColors?.bannerTop
+})
+const creatorColorBottom = computed(() => {
+  return creator?.value?.profileColors?.bannerBottom
+})
+const creatorColorAccent = computed(() => {
+  return creator?.value?.profileColors?.accent
+})
+const creatorColorMenu = computed(() => {
+  return creator?.value?.profileColors?.menu
+})
+
+const client = useClient()
+
+const fetchCreatorData = async (creatorAlias) => {
+  try {
+    const response = await client.get(`/api/creators/@${creatorAlias}`)
+    creator.value = response.data
+    console.log('loaded the following creator from api')
+    console.table(creator.value.id)
+  } catch (error) {
+    console.error(`Error fetching content: ${error}`)
+  }
+}
+
+onMounted(() => {
+  fetchCreatorData(creatorAlias.value);
+});
+
+watch(creatorAlias, (newCreatorAlias) => {
+  fetchCreatorData(newCreatorAlias);
+});
+
+// POST CONTENT / POPUP DIALOG
+
+const isDialogActive = ref(false);
+const message = ref('');
+const files = ref([]);
+const isArticle = ref(false);
 
 const publishPost = () => {
   // Logic to publish post
@@ -161,9 +304,11 @@ const resetPostForm = () => {
 const togglePostType = (article) => {
   isArticle.value = article;
 };
+
 </script>
 
 <style scoped>
+
 .shadow-lg {
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);
 }
@@ -172,4 +317,5 @@ const togglePostType = (article) => {
   background-color: #1976D2;
   color: white;
 }
+
 </style>

src/views/messages/MessageList.vue

@@ -25,11 +25,15 @@ const client = useClient();
 const messages = ref();
 
 onBeforeMount(async () => {
+  if (props.contentId == null) return
+
   try {
     const response = await client.get(`/api/messages/${props.contentId}`)
+    if (response.status >= 200 && response.status < 300) {
       messages.value = response.data
+    }
   } catch (error) {
-    console.error("Failed to fetch posts", error);
+    console.error("Failed to fetch messages", error);
   }
 })