From 2c7248d60047b87c0654a7d2d0cb2c3236caa940 Mon Sep 17 00:00:00 2001
From: Dominic Villemure <doumvil@hotmail.com>
Date: Thu, 29 Aug 2024 19:37:26 -0400
Subject: [PATCH] Explorer start

---
 src/views/explorer/ExplorerCard.vue |  25 ++--
 src/views/explorer/explorer.vue     | 188 ++++++++++++++++++----------
 src/views/profile/ForYouPage.vue    |   2 +-
 3 files changed, 133 insertions(+), 82 deletions(-)

diff --git a/src/views/explorer/ExplorerCard.vue b/src/views/explorer/ExplorerCard.vue
index 1c13cca..db45fee 100644
--- a/src/views/explorer/ExplorerCard.vue
+++ b/src/views/explorer/ExplorerCard.vue
@@ -1,21 +1,20 @@
 <template>
   <div class="bg-white shadow-lg rounded-lg overflow-hidden transition-all duration-300 ease-in-out py4">
     <div class="flex justify-between items-center mb-2">
-      <h3 class="text-lg font-bold p-3">{{ video.title }}</h3>
-      <v-btn icon class="ml-2" variant="plain">
-        <v-icon>mdi-dots-vertical</v-icon>
-      </v-btn>
+      <h3 class="text-lg font-bold p-3">{{ content.title }}</h3>
     </div>
-    <img :src="video.thumbnail" alt="video thumbnail" class="w-full ">
+    <img v-if="content.urls !== null" :src="content.urls" alt="thumbnail" class="w-full ">
     <div class="p-3">
-      <p class="text-gray-600 mb-4">{{ video.description }}</p>
+      <p class="text-gray-600 mb-4">{{ content.description }}</p>
       <div class="flex items-center">
-        <img :src="video.profileImage" alt="profile image" class="w-10 h-10 rounded-full">
+        <router-link class="capitalize px-2" :to="`/@${props.content.createdByName}`">
+          <img :src="content.createdByPortraitUrl" alt="profile image" class="w-10 h-10 rounded-full">
+        </router-link>
         <div class="ml-4">
-          <h4 class="text-md font-bold">{{ video.name }}</h4>
+          <h4 class="text-md font-bold">{{ content.name }}</h4>
           <div class="text-gray-600 text-sm">
-            <span>{{ video.vues }} vues</span> -
-            <span>{{ video.timeAgo }} ago</span>            
+            <span>{{ content.reactions.length }} reactions</span> -
+            <span>{{ time_ago(content.createdAt) }}</span>            
           </div>
         </div>
       </div>
@@ -26,8 +25,10 @@
 
 
 <script setup>
-defineProps({
-  video: {
+import {time_ago} from "@/internal_time_ago.js";
+
+const props = defineProps({
+  content: {
     type: Object,
     required: true
   }
diff --git a/src/views/explorer/explorer.vue b/src/views/explorer/explorer.vue
index 966e507..2f612dd 100644
--- a/src/views/explorer/explorer.vue
+++ b/src/views/explorer/explorer.vue
@@ -1,12 +1,62 @@
 <script setup>
-import { ref, computed } from 'vue';
+import {ref, computed, onMounted, onBeforeUnmount, onBeforeMount} from 'vue';
 import videosData from './videos.json';
 import ExplorerCard from '@/views/explorer/ExplorerCard.vue';
+import {useClient} from "@/plugins/api.js";
 
+const client = useClient();
+
+const contentCount = ref(0);
+const pageSize = ref(10);
+const isSmallScreen = ref(false);
+const errorMessage = ref()
 // Données
-const mostViewedVideos = videosData.mostViewedVideos;
+const mostReactedContent = ref([]);
 const mostBoughtVideos = videosData.mostBoughtVideos;
 
+let last_id = null
+
+const updateScreenSize = () => {
+  isSmallScreen.value = window.matchMedia('(max-width: 600px)').matches;
+};
+
+const fetchContents = async () => {
+  try {
+    let uri = `/api/contents/featured/?page_size=${pageSize.value}`;
+    if (last_id !== null) uri = uri + `&last_id=${last_id}`
+    
+    const response = await client.get(uri);
+    
+    console.log(response.data);
+
+    if (response.status >= 200 && response.status < 300) {
+      contentCount.value = response.data.length;
+
+      if (contentCount.value > 0) {
+        mostReactedContent.value.push(...response.data)
+        const [last_content] = response.data.slice(-1)
+        last_id = last_content.id
+      }
+    }
+  } catch (error) {
+    console.error("Failed to fetch posts", error);
+  }
+};
+
+onBeforeMount(async () => {
+  await fetchContents();
+})
+
+onMounted(() => {
+  updateScreenSize();
+  window.addEventListener('resize', updateScreenSize);
+});
+
+onBeforeUnmount(async () => {
+  window.removeEventListener('resize', updateScreenSize);
+});
+
+
 // État pour contrôler la plage actuelle des vidéos affichées
 const currentRangeViewed = ref(0);
 const currentRangeBought = ref(0);
@@ -19,7 +69,7 @@ const selectedTimeRangeBought = ref('24h'); // Plage de temps sélectionnée pou
 
 // Fonction pour passer à l'ensemble suivant de vidéos (Most Viewed)
 const nextRowViewed = () => {
-  if (currentRangeViewed.value + videosPerRowViewed.value < mostViewedVideos.length) {
+  if (currentRangeViewed.value + videosPerRowViewed.value < mostReactedContent.value.length) {
     currentRangeViewed.value += videosPerRowViewed.value;
   }
 };
@@ -48,8 +98,8 @@ const previousRowBought = () => {
 // Fonction pour basculer entre l'affichage de 4 et 8 vidéos (Most Viewed)
 const toggleVideoDisplayViewed = () => {
   if (videosPerRowViewed.value === 4) {
-    if (currentRangeViewed.value + videosPerRowViewed.value >= mostViewedVideos.length) {
-      currentRangeViewed.value = Math.max(mostViewedVideos.length - 8, 0);
+    if (currentRangeViewed.value + videosPerRowViewed.value >= mostReactedContent.length) {
+      currentRangeViewed.value = Math.max(mostReactedContent.length - 8, 0);
     }
     videosPerRowViewed.value = 8;
   } else {
@@ -101,21 +151,21 @@ const chevronIconBought = computed(() => {
   <div class="container mx-auto py-4">
     <!-- Section Most Viewed avec boutons de sélection de la plage de temps -->
     <div class="flex justify-between items-center mb-4">
-      <h2 class="text-2xl font-bold">Most Viewed</h2>
-      <div class="flex space-x-4">
-        <v-btn variant="outlined" small @click="changeTimeRangeViewed('24h')" :class="{'v-btn--active': selectedTimeRangeViewed === '24h'}">
-          <v-icon left>mdi-timer</v-icon> 24h
-        </v-btn>
-        <v-btn variant="outlined"  small @click="changeTimeRangeViewed('72h')" :class="{'v-btn--active': selectedTimeRangeViewed === '72h'}">
-          <v-icon left>mdi-timer-sand</v-icon> 72h
-        </v-btn>
-        <v-btn variant="outlined"  small @click="changeTimeRangeViewed('week')" :class="{'v-btn--active': selectedTimeRangeViewed === 'week'}">
-          <v-icon left>mdi-calendar-week</v-icon> Semaine
-        </v-btn>
-        <v-btn variant="outlined"  small @click="changeTimeRangeViewed('month')" :class="{'v-btn--active': selectedTimeRangeViewed === 'month'}">
-          <v-icon left>mdi-calendar-month</v-icon> Mois
-        </v-btn>
-      </div>
+      <h2 class="text-2xl font-bold">Most Reacted</h2>
+<!--      <div class="flex space-x-4">-->
+<!--        <v-btn variant="outlined" small @click="changeTimeRangeViewed('24h')" :class="{'v-btn&#45;&#45;active': selectedTimeRangeViewed === '24h'}">-->
+<!--          <v-icon left>mdi-timer</v-icon> 24h-->
+<!--        </v-btn>-->
+<!--        <v-btn variant="outlined"  small @click="changeTimeRangeViewed('72h')" :class="{'v-btn&#45;&#45;active': selectedTimeRangeViewed === '72h'}">-->
+<!--          <v-icon left>mdi-timer-sand</v-icon> 72h-->
+<!--        </v-btn>-->
+<!--        <v-btn variant="outlined"  small @click="changeTimeRangeViewed('week')" :class="{'v-btn&#45;&#45;active': selectedTimeRangeViewed === 'week'}">-->
+<!--          <v-icon left>mdi-calendar-week</v-icon> Semaine-->
+<!--        </v-btn>-->
+<!--        <v-btn variant="outlined"  small @click="changeTimeRangeViewed('month')" :class="{'v-btn&#45;&#45;active': selectedTimeRangeViewed === 'month'}">-->
+<!--          <v-icon left>mdi-calendar-month</v-icon> Mois-->
+<!--        </v-btn>-->
+<!--      </div>-->
     </div>
 
     <!-- Liste des vidéos les plus vues -->
@@ -123,9 +173,9 @@ const chevronIconBought = computed(() => {
       <div class="relative overflow-hidden">
         <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 mb-8">
           <ExplorerCard
-              v-for="(video, index) in mostViewedVideos.slice(currentRangeViewed, currentRangeViewed + videosPerRowViewed)"
-              :key="video.id"
-              :video="video"
+              v-for="(content, index) in mostReactedContent.slice(currentRangeViewed, currentRangeViewed + videosPerRowViewed)"
+              :key="content.id"
+              :content="content"
           />
         </div>
       </div>
@@ -135,7 +185,7 @@ const chevronIconBought = computed(() => {
           <v-icon>mdi-arrow-up-circle-outline</v-icon>
         </v-btn>
         <!-- Bouton pour naviguer vers l'ensemble suivant de vidéos (Most Viewed) -->
-        <v-btn @click="nextRowViewed" :disabled="currentRangeViewed + videosPerRowViewed.value >= mostViewedVideos.length">
+        <v-btn @click="nextRowViewed" :disabled="currentRangeViewed + videosPerRowViewed.value >= mostReactedContent.length">
           <v-icon>mdi-arrow-down-circle-outline</v-icon>
         </v-btn>
       </div>
@@ -149,56 +199,56 @@ const chevronIconBought = computed(() => {
     </div>
 
     <!-- Ligne de séparation -->
-    <hr class="my-8"/>
+<!--    <hr class="my-8"/>-->
 
     <!-- Section Most Bought avec boutons de sélection de la plage de temps -->
-    <div class="flex justify-between items-center mb-4">
-      <h2 class="text-2xl font-bold">Most Bought</h2>
-      <div class="flex space-x-4">
-        <v-btn variant="outlined" small @click="changeTimeRangeBought('24h')" :class="{'v-btn--active': selectedTimeRangeBought === '24h'}">
-          <v-icon left>mdi-timer</v-icon> 24h
-        </v-btn>
-        <v-btn variant="outlined"  small @click="changeTimeRangeBought('72h')" :class="{'v-btn--active': selectedTimeRangeBought === '72h'}">
-          <v-icon left>mdi-timer-sand</v-icon> 72h
-        </v-btn>
-        <v-btn variant="outlined"  small @click="changeTimeRangeBought('week')" :class="{'v-btn--active': selectedTimeRangeBought === 'week'}">
-          <v-icon left>mdi-calendar-week</v-icon> Semaine
-        </v-btn>
-        <v-btn variant="outlined"  small @click="changeTimeRangeBought('month')" :class="{'v-btn--active': selectedTimeRangeBought === 'month'}">
-          <v-icon left>mdi-calendar-month</v-icon> Mois
-        </v-btn>
-      </div>
-    </div>
+<!--    <div class="flex justify-between items-center mb-4">-->
+<!--      <h2 class="text-2xl font-bold">Most Bought</h2>-->
+<!--      <div class="flex space-x-4">-->
+<!--        <v-btn variant="outlined" small @click="changeTimeRangeBought('24h')" :class="{'v-btn&#45;&#45;active': selectedTimeRangeBought === '24h'}">-->
+<!--          <v-icon left>mdi-timer</v-icon> 24h-->
+<!--        </v-btn>-->
+<!--        <v-btn variant="outlined"  small @click="changeTimeRangeBought('72h')" :class="{'v-btn&#45;&#45;active': selectedTimeRangeBought === '72h'}">-->
+<!--          <v-icon left>mdi-timer-sand</v-icon> 72h-->
+<!--        </v-btn>-->
+<!--        <v-btn variant="outlined"  small @click="changeTimeRangeBought('week')" :class="{'v-btn&#45;&#45;active': selectedTimeRangeBought === 'week'}">-->
+<!--          <v-icon left>mdi-calendar-week</v-icon> Semaine-->
+<!--        </v-btn>-->
+<!--        <v-btn variant="outlined"  small @click="changeTimeRangeBought('month')" :class="{'v-btn&#45;&#45;active': selectedTimeRangeBought === 'month'}">-->
+<!--          <v-icon left>mdi-calendar-month</v-icon> Mois-->
+<!--        </v-btn>-->
+<!--      </div>-->
+<!--    </div>-->
 
     <!-- Liste des vidéos les plus achetées -->
-    <div class="flex flex-row">
-      <div class="relative overflow-hidden">
-        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 mb-8">
-          <ExplorerCard
-              v-for="(video, index) in mostBoughtVideos.slice(currentRangeBought, currentRangeBought + videosPerRowBought)"
-              :key="video.id"
-              :video="video"
-          />
-        </div>
-      </div>
-      <div class="flex flex-col justify-center px-2">
-        <!-- Bouton pour naviguer vers l'ensemble précédent de vidéos (Most Bought) -->
-        <v-btn @click="previousRowBought" :disabled="currentRangeBought === 0" class="mb-2">
-          <v-icon>mdi-arrow-up-circle-outline</v-icon>
-        </v-btn>
-        <!-- Bouton pour naviguer vers l'ensemble suivant de vidéos (Most Bought) -->
-        <v-btn @click="nextRowBought" :disabled="currentRangeBought + videosPerRowBought.value >= mostBoughtVideos.length">
-          <v-icon>mdi-arrow-down-circle-outline</v-icon>
-        </v-btn>
-      </div>
-    </div>
+<!--    <div class="flex flex-row">-->
+<!--      <div class="relative overflow-hidden">-->
+<!--        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 mb-8">-->
+<!--          <ExplorerCard-->
+<!--              v-for="(video, index) in mostBoughtVideos.slice(currentRangeBought, currentRangeBought + videosPerRowBought)"-->
+<!--              :key="video.id"-->
+<!--              :video="video"-->
+<!--          />-->
+<!--        </div>-->
+<!--      </div>-->
+<!--      <div class="flex flex-col justify-center px-2">-->
+<!--        &lt;!&ndash; Bouton pour naviguer vers l'ensemble précédent de vidéos (Most Bought) &ndash;&gt;-->
+<!--        <v-btn @click="previousRowBought" :disabled="currentRangeBought === 0" class="mb-2">-->
+<!--          <v-icon>mdi-arrow-up-circle-outline</v-icon>-->
+<!--        </v-btn>-->
+<!--        &lt;!&ndash; Bouton pour naviguer vers l'ensemble suivant de vidéos (Most Bought) &ndash;&gt;-->
+<!--        <v-btn @click="nextRowBought" :disabled="currentRangeBought + videosPerRowBought.value >= mostBoughtVideos.length">-->
+<!--          <v-icon>mdi-arrow-down-circle-outline</v-icon>-->
+<!--        </v-btn>-->
+<!--      </div>-->
+<!--    </div>-->
 
-    <!-- Chevron pour basculer entre l'affichage de 4 et 8 vidéos (Most Bought) -->
-    <div class="flex justify-center mt-4">
-      <v-btn icon @click="toggleVideoDisplayBought">
-        <v-icon>{{ chevronIconBought }}</v-icon>
-      </v-btn>
-    </div>
+<!--    &lt;!&ndash; Chevron pour basculer entre l'affichage de 4 et 8 vidéos (Most Bought) &ndash;&gt;-->
+<!--    <div class="flex justify-center mt-4">-->
+<!--      <v-btn icon @click="toggleVideoDisplayBought">-->
+<!--        <v-icon>{{ chevronIconBought }}</v-icon>-->
+<!--      </v-btn>-->
+<!--    </div>-->
   </div>
 </template>
 
diff --git a/src/views/profile/ForYouPage.vue b/src/views/profile/ForYouPage.vue
index b2bb163..2698500 100644
--- a/src/views/profile/ForYouPage.vue
+++ b/src/views/profile/ForYouPage.vue
@@ -21,7 +21,7 @@ const updateScreenSize = () => {
 
 const fetchContents = async ({done}) => {
   try {
-    let uri = `/api/contents/all/?page_size=${pageSize.value}`;
+    let uri = `/api/contents/followed/?page_size=${pageSize.value}`;
     if (last_id !== null) uri = uri + `&last_id=${last_id}`
 
     const response = await client.get(uri);