reuse modal to implement long message error modal

RocketChat · Jan 19, 2024 · 42e8a29 · 42e8a29
1 parent fed04d5
commit 42e8a29
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 51 deletions.
diff --git a/packages/react/src/components/ChatInput/ChatInput.js b/packages/react/src/components/ChatInput/ChatInput.js
@@ -23,7 +23,7 @@ import { CommandsList } from '../CommandList';
 import { ActionButton } from '../ActionButton';
 import useComponentOverrides from '../../theme/useComponentOverrides';
 import { useToastBarDispatch } from '../../hooks/useToastBarDispatch';
-import ErrorModal from './ErrorModal';
+import { Modal } from '../Modal';
 
 const editingMessageCss = css`
   background-color: #fff8e0;
@@ -85,7 +85,7 @@ const ChatInput = ({ scrollToBottom }) => {
   const setIsLoginModalOpen = loginModalStore(
     (state) => state.setIsLoginModalOpen
   );
-  const [errorModal, setErrorModal] = useState("Message too long");
+  const [errorModal, setErrorModal] = useState(false);
   const [isAttachmentMode, setIsAttachmentMode] = useState(false);
 
 
@@ -121,16 +121,17 @@ const ChatInput = ({ scrollToBottom }) => {
   const openLoginModal = () => {
     setIsLoginModalOpen(true);
   };
-  const openErrorModal = (errorMessage) => {
-    setErrorModal(errorMessage);
+  const openErrorModal = () => {
+    setErrorModal(true);
   };
   const closeErrorModal = () => {
-    setErrorModal(null);
+    setErrorModal(false);
   };
 
   useEffect(() => {
     if(isAttachmentMode) sendMessage();
   }, [isAttachmentMode]);
+
   const handleConvertToAttachment = () => {
     setIsAttachmentMode(true);
     closeErrorModal();
@@ -178,7 +179,7 @@ const ChatInput = ({ scrollToBottom }) => {
 
     const msgMaxLength = 500;
     if (message.length > msgMaxLength) {
-      openErrorModal('Message is too long!');
+      openErrorModal();
       return;
     }
 
@@ -530,7 +531,24 @@ const ChatInput = ({ scrollToBottom }) => {
         )}
       </Box>
       {errorModal && (
-        <ErrorModal message={errorModal} onClose={closeErrorModal} onConfirm={handleConvertToAttachment} />
+        <Modal css={css`padding: 1em;`}>
+          <Modal.Header>
+            <Modal.Title>
+              <Icon name="report" size="1.25rem" /> 
+              Message Too Long!
+            </Modal.Title>
+            <Modal.Close onClick={closeErrorModal} />
+          </Modal.Header>
+          <Modal.Content css={css`margin: 1em;`}> Send it as attachment instead? </Modal.Content>
+          <Modal.Footer>
+            <Button color="secondary" onClick={closeErrorModal}>
+              Cancel
+            </Button>
+            <Button onClick={handleConvertToAttachment} color="primary">
+              Ok
+            </Button>
+          </Modal.Footer>
+        </Modal>
       )}
     </Box>
   );

diff --git a/packages/react/src/components/ChatInput/ErrorModal.js b/packages/react/src/components/ChatInput/ErrorModal.js