Refactor code

dragomano · Jan 1, 2025 · 8d39764 · 8d39764
1 parent 5f303ac
commit 8d39764
Show file tree

Hide file tree

Showing 29 changed files with 203 additions and 257 deletions.
diff --git a/configs/vite.comments.js b/configs/vite.comments.js
@@ -18,6 +18,8 @@ export default defineConfig({
     },
   },
   plugins: [
-    svelte(),
+    svelte({
+      emitCss: false,
+    }),
   ],
 });
diff --git a/package.json b/package.json
@@ -21,7 +21,9 @@
     "sortablejs": "^1.15.6",
     "svelecte": "^5.1.1",
     "svelte": "^5.16.0",
+    "svelte-check": "^4.1.1",
     "svelte-i18n": "^4.0.1",
+    "svelte-showdown": "^0.2.0",
     "svelte-toggle": "^4.0.1",
     "vanilla-lazyload": "^19.1.3",
     "virtual-select-plugin": "^1.0.46",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/resources/components/comments/CommentItem.svelte b/resources/components/comments/CommentItem.svelte
@@ -1,6 +1,5 @@
 <script>
   import { _ } from 'svelte-i18n';
-  import { get } from 'svelte/store';
   import { fade } from 'svelte/transition';
   import { useUserStore } from '../../js/stores.js';
   import { CommentItem, EditForm, ReplyForm, MarkdownPreview } from './index.js';
@@ -12,11 +11,12 @@
    *     can_edit: boolean,
    *     authorial: boolean,
    *     poster: {
+   *       name: string,
    *       avatar: string
    *     },
    *     extra_buttons: array,
    *     human_date: string,
-   *     published_at: string
+   *     published_at: number
    *   }
    * }}
    */
@@ -26,7 +26,7 @@
   let editMode = $state(false);
   let parent = $state();
 
-  const { id: userId, is_admin: isAdmin } = get(useUserStore);
+  const { id: userId, is_admin: isAdmin } = $useUserStore;
   const showReplyButton = $derived(level < 5 && userId !== comment.poster.id);
   const showRemoveButton = $derived(comment.poster.id === userId || isAdmin);
   const canEdit = $derived(
@@ -35,7 +35,7 @@
       comment.poster.id === userId
   );
 
-  const add = (newComment) => {
+  const submit = (newComment) => {
     addComment(newComment);
     replyMode = false;
   };
@@ -46,9 +46,7 @@
     editMode = false;
   };
 
-  const remove = (id) => {
-    removeComment(id);
-  };
+  const itemType = 'https://schema.org/Comment';
 </script>
 
 <li
@@ -60,7 +58,7 @@
   data-author={comment.poster.id}
   itemprop="comment"
   itemscope
-  itemtype="https://schema.org/Comment"
+  itemtype={itemType}
 >
   <div class="comment_wrapper" id={`comment=${comment.id}`}>
     <div class="comment_avatar">
@@ -98,20 +96,23 @@
                 {$_('reply')}
               </Button>
             {/if}
+
             {#if canEdit}
               <Button onclick={() => (editMode = true)} tag="span" icon="edit">
                 {$_('modify')}
               </Button>
             {/if}
+
             {#each comment.extra_buttons as button}
               {@html button}
             {/each}
+
             {#if showRemoveButton}
               <Button
                 class={isHover ? 'error' : undefined}
                 onmouseover={() => (isHover = true)}
                 onmouseleave={() => (isHover = false)}
-                onclick={() => remove(parent.dataset.id)}
+                onclick={() => removeComment(parent.dataset.id)}
                 tag="span"
                 icon="remove"
               >
@@ -124,7 +125,7 @@
     </div>
 
     {#if replyMode}
-      <ReplyForm parent={parent.dataset} submit={add}>
+      <ReplyForm parent={parent.dataset} {submit}>
         <Button class="active" onclick={() => (replyMode = false)}>
           {$_('modify_cancel')}
         </Button>
@@ -138,9 +139,9 @@
             comment={reply}
             index={index + 1}
             level={level + 1}
-            addComment={add}
+            addComment={submit}
             updateComment={update}
-            removeComment={remove}
+            {removeComment}
           />
         {/each}
       </ul>

diff --git a/resources/components/comments/CommentList.svelte b/resources/components/comments/CommentList.svelte
@@ -1,29 +1,48 @@
 <script>
-  import { onMount, onDestroy } from 'svelte';
-  import { get } from 'svelte/store';
   import { _ } from 'svelte-i18n';
   import { useIconStore, useSettingStore, useLocalStorage } from '../../js/stores.js';
   import { api, helper } from '../../js/helpers.js';
-  import { CommentItem, PurePagination, ReplyForm } from './index.js';
+  import { CommentItem, Pagination, ReplyForm } from './index.js';
 
-  const { comments: commentsIcon } = get(useIconStore);
-  const { lp_comment_sorting } = get(useSettingStore);
+  const { comments: commentsIcon } = $useIconStore;
+  const { lp_comment_sorting } = $useSettingStore;
 
+  /**
+   * @typedef {Object} CommentData
+   * @property {number} id - Unique identifier of the comment
+   * @property {string} message - Text of the comment
+   * @property {number|null} parent_id - ID of the parent comment, if any
+   */
   let comments = $state([]);
   let parentsCount = $state(0);
   let total = $state(0);
   let limit = $state(0);
   let start = useLocalStorage('lpCommentsStart', 0);
-  let startIndex = get(start);
+  let startIndex = $start;
+
+  $effect(() => {
+    startIndex = $start;
+
+    setCommentHash();
+    getComments();
+  })
 
   const totalOnPage = $derived(comments.length);
   const showBottomPagination = $derived(totalOnPage > 5);
   const showReplyFormOnTop = lp_comment_sorting === '1';
 
+  /**
+   * @typedef {Object} ApiResponse
+   * @property {number} total - Total number of comments
+   * @property {number} parentsCount - Number of parent comments
+   * @property {number} limit - Number of comments per page
+   * @property {CommentData[]} comments - Array of comments
+   * @returns {Promise<ApiResponse>}
+   */
   const getComments = async () => {
     const data = await api.get(startIndex);
 
-    if (!data.total) return;
+    if (!data.total) return null;
 
     comments = helper.getSortedTree(helper.getData(data.comments), showReplyFormOnTop);
     parentsCount = data.parentsCount;
@@ -89,19 +108,6 @@
       window.history.replaceState({}, '', window.location.href.split('#')[0]);
     }
   };
-
-  const unsubscribe = start.subscribe((value) => {
-    startIndex = value;
-
-    setCommentHash();
-    getComments();
-  });
-
-  onDestroy(() => {
-    unsubscribe();
-  });
-
-  onMount(() => getComments());
 </script>
 
 <aside class="comments">
@@ -116,7 +122,7 @@
       <ReplyForm submit={addComment} />
     {/if}
 
-    <PurePagination bind:start={$start} totalItems={parentsCount} itemsPerPage={limit} />
+    <Pagination bind:start={$start} totalItems={parentsCount} itemsPerPage={limit} />
 
     {#if comments.length}
       <ul class="comment_list row">
@@ -127,7 +133,7 @@
     {/if}
 
     {#if showBottomPagination}
-      <PurePagination bind:start={$start} totalItems={parentsCount} itemsPerPage={limit} />
+      <Pagination bind:start={$start} totalItems={parentsCount} itemsPerPage={limit} />
     {/if}
 
     {#if !showReplyFormOnTop}