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;
  }
  }
 }