disabled btn on msg sending

dm3-org · Sep 20, 2024 · 06421b7 · 06421b7
1 parent efe7592
commit 06421b7
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/packages/messenger-widget/src/components/MessageInputField/MessageInputField.tsx b/packages/messenger-widget/src/components/MessageInputField/MessageInputField.tsx
@@ -1,4 +1,4 @@
-import { useContext, useEffect } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import { AuthContext } from '../../context/AuthContext';
 import { ConversationContext } from '../../context/ConversationContext';
 import { MessageContext } from '../../context/MessageContext';
@@ -14,6 +14,7 @@ export function MessageInputField(props: MessageDataProps) {
     const { addMessage } = useContext(MessageContext);
     const { setMessageView, messageView } = useContext(UiViewContext);
     const { setLastMessageAction } = useContext(ModalContext);
+    const [isSendBtnDisabled, setIsSendBtnDisabled] = useState<boolean>(false);
 
     const resetMessageView = {
         actionType: MessageActionType.NONE,
@@ -31,6 +32,10 @@ export function MessageInputField(props: MessageDataProps) {
 
     async function submit(event: React.FormEvent<HTMLFormElement>) {
         event.preventDefault();
+        if (isSendBtnDisabled) {
+            return;
+        }
+        setIsSendBtnDisabled(true);
         await onSubmitMessage(
             messageView,
             setMessageView,
@@ -41,6 +46,7 @@ export function MessageInputField(props: MessageDataProps) {
             account!,
             selectedContact!,
         );
+        setIsSendBtnDisabled(false);
     }
 
     // Focus on input field when user selects a msg to EEDIT or REPLY

diff --git a/packages/messenger-widget/src/components/SendMessage/SendMessage.tsx b/packages/messenger-widget/src/components/SendMessage/SendMessage.tsx
@@ -1,5 +1,5 @@
 import './SendMessage.css';
-import { useContext } from 'react';
+import { useContext, useState } from 'react';
 import sendBtnIcon from '../../assets/images/send-btn.svg';
 import { AuthContext } from '../../context/AuthContext';
 import { ConversationContext } from '../../context/ConversationContext';
@@ -15,8 +15,13 @@ export function SendMessage(props: MessageDataProps) {
     const { selectedContact } = useContext(ConversationContext);
     const { messageView, setMessageView } = useContext(UiViewContext);
     const { setLastMessageAction } = useContext(ModalContext);
+    const [isSendBtnDisabled, setIsSendBtnDisabled] = useState<boolean>(false);
 
     async function submit() {
+        if (isSendBtnDisabled) {
+            return;
+        }
+        setIsSendBtnDisabled(true);
         await onSubmitMessage(
             messageView,
             setMessageView,
@@ -27,6 +32,7 @@ export function SendMessage(props: MessageDataProps) {
             account!,
             selectedContact!,
         );
+        setIsSendBtnDisabled(false);
     }
 
     return (