diff --git a/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.tsx b/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.tsx index 3d572815adfb..5879103f9a56 100644 --- a/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.tsx +++ b/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.tsx @@ -20,6 +20,7 @@ import {haveIChannelPermission} from 'mattermost-redux/selectors/entities/roles' import {getCurrentUserId, isCurrentUserGuestUser, getStatusForUserId, makeGetDisplayName} from 'mattermost-redux/selectors/entities/users'; import * as GlobalActions from 'actions/global_actions'; +import type {CreatePostOptions} from 'actions/post_actions'; import {actionOnGlobalItemsWithPrefix} from 'actions/storage'; import type {SubmitPostReturnType} from 'actions/views/create_comment'; import {removeDraft, updateDraft} from 'actions/views/drafts'; @@ -191,6 +192,7 @@ const AdvancedTextEditor = ({ const draftRef = useRef(draftFromStore); const storedDrafts = useRef>({}); const lastBlurAt = useRef(0); + const messageStatusRef = useRef(null); const [draft, setDraft] = useState(draftFromStore); const [caretPosition, setCaretPosition] = useState(draft.message.length); @@ -342,6 +344,19 @@ const AdvancedTextEditor = ({ isInEditMode, ); + const onSubmit = useCallback((submittingDraft?: PostDraft, schedulingInfo?: SchedulingInfo, options?: CreatePostOptions) => { + handleSubmit(submittingDraft, schedulingInfo, options); + if (!errorClass) { + const messageStatusElement = messageStatusRef.current; + const messageStatusInnerText = messageStatusElement?.textContent; + if (messageStatusInnerText === 'Message Sent') { + messageStatusElement!.textContent = 'Message Sent  '; + } else { + messageStatusElement!.textContent = 'Message Sent'; + } + } + }, [errorClass, handleSubmit]); + const handleCancel = useCallback(() => { // This resets the draft to the post's original content handleDraftChange({ @@ -367,8 +382,8 @@ const AdvancedTextEditor = ({ return; } - handleSubmit(); - }, [dispatch, draft, handleSubmit, isInEditMode, isRHS]); + onSubmit(); + }, [dispatch, draft, onSubmit, isInEditMode, isRHS]); const [handleKeyDown, postMsgKeyPress] = useKeyHandler( draft, @@ -393,8 +408,8 @@ const AdvancedTextEditor = ({ const handleSubmitWithEvent = useCallback((e: React.FormEvent) => { e.preventDefault(); - handleSubmit(); - }, [handleSubmit]); + onSubmit(); + }, [onSubmit]); const handlePostError = useCallback((err: React.ReactNode) => { setPostError(err); @@ -548,7 +563,9 @@ const AdvancedTextEditor = ({ draftRef.current = draft; }, [draft]); - const handleSubmitPostAndScheduledMessage = useCallback((schedulingInfo?: SchedulingInfo) => handleSubmit(undefined, schedulingInfo), [handleSubmit]); + const handleSubmitPostAndScheduledMessage = useCallback((schedulingInfo?: SchedulingInfo) => { + onSubmit(undefined, schedulingInfo); + }, [onSubmit]); // Set the draft from store when changing post or channels, and store the previous one useEffect(() => { @@ -837,6 +854,11 @@ const AdvancedTextEditor = ({ noArgumentHandleSubmit={handleSubmitWrapper} isInEditMode={isInEditMode} /> +
); };