refactor: PureReportActionItem, move composer focus and delete-draft logic

src/pages/inbox/report/PureReportActionItem.tsx

@@ -32,7 +32,6 @@ import UnreadActionIndicator from '@components/UnreadActionIndicator';
 import useConfirmModal from '@hooks/useConfirmModal';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
-import usePrevious from '@hooks/usePrevious';
 import useReportIsArchived from '@hooks/useReportIsArchived';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useStyleUtils from '@hooks/useStyleUtils';
@@ -44,7 +43,6 @@ import ControlSelection from '@libs/ControlSelection';
 import {canUseTouchScreen} from '@libs/DeviceCapabilities';
 import type {OnyxDataWithErrors} from '@libs/ErrorUtils';
 import {getLatestErrorMessageField, isReceiptError} from '@libs/ErrorUtils';
-import focusComposerWithDelay from '@libs/focusComposerWithDelay';
 import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
 import {isReportMessageAttachment} from '@libs/isReportMessageAttachment';
 import type {PlatformStackNavigationProp} from '@libs/Navigation/PlatformStackNavigation/types';
@@ -75,7 +73,6 @@ import {
     isCardBrokenConnectionAction,
     isCardIssuedAction,
     isCreatedTaskReportAction,
-    isDeletedAction,
     isDeletedParentAction as isDeletedParentActionUtils,
     isIOURequestReportAction,
     isMessageDeleted,
@@ -210,9 +207,6 @@ type PureReportActionItemProps = {
     /** Original report from which the given reportAction is first created */
     originalReport?: OnyxTypes.Report;
 
-    /** Function to deletes the draft for a comment report action. */
-    deleteReportActionDraft?: (reportID: string | undefined, action: OnyxTypes.ReportAction) => void;
-
     /** Whether the room is archived */
     isArchivedRoom?: boolean;
 
@@ -269,7 +263,6 @@ function PureReportActionItem({
     personalDetails,
     originalReportID = '-1',
     originalReport,
-    deleteReportActionDraft = () => {},
     isArchivedRoom,
     isChronosReport,
     isClosedExpenseReportWithNoExpenses,
@@ -298,10 +291,8 @@ function PureReportActionItem({
     const [isHidden, setIsHidden] = useState(false);
     const {isActiveReportAction: isActiveReactionListReportAction, hideReactionList} = useContext(ReactionListContext);
     const {updateHiddenAttachments} = useContext(AttachmentModalContext);
-    const composerTextInputRef = useRef<TextInput | HTMLTextAreaElement>(null);
     const popoverAnchorRef = useRef<Exclude<ContextMenuAnchor, TextInput>>(null);
     const downloadedPreviews = useRef<string[]>([]);
-    const prevDraftMessage = usePrevious(draftMessage);
     const isReportActionLinked = linkedReportActionID && action.reportActionID && linkedReportActionID === action.reportActionID;
     const [isReportActionActive, setIsReportActionActive] = useState(!!isReportActionLinked);
     const isReportArchived = useReportIsArchived(reportID);
@@ -405,14 +396,6 @@ function PureReportActionItem({
         hideEmojiPicker(true);
     }, [isDeletedParentAction, action.reportActionID]);
 
-    useEffect(() => {
-        if (prevDraftMessage !== undefined || draftMessage === undefined) {
-            return;
-        }
-
-        focusComposerWithDelay(composerTextInputRef.current)(true);
-    }, [prevDraftMessage, draftMessage]);
-
     useEffect(() => {
         if (!Permissions.canUseLinkPreviews()) {
             return;
@@ -427,13 +410,6 @@ function PureReportActionItem({
         expandURLPreview(reportID, action.reportActionID);
     }, [action, reportID]);
 
-    useEffect(() => {
-        if (draftMessage === undefined || !isDeletedAction(action)) {
-            return;
-        }
-        deleteReportActionDraft(reportID, action);
-    }, [draftMessage, action, reportID, deleteReportActionDraft]);
-
     // Hide the message if it is being moderated for a higher offense, or is hidden by a moderator
     // Removed messages should not be shown anyway and should not need this flow
     const latestDecision = getReportActionMessage(action)?.moderationDecision?.decision ?? '';
@@ -891,7 +867,6 @@ function PureReportActionItem({
                     isHidden={isHidden}
                     updateHiddenState={updateHiddenState}
                     isArchivedRoom={isArchivedRoom}
-                    composerTextInputRef={composerTextInputRef}
                     isOnSearch={isOnSearch}
                     contextMenuStateValue={contextMenuStateValue}
                     contextMenuActionsValue={contextMenuActionsValue}

src/pages/inbox/report/ReportActionItem.tsx

@@ -6,7 +6,6 @@ import useReportIsArchived from '@hooks/useReportIsArchived';
 import useReportTransactions from '@hooks/useReportTransactions';
 import {getIOUReportIDFromReportActionPreview, getOriginalMessage, isMoneyRequestAction} from '@libs/ReportActionsUtils';
 import {chatIncludesChronosWithID, isArchivedNonExpenseReport, isClosedExpenseReportWithNoExpenses} from '@libs/ReportUtils';
-import {deleteReportActionDraft} from '@userActions/Report';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {PersonalDetailsList, Transaction} from '@src/types/onyx';
 import type {PureReportActionItemProps} from './PureReportActionItem';
@@ -69,7 +68,6 @@ function ReportActionItem({
             personalDetails={personalDetails}
             originalReportID={originalReportID}
             originalReport={originalReport}
-            deleteReportActionDraft={deleteReportActionDraft}
             isArchivedRoom={isArchivedNonExpenseReport(originalReport, isOriginalReportArchived)}
             isChronosReport={chatIncludesChronosWithID(originalReportID)}
             isClosedExpenseReportWithNoExpenses={isClosedExpenseReportWithNoExpenses(iouReport, transactionsOnIOUReport)}

src/pages/inbox/report/ReportActionItemMessageEdit.tsx

@@ -160,6 +160,19 @@ function ReportActionItemMessageEdit({
     const ancestors = useAncestors(originalReport);
     const icons = useMemoizedLazyExpensifyIcons(['Checkmark', 'Close']);
 
+    useEffect(() => {
+        focusComposerWithDelay(textInputRef.current)(true);
+    }, []);
+
+    // If the underlying action becomes deleted while the user has it open in
+    // edit mode, clean up the draft so a stale draft does not linger.
+    useEffect(() => {
+        if (!isDeletedAction(action)) {
+            return;
+        }
+        deleteReportActionDraft(reportID, action);
+    }, [action, reportID]);
+
     useEffect(() => {
         draftMessageVideoAttributeCache.clear();
 

src/pages/inbox/report/actionContents/ChatMessageContent.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import type {TextInput} from 'react-native';
 import {View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import {AttachmentContext} from '@components/AttachmentContext';
@@ -40,7 +39,6 @@ type ChatMessageContentProps = {
     isHidden: boolean;
     updateHiddenState: (isHiddenValue: boolean) => void;
     isArchivedRoom?: boolean;
-    composerTextInputRef: React.RefObject<TextInput | HTMLTextAreaElement | null>;
     isOnSearch: boolean;
     contextMenuStateValue: {
         anchor: ContextMenuAnchor | null;
@@ -71,7 +69,6 @@ function ChatMessageContent({
     isHidden,
     updateHiddenState,
     isArchivedRoom,
-    composerTextInputRef,
     isOnSearch,
     contextMenuStateValue,
     contextMenuActionsValue,
@@ -143,7 +140,6 @@ function ChatMessageContent({
                                 originalReportID={originalReportID}
                                 policyID={report?.policyID}
                                 index={index}
-                                ref={composerTextInputRef}
                                 shouldDisableEmojiPicker={
                                     (chatIncludesConcierge(report) && isBlockedFromConcierge(blockedFromConcierge)) || isArchivedNonExpenseReport(report, isArchivedRoom)
                                 }