From cfbe36ea1cb0e9732f95abdcac180e1027cd9108 Mon Sep 17 00:00:00 2001 From: Mateusz Rajski Date: Thu, 20 Jun 2024 20:11:16 +0200 Subject: [PATCH 1/2] Add logs in Composer-related logic --- src/components/Composer/index.tsx | 12 ++++++++++++ .../ComposerWithSuggestions.tsx | 8 ++++++++ .../ReportActionCompose/ReportActionCompose.tsx | 4 ++++ 3 files changed, 24 insertions(+) diff --git a/src/components/Composer/index.tsx b/src/components/Composer/index.tsx index 3a8a4e724948..d37c4348e510 100755 --- 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(); + // 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/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx index 46477964d17b..ade5e8d5290f 100644 --- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx +++ b/src/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'; @@ -434,6 +435,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 +463,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 +496,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]); /** @@ -741,6 +748,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 index 32ed282f9331..a005677ab960 100644 --- 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'; @@ -267,8 +268,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], ); From e160126ceca6d60f245be733c6d87a717b98bd2a Mon Sep 17 00:00:00 2001 From: Mateusz Rajski Date: Thu, 20 Jun 2024 21:03:18 +0200 Subject: [PATCH 2/2] Add additional logs in state initializations --- .../ComposerWithSuggestions/ComposerWithSuggestions.tsx | 1 + .../home/report/ReportActionCompose/ReportActionCompose.tsx | 1 + 2 files changed, 2 insertions(+) diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx index ade5e8d5290f..8c83032bb2d1 100644 --- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx +++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx @@ -278,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); } diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx b/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx index a005677ab960..b2f9a137485a 100644 --- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx +++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx @@ -161,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)*$/); });