From b095dffb1e3e197d89aed60f82ee50c5bd5e4eb4 Mon Sep 17 00:00:00 2001
From: dewanakl <dewanakretarta29@gmail.com>
Date: Fri, 20 Sep 2024 13:11:37 +0700
Subject: [PATCH] feat: improve code

---
 index.html       |  4 ++--
 js/comment.js    | 12 ++++++++++--
 js/guest.js      |  2 +-
 js/pagination.js | 18 +++++++++---------
 4 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/index.html b/index.html
index 42197bf..da02ee9 100644
--- a/index.html
+++ b/index.html
@@ -420,7 +420,7 @@ <h2 class="font-esthetic mt-0 mb-3" style="font-size: 2.5rem;">Love Gift</h2>
                                     <button class="btn btn-outline-dark btn-sm rounded-4" data-copy="123456789101112" onclick="util.copy(this, 'Tersalin')"><i class="fa-solid fa-copy me-1"></i>Salin</button>
                                 </div>
 
-                                <p class="mt-2 mb-0 p-0">Nama Wahyu Siapa</p>
+                                <p class="mt-2 mb-0 p-0" style="font-size: 0.95rem;">Nama Wahyu Siapa</p>
                             </div>
 
                             <div class="col card-body border rounded-4 shadow p-4 mx-4 mt-2 mb-4 text-start" data-aos="fade-down" data-aos-duration="1500">
@@ -432,7 +432,7 @@ <h2 class="font-esthetic mt-0 mb-3" style="font-size: 2.5rem;">Love Gift</h2>
                                     <button class="btn btn-outline-dark btn-sm rounded-4" data-copy="123456789101112" onclick="util.copy(this, 'Tersalin')"><i class="fa-solid fa-copy me-1"></i>Salin</button>
                                 </div>
 
-                                <p class="mt-2 mb-0 p-0">Nama Riski Siapa</p>
+                                <p class="mt-2 mb-0 p-0" style="font-size: 0.95rem;">Nama Riski Siapa</p>
                             </div>
                         </div>
                     </div>
diff --git a/js/comment.js b/js/comment.js
index 5d44920..f01e4ad 100644
--- a/js/comment.js
+++ b/js/comment.js
@@ -229,7 +229,7 @@ export const comment = (() => {
                 document.getElementById('comments').lastElementChild.remove();
             }
 
-            document.getElementById('comments').innerHTML = card.renderContent(response.data) + document.getElementById('comments').innerHTML;
+            document.getElementById('comments').insertAdjacentHTML('afterbegin', card.renderContent(response.data));
             scroll();
         }
 
@@ -365,9 +365,17 @@ export const comment = (() => {
                     return res;
                 }
 
+                const observer = new MutationObserver((mutationsList) => {
+                    for (const mutation of mutationsList) {
+                        if (mutation.type === 'childList' && session.isAdmin()) {
+                            res.data.forEach(card.fetchTracker);
+                        }
+                    }
+                });
+
+                observer.observe(comments, { childList: true });
                 comments.setAttribute('data-loading', 'false');
                 comments.innerHTML = res.data.map((c) => card.renderContent(c)).join('');
-                res.data.forEach(card.fetchTracker);
                 return res;
             });
     };
diff --git a/js/guest.js b/js/guest.js
index c6716a1..ae81b2f 100644
--- a/js/guest.js
+++ b/js/guest.js
@@ -71,7 +71,7 @@ export const guest = (() => {
         } else {
             const div = document.createElement('div');
             div.classList.add('m-2');
-            div.innerHTML = `<p class="mt-0 mb-1 mx-0 p-0">${guest.getAttribute('data-message')}</p><h2>${util.escapeHtml(name)}</h2>`;
+            div.innerHTML = `<p class="mt-0 mb-1 mx-0 p-0" style="font-size: 0.95rem;">${guest.getAttribute('data-message')}</p><h2>${util.escapeHtml(name)}</h2>`;
             guest.appendChild(div);
         }
 
diff --git a/js/pagination.js b/js/pagination.js
index 3887143..1b2324b 100644
--- a/js/pagination.js
+++ b/js/pagination.js
@@ -41,12 +41,16 @@ export const pagination = (() => {
         };
 
         const next = async () => {
+            pageNow += perPage;
+
             button.innerHTML = 'Next' + button.innerHTML;
             await process();
             page.innerText = parseInt(page.innerText) + 1;
         };
 
         const prev = async () => {
+            pageNow -= perPage;
+
             button.innerHTML = button.innerHTML + 'Prev';
             await process();
             page.innerText = parseInt(page.innerText) - 1;
@@ -76,6 +80,11 @@ export const pagination = (() => {
 
     const setResultData = (len) => {
         resultData = len;
+
+        if (pageNow > 0) {
+            enablePrevious();
+        }
+
         if (resultData < perPage) {
             disabledNext();
             return;
@@ -91,14 +100,8 @@ export const pagination = (() => {
             return;
         }
 
-        pageNow -= perPage;
-
         disabledNext();
         await buttonAction(button).prev();
-
-        if (pageNow > 0) {
-            enablePrevious();
-        }
     };
 
     const next = async (button) => {
@@ -108,11 +111,8 @@ export const pagination = (() => {
             return;
         }
 
-        pageNow += perPage;
-
         disabledPrevious();
         await buttonAction(button).next();
-        enablePrevious();
     };
 
     const init = () => {