feat: refactor pagination

dewanakl · Sep 1, 2024 · fdccd19 · fdccd19
1 parent 6a77d15
commit fdccd19
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 52 deletions.
diff --git a/js/comment.js b/js/comment.js
@@ -45,7 +45,7 @@ export const comment = (() => {
 
             if (oldUuids.find((i) => i === id)) {
                 const uuids = oldUuids.filter((i) => i !== id).join(',');
-                
+
                 if (uuids.length === 0) {
                     n.remove();
                 } else {
@@ -80,7 +80,7 @@ export const comment = (() => {
         }
 
         const form = document.getElementById(`form-${id ? `inner-${id}` : 'comment'}`);
-        
+
         let isChecklist = false;
         const badge = document.getElementById(`badge-${id}`);
         if (badge) {
@@ -220,15 +220,15 @@ export const comment = (() => {
         if (!id) {
             const newPage = await pagination.reset();
             if (newPage) {
-                document.getElementById('comments').scrollIntoView({ behavior: 'smooth' });
+                scroll();
                 return;
             }
 
             response.data.is_admin = session.isAdmin();
 
             document.getElementById('comments').lastElementChild.remove();
             document.getElementById('comments').innerHTML = card.renderContent(response.data) + document.getElementById('comments').innerHTML;
-            document.getElementById('comments').scrollIntoView({ behavior: 'smooth' });
+            scroll();
         }
 
         if (id) {
@@ -307,7 +307,7 @@ export const comment = (() => {
                 if (res.code !== 200) {
                     return;
                 }
-                
+
                 document.getElementById(`button-${id}`).insertAdjacentElement('afterend', card.renderEdit(id, res.data.presence));
                 document.getElementById(`form-inner-${id}`).value = res.data.comment;
                 document.getElementById(`form-inner-${id}`).setAttribute('data-original', res.data.comment);
@@ -317,7 +317,7 @@ export const comment = (() => {
         button.disabled = true;
     };
 
-    const comment = () => { 
+    const comment = () => {
         card.renderLoading();
         const comments = document.getElementById('comments');
         const onNullComment = `<div class="h6 text-center fw-bold p-4 my-3 bg-theme-${theme.isDarkMode('dark', 'light')} rounded-4 shadow">Yuk bagikan undangan ini biar banyak komentarnya</div>`;
@@ -366,6 +366,7 @@ export const comment = (() => {
                 comments.setAttribute('data-loading', 'false');
                 comments.innerHTML = res.data.map((c) => card.renderContent(c)).join('');
                 res.data.forEach(card.fetchTracker);
+                return res;
             });
     };
 
@@ -404,7 +405,10 @@ export const comment = (() => {
         }
     };
 
+    const scroll = () => document.getElementById('comments').scrollIntoView({ behavior: 'smooth' });
+
     return {
+        scroll,
         cancel,
         send,
         edit,

diff --git a/js/pagination.js b/js/pagination.js
@@ -7,47 +7,36 @@ export const pagination = (() => {
     let resultData = 0;
 
     let page = null;
-    let buttonPrev = null;
-    let buttonNext = null;
+    let liPrev = null;
+    let liNext = null;
 
     const setPer = (num) => {
         perPage = Number(num);
     };
 
-    const getPer = () => {
-        return perPage;
-    };
+    const getPer = () => perPage;
 
-    const getNext = () => {
-        return pageNow;
-    };
+    const getNext = () => pageNow;
 
-    const disabledPrevious = () => {
-        buttonPrev.classList.add('disabled');
-    };
-
-    const enablePrevious = () => {
-        buttonPrev.classList.remove('disabled');
-    };
+    const disabledPrevious = () => liPrev.classList.add('disabled');
 
-    const disabledNext = () => {
-        buttonNext.classList.add('disabled');
-    };
-
-    const enableNext = () => {
-        buttonNext.classList.remove('disabled');
-    };
+    const enablePrevious = () => liPrev.classList.remove('disabled');
+
+    const disabledNext = () => liNext.classList.add('disabled');
+
+    const enableNext = () => liNext.classList.remove('disabled');
 
     const buttonAction = async (button, type) => {
-        let tmp = button.innerHTML;
         button.disabled = true;
-        button.innerHTML = `${type == 'Next' ? type : ''}<div class="spinner-border spinner-border-sm my-0 mx-1 p-0" style="height: 0.8rem; width: 0.8rem"></div>${type == 'Prev' ? type : ''}`;
+        const tmp = button.innerHTML;
 
+        button.innerHTML = `${type == 'Next' ? type : ''}<div class="spinner-border spinner-border-sm my-0 mx-1 p-0" style="height: 0.8rem; width: 0.8rem;"></div>${type == 'Prev' ? type : ''}`;
         await comment.comment();
-        document.getElementById('comments').scrollIntoView({ behavior: 'smooth' });
 
         button.disabled = false;
         button.innerHTML = tmp;
+
+        comment.scroll();
     };
 
     const reset = async () => {
@@ -58,9 +47,9 @@ export const pagination = (() => {
         pageNow = 0;
         resultData = 0;
         page.innerText = 1;
-        enableNext();
-        await comment.comment();
+
         disabledPrevious();
+        await comment.comment();
 
         return true;
     };
@@ -69,49 +58,46 @@ export const pagination = (() => {
         resultData = len;
         if (resultData < perPage) {
             disabledNext();
+            return;
         }
+
+        enableNext();
     };
 
     const previous = async (button) => {
-        if (pageNow < 0) {
-            disabledPrevious();
-        } else {
+        disabledPrevious();
+
+        if (pageNow >= 0) {
             pageNow -= perPage;
-            disabledNext();
 
-            disabledPrevious();
+            disabledNext();
             await buttonAction(button, 'Prev');
-            enablePrevious();
-
             page.innerText = parseInt(page.innerText) - 1;
-            enableNext();
 
-            if (pageNow <= 0) {
-                disabledPrevious();
+            if (pageNow > 0) {
+                enablePrevious();
             }
         }
     };
 
     const next = async (button) => {
-        if (resultData < perPage) {
-            disabledNext();
-        } else {
+        disabledNext();
+
+        if (resultData >= perPage) {
             pageNow += perPage;
-            disabledPrevious();
 
-            disabledNext();
+            disabledPrevious();
             await buttonAction(button, 'Next');
-            enableNext();
-
             page.innerText = parseInt(page.innerText) + 1;
+
             enablePrevious();
         }
     };
 
     const init = () => {
         page = document.getElementById('page');
-        buttonPrev = document.getElementById('previous');
-        buttonNext = document.getElementById('next');
+        liPrev = document.getElementById('previous');
+        liNext = document.getElementById('next');
     };
 
     return {