From 06421b7b06583f989a4d2e7487a255a5b4947f71 Mon Sep 17 00:00:00 2001
From: Bhupesh-MS <mfsi.bhupeshd@gmail.com>
Date: Fri, 20 Sep 2024 14:40:15 +0530
Subject: [PATCH] disabled btn on msg sending

---
 .../components/MessageInputField/MessageInputField.tsx    | 8 +++++++-
 .../src/components/SendMessage/SendMessage.tsx            | 8 +++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/messenger-widget/src/components/MessageInputField/MessageInputField.tsx b/packages/messenger-widget/src/components/MessageInputField/MessageInputField.tsx
index 672f3ac4b..e16d61364 100644
--- 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
index cd49f7eae..61d4ce27c 100644
--- 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 (