Fix/30921: No error message when editing a chat

src/components/ExceededCommentLength.js

@@ -1,52 +1,23 @@
-import {debounce} from 'lodash';
 import PropTypes from 'prop-types';
-import React, {useEffect, useMemo, useState} from 'react';
-import {withOnyx} from 'react-native-onyx';
+import React from 'react';
 import useLocalize from '@hooks/useLocalize';
-import * as ReportUtils from '@libs/ReportUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
-import ONYXKEYS from '@src/ONYXKEYS';
 import Text from './Text';
 
 const propTypes = {
-    /** Report ID to get the comment from (used in withOnyx) */
-    // eslint-disable-next-line react/no-unused-prop-types
-    reportID: PropTypes.string.isRequired,
-
-    /** Text Comment */
-    comment: PropTypes.string,
-
-    /** Update UI on parent when comment length is exceeded */
-    onExceededMaxCommentLength: PropTypes.func.isRequired,
+    shouldShowError: PropTypes.bool.isRequired,
 };
 
-const defaultProps = {
-    comment: '',
-};
+const defaultProps = {};
 
 function ExceededCommentLength(props) {
     const styles = useThemeStyles();
     const {numberFormat, translate} = useLocalize();
-    const [commentLength, setCommentLength] = useState(0);
-    const updateCommentLength = useMemo(
-        () =>
-            debounce((comment, onExceededMaxCommentLength) => {
-                const newCommentLength = ReportUtils.getCommentLength(comment);
-                setCommentLength(newCommentLength);
-                onExceededMaxCommentLength(newCommentLength > CONST.MAX_COMMENT_LENGTH);
-            }, CONST.TIMING.COMMENT_LENGTH_DEBOUNCE_TIME),
-        [],
-    );
-
-    useEffect(() => {
-        updateCommentLength(props.comment, props.onExceededMaxCommentLength);
-    }, [props.comment, props.onExceededMaxCommentLength, updateCommentLength]);
 
-    if (commentLength <= CONST.MAX_COMMENT_LENGTH) {
+    if (!props.shouldShowError) {
         return null;
     }
-
     return (
         <Text
             style={[styles.textMicro, styles.textDanger, styles.chatItemComposeSecondaryRow, styles.mlAuto, styles.pl2]}
@@ -61,9 +32,4 @@ ExceededCommentLength.propTypes = propTypes;
 ExceededCommentLength.defaultProps = defaultProps;
 ExceededCommentLength.displayName = 'ExceededCommentLength';
 
-export default withOnyx({
-    comment: {
-        key: ({reportID}) => `${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT}${reportID}`,
-        initialValue: '',
-    },
-})(ExceededCommentLength);
+export default ExceededCommentLength;

src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js

@@ -76,6 +76,7 @@ function ComposerWithSuggestions({
     // Focus
     onFocus,
     onBlur,
+    onValueChange,
     // Composer
     isComposerFullSize,
     isMenuVisible,
@@ -525,6 +526,10 @@ function ComposerWithSuggestions({
         [blur, focus, prepareCommentAndResetComposer, replaceSelectionWithText],
     );
 
+    useEffect(() => {
+        onValueChange(value);
+    }, [onValueChange, value]);
+
     return (
         <>
             <View style={[containerComposeStyles(styles), styles.textInputComposeBorder]}>

src/pages/home/report/ReportActionCompose/ReportActionCompose.js

@@ -331,6 +331,21 @@ function ReportActionCompose({
         runOnJS(submitForm)();
     }, [isSendDisabled, resetFullComposerSize, submitForm, animatedRef, isReportReadyForDisplay]);
 
+    const handleValueChange = useCallback(
+        (value) => {
+            if (ReportUtils.getCommentLength(value) <= CONST.MAX_COMMENT_LENGTH) {
+                if (hasExceededMaxCommentLength) {
+                    setExceededMaxCommentLength(false);
+                }
+                return;
+            }
+            setExceededMaxCommentLength(true);
+        },
+        [hasExceededMaxCommentLength],
+    );
+
+    const handleValueChangeDebounce = useMemo(() => _.debounce(handleValueChange, 1500), [handleValueChange]);
+
     return (
         <View style={[shouldShowReportRecipientLocalTime && !lodashGet(network, 'isOffline') && styles.chatItemComposeWithFirstRow, isComposerFullSize && styles.chatItemFullComposeRow]}>
             <OfflineWithFeedback pendingAction={pendingAction}>
@@ -408,6 +423,7 @@ function ReportActionCompose({
                                         onBlur={onBlur}
                                         measureParentContainer={measureContainer}
                                         listHeight={listHeight}
+                                        onValueChange={handleValueChangeDebounce}
                                     />
                                     <ReportDropUI
                                         onDrop={(e) => {
@@ -444,10 +460,7 @@ function ReportActionCompose({
                     >
                         {!isSmallScreenWidth && <OfflineIndicator containerStyles={[styles.chatItemComposeSecondaryRow]} />}
                         <ReportTypingIndicator reportID={reportID} />
-                        <ExceededCommentLength
-                            reportID={reportID}
-                            onExceededMaxCommentLength={setExceededMaxCommentLength}
-                        />
+                        <ExceededCommentLength shouldShowError={hasExceededMaxCommentLength} />
                     </View>
                 </OfflineWithFeedback>
             </View>

src/pages/home/report/ReportActionItemMessageEdit.js

@@ -368,6 +368,25 @@ function ReportActionItemMessageEdit(props) {
      */
     const focus = focusComposerWithDelay(textInputRef.current);
 
+    const handleValueChange = useCallback(
+        (value) => {
+            if (ReportUtils.getCommentLength(value) <= CONST.MAX_COMMENT_LENGTH) {
+                if (hasExceededMaxCommentLength) {
+                    setHasExceededMaxCommentLength(false);
+                }
+                return;
+            }
+            setHasExceededMaxCommentLength(true);
+        },
+        [hasExceededMaxCommentLength],
+    );
+
+    const handleValueChangeDebounce = useMemo(() => _.debounce(handleValueChange, 1500), [handleValueChange]);
+
+    useEffect(() => {
+        handleValueChangeDebounce(draft);
+    }, [draft, handleValueChangeDebounce]);
+
     return (
         <>
             <View style={[styles.chatItemMessage, styles.flexRow]}>
@@ -469,11 +488,7 @@ function ReportActionItemMessageEdit(props) {
                     </View>
                 </View>
             </View>
-            <ExceededCommentLength
-                comment={draft}
-                reportID={props.reportID}
-                onExceededMaxCommentLength={(hasExceeded) => setHasExceededMaxCommentLength(hasExceeded)}
-            />
+            <ExceededCommentLength shouldShowError={hasExceededMaxCommentLength} />
         </>
     );
 }