Revert "Revert "[Composer] Add logs in Composer-related logic to trac…

…k bug with disappearing text"" This reverts commit 163e2fc.
Expensify · Jun 24, 2024 · 2322732 · 2322732
1 parent c801580
commit 2322732
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 0 deletions.
diff --git a/src/components/Composer/index.tsx b/src/components/Composer/index.tsx
@@ -20,6 +20,7 @@ import updateIsFullComposerAvailable from '@libs/ComposerUtils/updateIsFullCompo
 import * as EmojiUtils from '@libs/EmojiUtils';
 import * as FileUtils from '@libs/fileDownload/FileUtils';
 import isEnterWhileComposition from '@libs/KeyboardShortcut/isEnterWhileComposition';
+import Log from '@libs/Log';
 import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManager';
 import CONST from '@src/CONST';
 import type {ComposerProps} from './types';
@@ -106,11 +107,22 @@ function Composer(
     const isScrollBarVisible = useIsScrollBarVisible(textInput, value ?? '');
     const [prevScroll, setPrevScroll] = useState<number | undefined>();
 
+    // Those useEffects track changes of `shouldClear` and `onClear` independently.
+    useEffect(() => {
+        Log.info('[Composer] `shouldClear` value changed', true, {shouldClear});
+    }, [shouldClear]);
+
+    useEffect(() => {
+        Log.info('[Composer] `onClear` value changed', true, {shouldClear});
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [onClear]);
+
     useEffect(() => {
         if (!shouldClear) {
             return;
         }
         textInput.current?.clear();
+        Log.info('[Composer] `textInput` cleared', true, {shouldClear});
         onClear();
     }, [shouldClear, onClear]);
 

diff --git a/...pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx b/...pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx
@@ -38,6 +38,7 @@ import * as EmojiUtils from '@libs/EmojiUtils';
 import focusComposerWithDelay from '@libs/focusComposerWithDelay';
 import getPlatform from '@libs/getPlatform';
 import * as KeyDownListener from '@libs/KeyboardShortcut/KeyDownPressListener';
+import Log from '@libs/Log';
 import {parseHtmlToMarkdown} from '@libs/OnyxAwareParser';
 import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManager';
 import * as ReportActionsUtils from '@libs/ReportActionsUtils';
@@ -277,6 +278,7 @@ function ComposerWithSuggestions(
     const tag = useSharedValue(-1);
     const draftComment = getDraftComment(reportID) ?? '';
     const [value, setValue] = useState(() => {
+        Log.info('[ComposerWithSuggestions] Initializing state `value` with draftComment', true, {draftComment});
         if (draftComment) {
             emojisPresentBefore.current = EmojiUtils.extractEmojis(draftComment);
         }
@@ -434,6 +436,7 @@ function ComposerWithSuggestions(
                 setIsCommentEmpty(isNewCommentEmpty);
             }
             emojisPresentBefore.current = emojis;
+            Log.info('[ComposerWithSuggestions] Setting new comment value', true, {newValue: newCommentConverted, oldValue: value});
             setValue(newCommentConverted);
             if (commentValue !== newComment) {
                 const position = Math.max((selection.end ?? 0) + (newComment.length - commentRef.current.length), cursorPosition ?? 0);
@@ -461,6 +464,8 @@ function ComposerWithSuggestions(
                 debouncedBroadcastUserIsTyping(reportID);
             }
         },
+        // We don't want to have `value` in dependencies since it is only used in Log.info
+        // eslint-disable-next-line react-hooks/exhaustive-deps
         [
             debouncedUpdateFrequentlyUsedEmojis,
             findNewlyAddedChars,
@@ -492,12 +497,15 @@ function ComposerWithSuggestions(
 
         setSelection({start: 0, end: 0, positionX: 0, positionY: 0});
         updateComment('');
+        Log.info('[ComposerWithSuggestions] `textInputShouldClear` changed to true', true, {oldTextInputShouldClear: textInputShouldClear});
         setTextInputShouldClear(true);
         if (isComposerFullSize) {
             Report.setIsComposerFullSize(reportID, false);
         }
         setIsFullComposerAvailable(false);
         return trimmedComment;
+        // We don't want to have `textInputShouldClear` in dependencies since it is only used in Log.info
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [updateComment, setTextInputShouldClear, isComposerFullSize, setIsFullComposerAvailable, reportID, debouncedSaveReportComment]);
 
     /**
@@ -742,6 +750,7 @@ function ComposerWithSuggestions(
     );
 
     const onClear = useCallback(() => {
+        Log.info('[ComposerWithSuggestions] `onClear` called', true);
         setTextInputShouldClear(false);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);

diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx b/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx
@@ -26,6 +26,7 @@ import canFocusInputOnScreenFocus from '@libs/canFocusInputOnScreenFocus';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import {getDraftComment} from '@libs/DraftCommentUtils';
 import getModalState from '@libs/getModalState';
+import Log from '@libs/Log';
 import * as ReportUtils from '@libs/ReportUtils';
 import playSound, {SOUNDS} from '@libs/Sound';
 import willBlurTextInputOnTapOutsideFunc from '@libs/willBlurTextInputOnTapOutside';
@@ -160,6 +161,7 @@ function ReportActionCompose({
     const [textInputShouldClear, setTextInputShouldClear] = useState(false);
     const [isCommentEmpty, setIsCommentEmpty] = useState(() => {
         const draftComment = getDraftComment(reportID);
+        Log.info('[ReportActionCompose] Initializing state `isCommentEmpty` with value that depends on draftComment', true, {draftComment});
         return !draftComment || !!draftComment.match(/^(\s)*$/);
     });
 
@@ -267,8 +269,11 @@ function ReportActionCompose({
             playSound(SOUNDS.DONE);
             const newComment = composerRef?.current?.prepareCommentAndResetComposer();
             Report.addAttachment(reportID, file, newComment);
+            Log.info('[ReportActionCompose] `textInputShouldClear` changed to false', true, {oldTextInputShouldClear: textInputShouldClear});
             setTextInputShouldClear(false);
         },
+        // We don't want to have `textInputShouldClear` in dependencies since it is only used in Log.info
+        // eslint-disable-next-line react-hooks/exhaustive-deps
         [reportID],
     );