From 6b1e5a4e862889e6c965606b8bb58439e0d5b5d4 Mon Sep 17 00:00:00 2001
From: Arthur FRIN <frin.arthur@gmail.com>
Date: Thu, 27 Jun 2024 20:22:55 +0200
Subject: [PATCH] fix lazyLoad for getting many tpf + fix center OU in preview
 tpf after creation

---
 api/src/routes/tpf/getRoutes.ts               |  7 ++-
 front/src/components/TuPreferes.vue           | 43 ++++++++++---------
 .../components/popups/generateImgPopup.vue    | 35 ++++++++-------
 3 files changed, 48 insertions(+), 37 deletions(-)

diff --git a/api/src/routes/tpf/getRoutes.ts b/api/src/routes/tpf/getRoutes.ts
index c74420a..bbca76c 100644
--- a/api/src/routes/tpf/getRoutes.ts
+++ b/api/src/routes/tpf/getRoutes.ts
@@ -6,7 +6,7 @@ async function getRoutes(fastify: FastifyInstance) {
 
     //get all tu_preferes
     fastify.get('/', async (request: FastifyRequest, reply: FastifyReply) => {
-        const [rows] = await fastify.db.query('SELECT * FROM tu_preferes ORDER BY RAND()');
+        const [rows] = await fastify.db.query('SELECT * FROM tu_preferes ORDER BY RAND() LIMIT 30;');
         reply.send(rows);
     });
 
@@ -18,7 +18,10 @@ async function getRoutes(fastify: FastifyInstance) {
             `SELECT tp.*
             FROM tu_preferes tp
             LEFT JOIN play_tpf pt ON tp.id = pt.tu_preferes_id AND pt.user_id = ?
-            WHERE pt.tu_preferes_id IS NULL;`,
+            WHERE pt.tu_preferes_id IS NULL
+            ORDER BY RAND()
+            LIMIT 30;
+            `,
             [userId]
           );
     
diff --git a/front/src/components/TuPreferes.vue b/front/src/components/TuPreferes.vue
index 709f263..228d6e2 100644
--- a/front/src/components/TuPreferes.vue
+++ b/front/src/components/TuPreferes.vue
@@ -9,21 +9,21 @@ const showToast = useUtilsStore().showToast;
 const utilsStore = useUtilsStore();
 let img1IsActive = ref(false);
 let img2IsActive = ref(false);
-let postTab: Ref<Post[]> = ref([]);
+let tabTpf: Ref<Post[]> = ref([]);
 let tabPosition: Ref<number> = ref(0);
 const isNavOpen = useUtilsStore().isNavbarOpen;
 
 const currentUser = useUserStore().currentUser;
 
 onMounted(async () => {
-  postTab.value = await getAllPosts() ?? [];
+  tabTpf.value = await getTpfs() ?? [];
 });
 
 const setImg1 = () => {
-  if (!img1IsActive.value && !img2IsActive.value && postTab.value.length !== 0) {
+  if (!img1IsActive.value && !img2IsActive.value && tabTpf.value.length !== 0) {
     img1IsActive.value = true;
     img2IsActive.value = false;
-    vote(postTab.value[tabPosition.value].id!, 1);
+    vote(tabTpf.value[tabPosition.value].id!, 1);
   }
 };
 
@@ -32,11 +32,11 @@ const setImg2 = () => {
     img1IsActive.value = false;
     img2IsActive.value = true;
 
-    vote(postTab.value[tabPosition.value].id!, 2);
+    vote(tabTpf.value[tabPosition.value].id!, 2);
   }
 };
 
-async function getAllPosts(): Promise<Post[] | undefined> {
+async function getTpfs(): Promise<Post[] | undefined> {
   let res;
   if (currentUser?.id) {
     res = await apiHelper.kyGet(`tpf/${currentUser.id}`);
@@ -59,9 +59,9 @@ const getPercentage = (nbClic1: number, nbClic2: number) => {
 
 const isVoteMajority = (selectedClick: number) => {
   if (selectedClick === 1) {
-    return postTab.value[tabPosition.value].nb_clic1 > postTab.value[tabPosition.value].nb_clic2;
+    return tabTpf.value[tabPosition.value].nb_clic1 > tabTpf.value[tabPosition.value].nb_clic2;
   } else {
-    return postTab.value[tabPosition.value].nb_clic2 > postTab.value[tabPosition.value].nb_clic1;
+    return tabTpf.value[tabPosition.value].nb_clic2 > tabTpf.value[tabPosition.value].nb_clic1;
   }
 };
 
@@ -76,10 +76,13 @@ const vote = async (id: number, selectedClick: number) => {
   }
 };
 
-const nextPost = () => {
+const nextPost = async() => {
   tabPosition.value++;
-  if (tabPosition.value >= postTab.value.length) {
-    tabPosition.value = 0;
+  if (!img1IsActive.value && !img2IsActive.value) {
+    return;
+  }
+  if (tabPosition.value >= tabTpf.value.length -1) {
+    tabTpf.value = [...tabTpf.value, ...(await getTpfs() ?? [])];
   }
   img1IsActive.value = false;
   img2IsActive.value = false;
@@ -95,7 +98,7 @@ const getCenterBtnTxt = () => {
 </script>
 
 <template>
-  <main v-if="postTab.length !== 0">
+  <main v-if="tabTpf.length !== 0">
     <button :class="{ hide: !(img1IsActive || img2IsActive), navopen: isNavOpen()}" class="button-next"
       @click="nextPost()">{{ getCenterBtnTxt() }}
     </button>
@@ -103,21 +106,21 @@ const getCenterBtnTxt = () => {
     <div class="container first">
       <button class="img-container fisrt-img">
         <img @click="setImg1()" :class="{ active: img1IsActive, no_colors: img2IsActive }"
-          :src="postTab[tabPosition].img_url1" alt="">
+          :src="tabTpf[tabPosition].img_url1" alt="">
       </button>
-      <h2 :class="{ navopen: isNavOpen() }" class="first" v-if="img1IsActive || img2IsActive">{{ getPercentage(postTab[tabPosition].nb_clic1,
-        postTab[tabPosition].nb_clic2) }}</h2>
-      <h3 :class="{ navopen: isNavOpen() }" class="first">{{ postTab[tabPosition].prompt1 }}</h3>
+      <h2 :class="{ navopen: isNavOpen() }" class="first" v-if="img1IsActive || img2IsActive">{{ getPercentage(tabTpf[tabPosition].nb_clic1,
+        tabTpf[tabPosition].nb_clic2) }}</h2>
+      <h3 :class="{ navopen: isNavOpen() }" class="first">{{ tabTpf[tabPosition].prompt1 }}</h3>
     </div>
     <div :class="{ navopen: isNavOpen() }" class="divide-bar"></div>
     <div class="container second">
       <button class="img-container second-img">
         <img @click="setImg2()" :class="{ active: img2IsActive, no_colors: img1IsActive }"
-          :src="postTab[tabPosition].img_url2" alt="">
+          :src="tabTpf[tabPosition].img_url2" alt="">
       </button>
-      <h2 :class="{ navopen: isNavOpen() }" class="second" v-if="img1IsActive || img2IsActive">{{ getPercentage(postTab[tabPosition].nb_clic2,
-        postTab[tabPosition].nb_clic1) }}</h2>
-      <h3 :class="{ navopen: isNavOpen() }" class="second">{{ postTab[tabPosition].prompt2 }}</h3>
+      <h2 :class="{ navopen: isNavOpen() }" class="second" v-if="img1IsActive || img2IsActive">{{ getPercentage(tabTpf[tabPosition].nb_clic2,
+        tabTpf[tabPosition].nb_clic1) }}</h2>
+      <h3 :class="{ navopen: isNavOpen() }" class="second">{{ tabTpf[tabPosition].prompt2 }}</h3>
     </div>
   </main>
 </template>
diff --git a/front/src/components/popups/generateImgPopup.vue b/front/src/components/popups/generateImgPopup.vue
index 527c79d..751f1ac 100644
--- a/front/src/components/popups/generateImgPopup.vue
+++ b/front/src/components/popups/generateImgPopup.vue
@@ -69,11 +69,11 @@ async function SendPost() {
                     <h2>Tu-Préfères Généré</h2>
                     <div class="tpf">
                         <div class="or">OU</div>
-                        <div>
+                        <div class="contain">
                             <img class="first" :src="img_url1" alt="second img">
                             <h4>{{ text1 }}</h4>
                         </div>
-                        <div>
+                        <div class="contain">
                             <img class="second" :src="img_url2" alt="second img">
 
                             <h4>{{ text2 }}</h4>
@@ -139,21 +139,26 @@ async function SendPost() {
             .tpf {
                 display: flex;
                 font-size: 1rem;
-                img {
-                    display: flex;
-                    width: 100%;
-                    aspect-ratio: 1;
-                    object-fit: cover;
-
-                    &.first {
-                        border-radius: 12px 0 0 12px;
-                        border-right: #17141D 5px solid;
-                    }
-                    &.second {
-                        border-radius: 0 12px 12px 0;
-                        border-left: #17141D 5px solid;
+                width: 100%;
+                .contain {
+                    width: 50%;
+
+                    img {
+                        width: 100%;
+                        aspect-ratio: 1;
+                        object-fit: cover;
+    
+                        &.first {
+                            border-radius: 12px 0 0 12px;
+                            border-right: #17141D 5px solid;
+                        }
+                        &.second {
+                            border-radius: 0 12px 12px 0;
+                            border-left: #17141D 5px solid;
+                        }
                     }
                 }
+                
                 text-align: center;
 
                 .or {