feat: disable button when submitting comments (#120)

支持在提交评论或回复时，禁用提交按钮，防止重复提交。 Fixes #116 <img width="641" alt="image" src="https://github.com/halo-dev/plugin-comment-widget/assets/21301288/9dc636ea-8631-4be6-9386-e8e0b19dd433"> /kind feature ```release-note 支持在提交评论或回复时，禁用提交按钮，防止重复提交。 ```
halo-dev · May 4, 2024 · d49dbea · d49dbea
1 parent 220219d
commit d49dbea
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 17 deletions.
diff --git a/packages/comment-widget/src/base-form.ts b/packages/comment-widget/src/base-form.ts
@@ -1,6 +1,6 @@
 import './emoji-button';
-import { LitElement, css, html } from 'lit';
-import { Ref, createRef, ref } from 'lit/directives/ref.js';
+import { css, html, LitElement } from 'lit';
+import { createRef, Ref, ref } from 'lit/directives/ref.js';
 import {
   allowAnonymousCommentsContext,
   baseUrlContext,
@@ -9,11 +9,12 @@ import {
   kindContext,
   nameContext,
 } from './context';
-import { state } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import type { User } from '@halo-dev/api-client';
 import baseStyles from './styles/base';
 import { consume } from '@lit/context';
 import varStyles from './styles/var';
+import './icons/icon-loading';
 
 export class BaseForm extends LitElement {
   @consume({ context: baseUrlContext })
@@ -40,6 +41,9 @@ export class BaseForm extends LitElement {
   @state()
   name = '';
 
+  @property({ type: Boolean })
+  submitting = false;
+
   textareaRef: Ref<HTMLTextAreaElement> = createRef<HTMLTextAreaElement>();
 
   get customAccount() {
@@ -179,13 +183,20 @@ export class BaseForm extends LitElement {
             : ''}
           <div class="form__actions">
             <emoji-button @emoji-select=${this.onEmojiSelect}></emoji-button>
-            <button type="submit" class="form__button--submit">
-              <svg viewBox="0 0 24 24" width="1.2em" height="1.2em" class="h-full w-full">
-                <path
-                  fill="currentColor"
-                  d="M8 7.71L18 12L8 16.29v-3.34l7.14-.95L8 11.05V7.71M12 2a10 10 0 0 1 10 10a10 10 0 0 1-10 10A10 10 0 0 1 2 12A10 10 0 0 1 12 2m0 2a8 8 0 0 0-8 8a8 8 0 0 0 8 8a8 8 0 0 0 8-8a8 8 0 0 0-8-8Z"
-                ></path>
-              </svg>
+            <button .disabled=${this.submitting} type="submit" class="form__button--submit">
+              ${this.submitting
+                ? html` <icon-loading></icon-loading>`
+                : html` <svg
+                    viewBox="0 0 24 24"
+                    width="1.25em"
+                    height="1.25em"
+                    class="h-full w-full"
+                  >
+                    <path
+                      fill="currentColor"
+                      d="M8 7.71L18 12L8 16.29v-3.34l7.14-.95L8 11.05V7.71M12 2a10 10 0 0 1 10 10a10 10 0 0 1-10 10A10 10 0 0 1 2 12A10 10 0 0 1 12 2m0 2a8 8 0 0 0-8 8a8 8 0 0 0 8 8a8 8 0 0 0 8-8a8 8 0 0 0-8-8Z"
+                    ></path>
+                  </svg>`}
               提交评论
             </button>
           </div>

diff --git a/packages/comment-widget/src/comment-form.ts b/packages/comment-widget/src/comment-form.ts
@@ -1,4 +1,4 @@
-import { LitElement, html } from 'lit';
+import { html, LitElement } from 'lit';
 import { state } from 'lit/decorators.js';
 import { consume } from '@lit/context';
 import {
@@ -11,8 +11,8 @@ import {
   toastContext,
   versionContext,
 } from './context';
-import { CommentRequest, User, Comment } from '@halo-dev/api-client';
-import { Ref, createRef, ref } from 'lit/directives/ref.js';
+import { Comment, CommentRequest, User } from '@halo-dev/api-client';
+import { createRef, Ref, ref } from 'lit/directives/ref.js';
 import { BaseForm } from './base-form';
 import './base-form';
 import { ToastManager } from './lit-toast';
@@ -50,15 +50,24 @@ export class CommentForm extends LitElement {
   @state()
   toastManager: ToastManager | undefined;
 
+  @state()
+  submitting = false;
+
   baseFormRef: Ref<BaseForm> = createRef<BaseForm>();
 
   override render() {
-    return html`<base-form ${ref(this.baseFormRef)} @submit="${this.onSubmit}"></base-form>`;
+    return html` <base-form
+      .submitting=${this.submitting}
+      ${ref(this.baseFormRef)}
+      @submit="${this.onSubmit}"
+    ></base-form>`;
   }
 
   async onSubmit(e: CustomEvent) {
     e.preventDefault();
 
+    this.submitting = true;
+
     const data = e.detail;
 
     const { displayName, email, website, content } = data || {};
@@ -78,12 +87,14 @@ export class CommentForm extends LitElement {
 
     if (!this.currentUser && !this.allowAnonymousComments) {
       this.toastManager?.warn('请先登录');
+      this.submitting = false;
       return;
     }
 
     if (!this.currentUser && this.allowAnonymousComments) {
       if (!displayName || !email) {
         this.toastManager?.warn('请先登录或者完善信息');
+        this.submitting = false;
         return;
       } else {
         commentRequest.owner = {
@@ -121,6 +132,8 @@ export class CommentForm extends LitElement {
       if (error instanceof Error) {
         this.toastManager?.error(error.message);
       }
+    } finally {
+      this.submitting = false;
     }
   }
 }

diff --git a/packages/comment-widget/src/reply-form.ts b/packages/comment-widget/src/reply-form.ts
@@ -1,7 +1,7 @@
 import './base-form';
 import { CommentVo, Reply, ReplyRequest, ReplyVo, User } from '@halo-dev/api-client';
-import { LitElement, html } from 'lit';
-import { Ref, createRef, ref } from 'lit/directives/ref.js';
+import { html, LitElement } from 'lit';
+import { createRef, Ref, ref } from 'lit/directives/ref.js';
 import {
   allowAnonymousCommentsContext,
   baseUrlContext,
@@ -36,6 +36,9 @@ export class ReplyForm extends LitElement {
   @state()
   toastManager: ToastManager | undefined;
 
+  @state()
+  submitting = false;
+
   baseFormRef: Ref<BaseForm> = createRef<BaseForm>();
 
   override connectedCallback(): void {
@@ -48,11 +51,18 @@ export class ReplyForm extends LitElement {
   }
 
   override render() {
-    return html`<base-form ${ref(this.baseFormRef)} @submit="${this.onSubmit}"></base-form>`;
+    return html` <base-form
+      .submitting=${this.submitting}
+      ${ref(this.baseFormRef)}
+      @submit="${this.onSubmit}"
+    ></base-form>`;
   }
 
   async onSubmit(e: CustomEvent) {
     e.preventDefault();
+
+    this.submitting = true;
+
     const data = e.detail;
 
     const { displayName, email, website, content } = data || {};
@@ -70,12 +80,14 @@ export class ReplyForm extends LitElement {
 
     if (!this.currentUser && !this.allowAnonymousComments) {
       this.toastManager?.warn('请先登录');
+      this.submitting = false;
       return;
     }
 
     if (!this.currentUser && this.allowAnonymousComments) {
       if (!displayName || !email) {
         this.toastManager?.warn('请先登录或者完善信息');
+        this.submitting = false;
         return;
       } else {
         replyRequest.owner = {
@@ -116,6 +128,8 @@ export class ReplyForm extends LitElement {
       if (error instanceof Error) {
         this.toastManager?.error(error.message);
       }
+    } finally {
+      this.submitting = false;
     }
   }
 }