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/hooks/useHandleExceedMaxCommentLength.ts

@@ -0,0 +1,27 @@
+import _ from 'lodash';
+import {useCallback, useMemo, useState} from 'react';
+import * as ReportUtils from '@libs/ReportUtils';
+import CONST from '@src/CONST';
+
+const useHandleExceedMaxCommentLength = () => {
+    const [hasExceededMaxCommentLength, setHasExceededMaxCommentLength] = useState(false);
+
+    const handleValueChange = useCallback(
+        (value: string) => {
+            if (ReportUtils.getCommentLength(value) <= CONST.MAX_COMMENT_LENGTH) {
+                if (hasExceededMaxCommentLength) {
+                    setHasExceededMaxCommentLength(false);
+                }
+                return;
+            }
+            setHasExceededMaxCommentLength(true);
+        },
+        [hasExceededMaxCommentLength],
+    );
+
+    const handleValueChangeDebounce = useMemo(() => _.debounce(handleValueChange, 1500), [handleValueChange]);
+
+    return {hasExceededMaxCommentLength, handleValueChangeDebounce};
+};
+
+export default useHandleExceedMaxCommentLength;

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

@@ -13,6 +13,7 @@ import OfflineIndicator from '@components/OfflineIndicator';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import {usePersonalDetails, withNetwork} from '@components/OnyxProvider';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
+import useHandleExceedMaxCommentLength from '@hooks/useHandleExceedMaxCommentLength';
 import useLocalize from '@hooks/useLocalize';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import canFocusInputOnScreenFocus from '@libs/canFocusInputOnScreenFocus';
@@ -144,7 +145,7 @@ function ReportActionCompose({
      * Updates the composer when the comment length is exceeded
      * Shows red borders and prevents the comment from being sent
      */
-    const [hasExceededMaxCommentLength, setExceededMaxCommentLength] = useState(false);
+    const {handleValueChangeDebounce, hasExceededMaxCommentLength} = useHandleExceedMaxCommentLength();
 
     const suggestionsRef = useRef(null);
     const composerRef = useRef(null);
@@ -408,6 +409,7 @@ function ReportActionCompose({
                                         onBlur={onBlur}
                                         measureParentContainer={measureContainer}
                                         listHeight={listHeight}
+                                        onValueChange={handleValueChangeDebounce}
                                     />
                                     <ReportDropUI
                                         onDrop={(e) => {
@@ -444,10 +446,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

@@ -13,6 +13,7 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import refPropTypes from '@components/refPropTypes';
 import Tooltip from '@components/Tooltip';
+import useHandleExceedMaxCommentLength from '@hooks/useHandleExceedMaxCommentLength';
 import useKeyboardState from '@hooks/useKeyboardState';
 import useLocalize from '@hooks/useLocalize';
 import useReportScrollManager from '@hooks/useReportScrollManager';
@@ -115,7 +116,7 @@ function ReportActionItemMessageEdit(props) {
     });
     const [selection, setSelection] = useState(getInitialSelection);
     const [isFocused, setIsFocused] = useState(false);
-    const [hasExceededMaxCommentLength, setHasExceededMaxCommentLength] = useState(false);
+    const {handleValueChangeDebounce, hasExceededMaxCommentLength} = useHandleExceedMaxCommentLength();
     const [modal, setModal] = useState(false);
     const [onyxFocused, setOnyxFocused] = useState(false);
 
@@ -368,6 +369,10 @@ function ReportActionItemMessageEdit(props) {
      */
     const focus = focusComposerWithDelay(textInputRef.current);
 
+    useEffect(() => {
+        handleValueChangeDebounce(draft);
+    }, [draft, handleValueChangeDebounce]);
+
     return (
         <>
             <View style={[styles.chatItemMessage, styles.flexRow]}>
@@ -469,11 +474,7 @@ function ReportActionItemMessageEdit(props) {
                     </View>
                 </View>
             </View>
-            <ExceededCommentLength
-                comment={draft}
-                reportID={props.reportID}
-                onExceededMaxCommentLength={(hasExceeded) => setHasExceededMaxCommentLength(hasExceeded)}
-            />
+            <ExceededCommentLength shouldShowError={hasExceededMaxCommentLength} />
         </>
     );
 }