From 9e1d65388b79d733a3ef3fa8bb7653895f3dbd1a Mon Sep 17 00:00:00 2001
From: dewanakl <dewanakretarta29@gmail.com>
Date: Mon, 23 Dec 2024 21:24:32 +0700
Subject: [PATCH] refactor: update modal function

---
 index.html  | 18 +++++++++---------
 js/admin.js |  6 +++---
 js/app.js   |  2 --
 js/guest.js | 12 ++++++++++++
 js/theme.js |  2 +-
 js/util.js  | 12 ------------
 6 files changed, 25 insertions(+), 27 deletions(-)

diff --git a/index.html b/index.html
index 80d1ee9..6c39605 100644
--- a/index.html
+++ b/index.html
@@ -121,7 +121,7 @@
             <div class="position-relative text-center p-2">
                 <h1 class="font-esthetic my-4 fw-medium" style="font-size: 2.5rem;">Undangan Pernikahan</h1>
 
-                <img src="./assets/images/bg.png" alt="bg" onclick="util.modal(this)" class="img-center-crop rounded-circle border border-3 border-light shadow my-4 mx-auto">
+                <img src="./assets/images/bg.png" alt="bg" onclick="guest.modal(this)" class="img-center-crop rounded-circle border border-3 border-light shadow my-4 mx-auto">
 
                 <h2 class="font-esthetic my-4" style="font-size: 2.5rem;">Wahyu &amp; Riski</h2>
                 <p class="my-2" style="font-size: 1.25rem;">Rabu, 15 Maret 2023</p>
@@ -163,7 +163,7 @@ <h2 class="font-esthetic py-4 m-0" style="font-size: 2rem;">Assalamualaikum Wara
             <div class="overflow-x-hidden pb-4">
 
                 <div data-aos="fade-right" data-aos-duration="2000">
-                    <img src="./assets/images/cowo.png" alt="cowo" onclick="util.modal(this)" class="img-center-crop rounded-circle border border-3 border-light shadow my-4 mx-auto">
+                    <img src="./assets/images/cowo.png" alt="cowo" onclick="guest.modal(this)" class="img-center-crop rounded-circle border border-3 border-light shadow my-4 mx-auto">
                     <h2 class="font-esthetic m-0" style="font-size: 2rem;">Nama Wahyu Siapa</h2>
                     <p class="mt-3 mb-1" style="font-size: 1.25rem;">Putra ke-1</p>
                     <p class="mb-0">Bapak ... dan Ibu ...</p>
@@ -190,7 +190,7 @@ <h2 class="font-esthetic my-4" style="font-size: 4rem;">&amp;</h2>
                 </div>
 
                 <div data-aos="fade-left" data-aos-duration="2000">
-                    <img src="./assets/images/cewe.png" alt="cewe" onclick="util.modal(this)" class="img-center-crop rounded-circle border border-3 border-light shadow my-4 mx-auto">
+                    <img src="./assets/images/cewe.png" alt="cewe" onclick="guest.modal(this)" class="img-center-crop rounded-circle border border-3 border-light shadow my-4 mx-auto">
                     <h2 class="font-esthetic m-0" style="font-size: 2rem;">Nama Riski Siapa</h2>
                     <p class="mt-3 mb-1" style="font-size: 1.25rem;">Putri ke-2</p>
                     <p class="mb-0">Bapak ... dan Ibu ...</p>
@@ -319,13 +319,13 @@ <h2 class="font-esthetic text-center py-2 m-0" style="font-size: 2.5rem;">Galeri
 
                         <div class="carousel-inner rounded-4">
                             <div class="carousel-item active">
-                                <img src="https://picsum.photos/1280/720?random=1" alt="image 1" class="d-block w-100" onclick="util.modal(this)">
+                                <img src="https://picsum.photos/1280/720?random=1" alt="image 1" class="d-block w-100" onclick="guest.modal(this)">
                             </div>
                             <div class="carousel-item">
-                                <img src="https://picsum.photos/1280/720?random=2" alt="image 2" class="d-block w-100" onclick="util.modal(this)">
+                                <img src="https://picsum.photos/1280/720?random=2" alt="image 2" class="d-block w-100" onclick="guest.modal(this)">
                             </div>
                             <div class="carousel-item">
-                                <img src="https://picsum.photos/1280/720?random=3" alt="image 3" class="d-block w-100" onclick="util.modal(this)">
+                                <img src="https://picsum.photos/1280/720?random=3" alt="image 3" class="d-block w-100" onclick="guest.modal(this)">
                             </div>
                         </div>
 
@@ -349,13 +349,13 @@ <h2 class="font-esthetic text-center py-2 m-0" style="font-size: 2.5rem;">Galeri
 
                         <div class="carousel-inner rounded-4">
                             <div class="carousel-item active">
-                                <img src="https://picsum.photos/1280/720?random=4" alt="image 4" class="d-block w-100" onclick="util.modal(this)">
+                                <img src="https://picsum.photos/1280/720?random=4" alt="image 4" class="d-block w-100" onclick="guest.modal(this)">
                             </div>
                             <div class="carousel-item">
-                                <img src="https://picsum.photos/1280/720?random=5" alt="image 5" class="d-block w-100" onclick="util.modal(this)">
+                                <img src="https://picsum.photos/1280/720?random=5" alt="image 5" class="d-block w-100" onclick="guest.modal(this)">
                             </div>
                             <div class="carousel-item">
-                                <img src="https://picsum.photos/1280/720?random=6" alt="image 6" class="d-block w-100" onclick="util.modal(this)">
+                                <img src="https://picsum.photos/1280/720?random=6" alt="image 6" class="d-block w-100" onclick="guest.modal(this)">
                             </div>
                         </div>
 
diff --git a/js/admin.js b/js/admin.js
index fe12a21..c912d90 100644
--- a/js/admin.js
+++ b/js/admin.js
@@ -251,9 +251,9 @@ export const admin = (() => {
         comment.init();
 
         try {
-            const jwt = session.decode();
-            if (!jwt || (jwt.exp ?? 0) < (Date.now() / 1000)) {
-                throw new Error('invalid token');
+            const exp = session.decode()?.exp;
+            if (!exp || exp < (Date.now() / 1000)) {
+                throw new Error('Invalid token');
             }
 
             getUserDetail();
diff --git a/js/app.js b/js/app.js
index 8b66d2e..636db42 100644
--- a/js/app.js
+++ b/js/app.js
@@ -5,7 +5,6 @@ import { theme } from './theme.js';
 import { audio } from './audio.js';
 import { offline } from './offline.js';
 import { comment } from './comment.js';
-import { progress } from './progress.js';
 import { pagination } from './pagination.js';
 
 document.addEventListener('DOMContentLoaded', () => {
@@ -13,7 +12,6 @@ document.addEventListener('DOMContentLoaded', () => {
     audio.init();
     guest.init();
     offline.init();
-    progress.init();
     pagination.init();
     window.AOS.init();
 
diff --git a/js/guest.js b/js/guest.js
index fd31456..148a722 100644
--- a/js/guest.js
+++ b/js/guest.js
@@ -145,6 +145,15 @@ export const guest = (() => {
         util.timeOut(animation, 1500);
     };
 
+    /**
+     * @param {HTMLImageElement} img
+     * @returns {void}
+     */
+    const modal = (img) => {
+        document.getElementById('show-modal-image').src = img.src;
+        bootstrap.Modal.getOrCreateInstance('#modal-image').show();
+    };
+
     /**
      * @returns {void}
      */
@@ -177,12 +186,14 @@ export const guest = (() => {
         if (document.body.getAttribute('data-key')?.length === 0) {
             document.getElementById('comment')?.remove();
             document.querySelector('a.nav-link[href="#comment"]')?.closest('li.nav-item')?.remove();
+            progress.init();
             return;
         }
 
         progress.add();
         progress.add();
         comment.init();
+        progress.init();
 
         session.guest()
             .then((res) => {
@@ -203,6 +214,7 @@ export const guest = (() => {
         init,
         open,
         name,
+        modal,
         closeInformation,
     };
 })();
\ No newline at end of file
diff --git a/js/theme.js b/js/theme.js
index 28fa8a5..928b25f 100644
--- a/js/theme.js
+++ b/js/theme.js
@@ -217,9 +217,9 @@ export const theme = (() => {
     };
 
     return {
-        change,
         init,
         spyTop,
+        change,
         isDarkMode,
         showButtonChangeTheme
     };
diff --git a/js/util.js b/js/util.js
index 5c03000..9e6a5e6 100644
--- a/js/util.js
+++ b/js/util.js
@@ -1,5 +1,3 @@
-import { bootstrap } from './bootstrap.js';
-
 export const util = (() => {
 
     /**
@@ -68,15 +66,6 @@ export const util = (() => {
      */
     const animate = (svg, timeout, classes) => timeOut(() => svg.classList.add(classes), timeout);
 
-    /**
-     * @param {HTMLImageElement} img
-     * @returns {void}
-     */
-    const modal = (img) => {
-        document.getElementById('show-modal-image').src = img.src;
-        bootstrap.Modal.getOrCreateInstance('#modal-image').show();
-    };
-
     const copy = async (button, message = null, timeout = 1500) => {
         const copy = button.getAttribute('data-copy');
 
@@ -127,7 +116,6 @@ export const util = (() => {
     return {
         open,
         copy,
-        modal,
         timeOut,
         animate,
         escapeHtml,