From 818b28bba3f747f99a4ffc01572debcd43e9f2b3 Mon Sep 17 00:00:00 2001
From: dewanakl <dewanakretarta29@gmail.com>
Date: Thu, 29 Aug 2024 10:11:02 +0700
Subject: [PATCH] feat: improve code

---
 js/card.js    |  2 +-
 js/comment.js | 13 +++++--------
 js/dto.js     | 19 ++++++++++++++++++-
 js/request.js | 15 +++++++++++++--
 4 files changed, 37 insertions(+), 12 deletions(-)

diff --git a/js/card.js b/js/card.js
index 8b2fc513..3a8a3ead 100644
--- a/js/card.js
+++ b/js/card.js
@@ -157,7 +157,7 @@ export const card = (() => {
             </div>
             ${renderTracker(comment)}
             ${renderButton(comment)}
-            ${comment.comments.map((c) => renderInnerContent(c)).join('')}
+            <div id="reply-content-${comment.uuid}">${comment.comments.map((c) => renderInnerContent(c)).join('')}</div>
         </div>`;
     };
 
diff --git a/js/comment.js b/js/comment.js
index ab50f453..31226de9 100644
--- a/js/comment.js
+++ b/js/comment.js
@@ -176,7 +176,7 @@ export const comment = (() => {
         const response = await request(HTTP_POST, '/api/comment')
             .token(session.get('token'))
             .body(dto.postCommentRequest(id, nameValue, presence ? presence.value === "1" : true, form.value))
-            .send()
+            .send(dto.postCommentResponse)
             .then((res) => res, () => null);
 
         if (name) {
@@ -212,12 +212,10 @@ export const comment = (() => {
                 return;
             }
 
-            const dtoPostComment = dto.postCommentResponse(response.data);
-            dtoPostComment.is_admin = session.get('token')?.split('.').length === 3;
-            const newComment = card.renderContent(dtoPostComment);
+            response.data.is_admin = session.get('token')?.split('.').length === 3;
 
             document.getElementById('comments').lastElementChild.remove();
-            document.getElementById('comments').innerHTML = newComment + document.getElementById('comments').innerHTML;
+            document.getElementById('comments').innerHTML = card.renderContent(response.data) + document.getElementById('comments').innerHTML;
             document.getElementById('comments').scrollIntoView({ behavior: 'smooth' });
         }
 
@@ -228,9 +226,8 @@ export const comment = (() => {
             changeButton(id, false);
             document.getElementById(`inner-${id}`).remove();
 
-            const dtoPostComment = dto.postCommentResponse(response.data);
-            dtoPostComment.is_admin = session.get('token')?.split('.').length === 3;
-            document.getElementById(`${id}`).insertAdjacentHTML('beforeend', card.renderInnerContent(dtoPostComment));
+            response.data.is_admin = session.get('token')?.split('.').length === 3;
+            document.getElementById(`reply-content-${id}`).insertAdjacentHTML('beforeend', card.renderInnerContent(response.data));
 
             const containerDiv = document.getElementById(`button-${id}`);
             const anchorTag = containerDiv.querySelector('a');
diff --git a/js/dto.js b/js/dto.js
index 07fcbd55..70163af3 100644
--- a/js/dto.js
+++ b/js/dto.js
@@ -1,11 +1,27 @@
 export const dto = (() => {
+    /**
+     * Generates a base response object containing code, data, and error properties.
+     * 
+     * @template T
+     * @param {number} code
+     * @param {T} data
+     * @param {string[]=} error
+     * @returns {{code: number, data: T, error?: string[]}} The response object containing the code, data, and error.
+     */
+    const baseResponse = (code, data, error) => {
+        return {
+            code,
+            data,
+            error,
+        };
+    };
+
     const likeCommentResponse = ((love = 0) => {
         return {
             love,
         };
     });
 
-
     const postCommentResponse = (({ uuid, own, name, presence, comment, created_at }) => {
         let is_admin;
         let comments = [];
@@ -41,6 +57,7 @@ export const dto = (() => {
     });
 
     return {
+        baseResponse,
         likeCommentResponse,
         postCommentResponse,
         commentShowMore,
diff --git a/js/request.js b/js/request.js
index 1d159cc1..baa3f368 100644
--- a/js/request.js
+++ b/js/request.js
@@ -1,3 +1,5 @@
+import { dto } from "./dto.js";
+
 export const HTTP_GET = 'GET';
 export const HTTP_POST = 'POST';
 export const HTTP_PUT = 'PUT';
@@ -20,7 +22,12 @@ export const request = (method, path) => {
     }
 
     return {
-        send() {
+        /**
+         * @template T
+         * @param {((data: any) => T)=} transform
+         * @returns {Promise<ReturnType<typeof dto.baseResponse<T>>>}
+         */
+        send(transform = null) {
             return fetch(url + path, req)
                 .then((res) => res.json())
                 .then((res) => {
@@ -28,7 +35,11 @@ export const request = (method, path) => {
                         throw res.error[0];
                     }
 
-                    return res;
+                    if (transform) {
+                        res.data = transform(res.data);
+                    }
+
+                    return dto.baseResponse(res.code, res.data, res.error);
                 })
                 .catch((err) => {
                     alert(err);