Merge pull request Expensify#88319 from callstack-internal/decompose/composer-pr4-input-hooks

ReportActionCompose 4/6: extract input hooks

Author: cristipaval

src/pages/inbox/report/ReportActionCompose/ComposerInput.tsx

@@ -1,20 +1,12 @@
-import {useRoute} from '@react-navigation/native';
 import React from 'react';
 import type {MeasureInWindowOnSuccessCallback} from 'react-native';
 import type {LocalizedTranslate} from '@components/LocaleContextProvider';
 import useIsScrollLikelyLayoutTriggered from '@hooks/useIsScrollLikelyLayoutTriggered';
 import useLocalize from '@hooks/useLocalize';
-import useNetwork from '@hooks/useNetwork';
 import useOnyx from '@hooks/useOnyx';
-import usePaginatedReportActions from '@hooks/usePaginatedReportActions';
-import useParentReportAction from '@hooks/useParentReportAction';
 import useReportIsArchived from '@hooks/useReportIsArchived';
-import useReportTransactionsCollection from '@hooks/useReportTransactionsCollection';
 import FS from '@libs/Fullstory';
-import {getAllNonDeletedTransactions} from '@libs/MoneyRequestReportUtils';
-import {getCombinedReportActions, getFilteredReportActionsForReportView, getOneTransactionThreadReportID, isMoneyRequestAction, isSentMoneyReportAction} from '@libs/ReportActionsUtils';
 import {
-    canEditReportAction,
     canUserPerformWriteAction as canUserPerformWriteActionReportUtils,
     chatIncludesChronos,
     chatIncludesConcierge,
@@ -25,14 +17,13 @@ import {isEmojiPickerVisible} from '@userActions/EmojiPickerAction';
 import {isBlockedFromConcierge as isBlockedFromConciergeUserAction} from '@userActions/User';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import SCREENS from '@src/SCREENS';
 import type {FileObject} from '@src/types/utils/Attachment';
 import {useComposerActions, useComposerMeta, useComposerSendActions, useComposerSendState, useComposerState} from './ComposerContext';
 import ComposerWithSuggestions from './ComposerWithSuggestions';
+import useComposerSubmit from './useComposerSubmit';
 
 type ComposerInputProps = {
     reportID: string;
-    submitForm: (comment: string) => void;
     onPasteFile: (files: FileObject | FileObject[]) => void;
 };
 
@@ -43,15 +34,16 @@ function getRandomPlaceholder(translate: LocalizedTranslate): string {
     return translate(AI_PLACEHOLDER_KEYS[randomIndex]);
 }
 
-function ComposerInput({reportID, submitForm, onPasteFile}: ComposerInputProps) {
+function ComposerInput({reportID, onPasteFile}: ComposerInputProps) {
     const {translate, preferredLocale} = useLocalize();
-    const {isOffline} = useNetwork();
     const {isMenuVisible} = useComposerState();
     const {isBlockedFromConcierge} = useComposerSendState();
     const {setIsFullComposerAvailable, onBlur, onFocus, setComposerRef} = useComposerActions();
     const {handleSendMessage, onValueChange} = useComposerSendActions();
     const {containerRef, suggestionsRef, isNextModalWillOpenRef} = useComposerMeta();
 
+    const submitForm = useComposerSubmit(reportID);
+
     const [isComposerFullSize = false] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_IS_COMPOSER_FULL_SIZE}${reportID}`);
     const [shouldShowComposeInput = true] = useOnyx(ONYXKEYS.SHOULD_SHOW_COMPOSE_INPUT);
     const [blockedFromConcierge] = useOnyx(ONYXKEYS.NVP_BLOCKED_FROM_CONCIERGE);
@@ -66,26 +58,6 @@ function ComposerInput({reportID, submitForm, onPasteFile}: ComposerInputProps)
     const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`);
     const isReportArchived = useReportIsArchived(report?.reportID);
 
-    // --- lastReportAction derivation (moves to useLastEditableAction hook in PR 4) ---
-    const {reportActions: unfilteredReportActions} = usePaginatedReportActions(report?.reportID);
-    const filteredReportActions = getFilteredReportActionsForReportView(unfilteredReportActions);
-    const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${report?.chatReportID}`);
-    const allReportTransactions = useReportTransactionsCollection(reportID);
-    const reportTransactions = getAllNonDeletedTransactions(allReportTransactions, filteredReportActions, isOffline, true);
-    const visibleTransactions = isOffline ? reportTransactions : reportTransactions?.filter((t) => t.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE);
-    const reportTransactionIDs = visibleTransactions?.map((t) => t.transactionID);
-    const isSentMoneyReport = filteredReportActions.some((action) => isSentMoneyReportAction(action));
-    const transactionThreadReportID = getOneTransactionThreadReportID(report, chatReport, filteredReportActions, isOffline, reportTransactionIDs);
-    const effectiveTransactionThreadReportID = isSentMoneyReport ? undefined : transactionThreadReportID;
-    const parentReportAction = useParentReportAction(report);
-    const [transactionThreadReportActionsOnyx] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${effectiveTransactionThreadReportID}`);
-    const transactionThreadReportActionsArray = transactionThreadReportActionsOnyx ? Object.values(transactionThreadReportActionsOnyx) : [];
-    const combinedReportActions = getCombinedReportActions(filteredReportActions, effectiveTransactionThreadReportID ?? null, transactionThreadReportActionsArray);
-    const route = useRoute();
-    const isOnSearchMoneyRequestReport = route.name === SCREENS.RIGHT_MODAL.SEARCH_MONEY_REQUEST_REPORT || route.name === SCREENS.RIGHT_MODAL.EXPENSE_REPORT;
-    const actionsForLastEditable = isOnSearchMoneyRequestReport ? filteredReportActions : combinedReportActions;
-    const lastReportAction = [...actionsForLastEditable, parentReportAction].find((action) => !isMoneyRequestAction(action) && canEditReportAction(action, undefined));
-
     const includesConcierge = chatIncludesConcierge({participants: report?.participants});
     const isGroupPolicyReport = !!report?.policyID && report.policyID !== CONST.POLICY.ID_FAKE;
     const isExpenseRelatedReport = isReportTransactionThread(report) || isMoneyRequestReport(report);
@@ -111,7 +83,6 @@ function ComposerInput({reportID, submitForm, onPasteFile}: ComposerInputProps)
             policyID={report?.policyID}
             includeChronos={chatIncludesChronos(report)}
             isGroupPolicyReport={isGroupPolicyReport}
-            lastReportAction={lastReportAction}
             isMenuVisible={isMenuVisible}
             inputPlaceholder={inputPlaceholder}
             isComposerFullSize={isComposerFullSize}

src/pages/inbox/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx

@@ -53,6 +53,7 @@ import getScrollPosition from '@pages/inbox/report/ReportActionCompose/getScroll
 import type {SuggestionsRef} from '@pages/inbox/report/ReportActionCompose/ReportActionCompose';
 import SilentCommentUpdater from '@pages/inbox/report/ReportActionCompose/SilentCommentUpdater';
 import Suggestions from '@pages/inbox/report/ReportActionCompose/Suggestions';
+import useLastEditableAction from '@pages/inbox/report/ReportActionCompose/useLastEditableAction';
 import {isEmojiPickerVisible} from '@userActions/EmojiPickerAction';
 import type {OnEmojiSelected} from '@userActions/EmojiPickerAction';
 import {inputFocusChange} from '@userActions/InputFocus';
@@ -61,7 +62,6 @@ import {broadcastUserIsTyping, saveReportActionDraft, saveReportDraftComment} fr
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import SCREENS from '@src/SCREENS';
-import type * as OnyxTypes from '@src/types/onyx';
 import type {FileObject} from '@src/types/utils/Attachment';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
 // eslint-disable-next-line no-restricted-imports
@@ -112,9 +112,6 @@ type ComposerWithSuggestionsProps = Partial<ChildrenProps> &
         /** Whether the input is disabled, defaults to false */
         disabled?: boolean;
 
-        /** Function to set whether the comment is empty */
-        setIsCommentEmpty?: (isCommentEmpty: boolean) => void;
-
         /** Function to handle sending a message */
         onEnterKeyPress: () => void;
 
@@ -136,9 +133,6 @@ type ComposerWithSuggestionsProps = Partial<ChildrenProps> &
         /** The ref to the next modal will open */
         isNextModalWillOpenRef: RefObject<boolean | null>;
 
-        /** The last report action */
-        lastReportAction?: OnyxEntry<OnyxTypes.ReportAction>;
-
         /** Whether to include chronos */
         includeChronos?: boolean;
 
@@ -148,9 +142,6 @@ type ComposerWithSuggestionsProps = Partial<ChildrenProps> &
         /** policy ID of the report */
         policyID?: string;
 
-        /** Whether the main composer was hidden */
-        didHideComposerInput?: boolean;
-
         /** Reference to the outer element */
         ref?: Ref<ComposerRef | null>;
     };
@@ -214,7 +205,6 @@ function ComposerWithSuggestions({
     // Props: Report
     reportID,
     includeChronos,
-    lastReportAction,
     isGroupPolicyReport,
     policyID,
 
@@ -230,7 +220,6 @@ function ComposerWithSuggestions({
     inputPlaceholder,
     onPasteFile,
     disabled,
-    setIsCommentEmpty,
     onEnterKeyPress,
     shouldShowComposeInput,
     measureParentContainer = () => {},
@@ -246,11 +235,11 @@ function ComposerWithSuggestions({
 
     // For testing
     children,
-    didHideComposerInput,
 
     // Fullstory
     forwardedFSClass,
 }: ComposerWithSuggestionsProps) {
+    const lastReportAction = useLastEditableAction(reportID);
     const route = useRoute();
     const {isKeyboardShown} = useKeyboardState();
     const theme = useTheme();
@@ -293,7 +282,7 @@ function ComposerWithSuggestions({
 
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const maxComposerLines = shouldUseNarrowLayout ? CONST.COMPOSER.MAX_LINES_SMALL_SCREEN : CONST.COMPOSER.MAX_LINES;
-    const shouldAutoFocus = (shouldFocusInputOnScreenFocus || !!draftComment) && shouldShowComposeInput && areAllModalsHidden() && isFocused && !didHideComposerInput;
+    const shouldAutoFocus = (shouldFocusInputOnScreenFocus || !!draftComment) && shouldShowComposeInput && areAllModalsHidden() && isFocused;
     const delayedAutoFocusRouteKeyRef = useRef<string | null>(null);
 
     const valueRef = useRef(value);
@@ -455,13 +444,6 @@ function ComposerWithSuggestions({
                 }
             }
             const newCommentConverted = convertToLTRForComposer(newComment);
-            const isNewCommentEmpty = !!newCommentConverted.match(/^(\s)*$/);
-            const isPrevCommentEmpty = !!commentRef.current.match(/^(\s)*$/);
-
-            /** Only update isCommentEmpty state if it's different from previous one */
-            if (isNewCommentEmpty !== isPrevCommentEmpty) {
-                setIsCommentEmpty?.(isNewCommentEmpty);
-            }
             emojisPresentBefore.current = emojis;
 
             setValue(newCommentConverted);
@@ -497,7 +479,6 @@ function ComposerWithSuggestions({
             preferredLocale,
             preferredSkinTone,
             reportID,
-            setIsCommentEmpty,
             suggestionsRef,
             raiseIsScrollLikelyLayoutTriggered,
             debouncedSaveReportComment,