put most logic to useHandleExceedMaxCommentLength

Expensify · Nov 21, 2024 · bcbde08 · bcbde08
1 parent faf4370
commit bcbde08
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 35 deletions.
diff --git a/src/components/ExceededCommentLength.tsx b/src/components/ExceededCommentLength.tsx
@@ -5,10 +5,10 @@ import CONST from '@src/CONST';
 import Text from './Text';
 
 type ExceededCommentLengthProps = {
-    shouldUseTitleLimit?: boolean;
+    maxCommentLength?: number;
 };
 
-function ExceededCommentLength({shouldUseTitleLimit}: ExceededCommentLengthProps) {
+function ExceededCommentLength({maxCommentLength = CONST.MAX_COMMENT_LENGTH}: ExceededCommentLengthProps) {
     const styles = useThemeStyles();
     const {numberFormat, translate} = useLocalize();
 
@@ -17,7 +17,7 @@ function ExceededCommentLength({shouldUseTitleLimit}: ExceededCommentLengthProps
             style={[styles.textMicro, styles.textDanger, styles.chatItemComposeSecondaryRow, styles.mlAuto, styles.pl2]}
             numberOfLines={1}
         >
-            {translate('composer.commentExceededMaxLength', { formattedMaxLength: numberFormat(shouldUseTitleLimit ? CONST.TITLE_CHARACTER_LIMIT : CONST.MAX_COMMENT_LENGTH) })}
+            {translate('composer.commentExceededMaxLength', { formattedMaxLength: numberFormat(maxCommentLength) })}
         </Text>
     );
 }

diff --git a/src/hooks/useHandleExceedMaxCommentLength.ts b/src/hooks/useHandleExceedMaxCommentLength.ts
@@ -4,25 +4,43 @@ import * as ReportUtils from '@libs/ReportUtils';
 import type {ParsingDetails} from '@libs/ReportUtils';
 import CONST from '@src/CONST';
 
-const useHandleExceedMaxCommentLength = () => {
+const useHandleExceedMaxCommentLength = (enableTaskTitleValidation : boolean = false) => {
     const [hasExceededMaxCommentLength, setHasExceededMaxCommentLength] = useState(false);
+    const [isTaskTitle, setIsTaskTitle] = useState(false);
+    const [maxCommentLength, setMaxCommentLength] = useState(isTaskTitle ? CONST.TITLE_CHARACTER_LIMIT : CONST.MAX_COMMENT_LENGTH);
 
     const handleValueChange = useCallback(
         (value: string, parsingDetails?: ParsingDetails) => {
+            if (enableTaskTitleValidation) {
+                const match = value.match(CONST.REGEX.TASK_TITLE_WITH_OPTONAL_SHORT_MENTION);
+                if (match) {
+                    const title = match[3] ? match[3].trim().replace(/\n/g, ' ') : undefined;
+                    setHasExceededMaxCommentLength(title ? title.length > CONST.TITLE_CHARACTER_LIMIT : false);
+                    setMaxCommentLength(CONST.TITLE_CHARACTER_LIMIT);
+                    setIsTaskTitle(true);
+                    return;
+                }
+            }
+
             if (ReportUtils.getCommentLength(value, parsingDetails) <= CONST.MAX_COMMENT_LENGTH) {
                 if (hasExceededMaxCommentLength) {
                     setHasExceededMaxCommentLength(false);
                 }
+                setMaxCommentLength(CONST.MAX_COMMENT_LENGTH);
+                setIsTaskTitle(false);
                 return;
             }
             setHasExceededMaxCommentLength(true);
+            setMaxCommentLength(CONST.MAX_COMMENT_LENGTH);
+            setIsTaskTitle(false);
         },
-        [hasExceededMaxCommentLength],
+        [hasExceededMaxCommentLength, enableTaskTitleValidation],
     );
 
-    const validateCommentMaxLength = useMemo(() => debounce(handleValueChange, 1500, {leading: true}), [handleValueChange]);
+    // Use a shorter debounce time for task title validation to provide quicker feedback due to simpler logic
+    const validateCommentMaxLength = useMemo(() => debounce(handleValueChange, isTaskTitle ? 100 : 1500, { leading: true }), [handleValueChange]);
 
-    return {hasExceededMaxCommentLength, validateCommentMaxLength};
+    return {hasExceededMaxCommentLength, validateCommentMaxLength, maxCommentLength};
 };
 
-export default useHandleExceedMaxCommentLength;
+export default useHandleExceedMaxCommentLength;
diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx b/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx
@@ -171,8 +171,7 @@ function ReportActionCompose({
      * Updates the composer when the comment length is exceeded
      * Shows red borders and prevents the comment from being sent
      */
-    const {hasExceededMaxCommentLength, validateCommentMaxLength} = useHandleExceedMaxCommentLength();
-    const [hasExceededTaskTitleLength, setHasExceededTaskTitleLength] = useState(false);
+    const {hasExceededMaxCommentLength, validateCommentMaxLength, maxCommentLength} = useHandleExceedMaxCommentLength(true);
 
     const suggestionsRef = useRef<SuggestionsRef>(null);
     const composerRef = useRef<ComposerRef>();
@@ -334,7 +333,7 @@ function ReportActionCompose({
 
     const hasReportRecipient = !isEmptyObject(reportRecipient);
 
-    const isSendDisabled = isCommentEmpty || isBlockedFromConcierge || !!disabled || hasExceededMaxCommentLength || hasExceededTaskTitleLength;
+    const isSendDisabled = isCommentEmpty || isBlockedFromConcierge || !!disabled || hasExceededMaxCommentLength;
 
     // Note: using JS refs is not well supported in reanimated, thus we need to store the function in a shared value
     // useSharedValue on web doesn't support functions, so we need to wrap it in an object.
@@ -395,26 +394,14 @@ function ReportActionCompose({
         ],
     );
 
-    const onValueChange = useDebounce(
-        useCallback(
-            (value: string) => {
-                if (value.length === 0 && isComposerFullSize) {
-                    Report.setIsComposerFullSize(reportID, false);
-                }
-
-                const match = value.match(CONST.REGEX.TASK_TITLE_WITH_OPTONAL_SHORT_MENTION);
-                if (!match) {
-                    setHasExceededTaskTitleLength(false);
-                    validateCommentMaxLength(value, { reportID });
-                    return;
-                }
-
-                let title = match[3] ? match[3].trim().replace(/\n/g, ' ') : undefined;
-                setHasExceededTaskTitleLength(title ? title.length > CONST.TITLE_CHARACTER_LIMIT : false);
-            },
-            [isComposerFullSize, reportID, validateCommentMaxLength],
-        ),
-        100,
+    const onValueChange = useCallback(
+        (value: string) => {
+            if (value.length === 0 && isComposerFullSize) {
+                Report.setIsComposerFullSize(reportID, false);
+            }
+            validateCommentMaxLength(value, {reportID});
+        },
+        [isComposerFullSize, reportID, validateCommentMaxLength],
     );
 
     return (
@@ -449,15 +436,15 @@ function ReportActionCompose({
                                 styles.flexRow,
                                 styles.chatItemComposeBox,
                                 isComposerFullSize && styles.chatItemFullComposeBox,
-                                (hasExceededMaxCommentLength || hasExceededTaskTitleLength) && styles.borderColorDanger,
+                                hasExceededMaxCommentLength && styles.borderColorDanger,
                             ]}
                         >
                             <AttachmentModal
                                 headerTitle={translate('reportActionCompose.sendAttachment')}
                                 onConfirm={addAttachment}
                                 onModalShow={() => setIsAttachmentPreviewActive(true)}
                                 onModalHide={onAttachmentPreviewClose}
-                                shouldDisableSendButton={hasExceededMaxCommentLength || hasExceededTaskTitleLength}
+                                shouldDisableSendButton={hasExceededMaxCommentLength}
                             >
                                 {({displayFileInModal}) => (
                                     <>
@@ -476,7 +463,7 @@ function ReportActionCompose({
                                             onAddActionPressed={onAddActionPressed}
                                             onItemSelected={onItemSelected}
                                             actionButtonRef={actionButtonRef}
-                                            shouldDisableAttachmentItem={hasExceededMaxCommentLength || hasExceededTaskTitleLength}
+                                            shouldDisableAttachmentItem={hasExceededMaxCommentLength}
                                         />
                                         <ComposerWithSuggestions
                                             ref={(ref) => {
@@ -562,7 +549,7 @@ function ReportActionCompose({
                     >
                         {!shouldUseNarrowLayout && <OfflineIndicator containerStyles={[styles.chatItemComposeSecondaryRow]} />}
                         <ReportTypingIndicator reportID={reportID} />
-                        {(hasExceededMaxCommentLength || hasExceededTaskTitleLength) && <ExceededCommentLength shouldUseTitleLimit={hasExceededTaskTitleLength} />}
+                        {hasExceededMaxCommentLength && <ExceededCommentLength maxCommentLength={maxCommentLength}/>}
                     </View>
                 </OfflineWithFeedback>
                 {!isSmallScreenWidth && (