refactor: remove prop-drilling of reportID

chrispader · chrispader · commit c8fb31121b78 · 2026-05-26T09:09:33.000+02:00
diff --git a/src/pages/inbox/report/ReportActionCompose/ComposerActionButton.tsx b/src/pages/inbox/report/ReportActionCompose/ComposerActionButton.tsx
@@ -2,13 +2,13 @@ import ComposerActionMenu from './ComposerActionMenu';
 import {useComposerEditState} from './ComposerContext';
 import ComposerEditingButtons from './ComposerEditingButtons';
 
-function ReportActionComposeActionButton({reportID}: {reportID: string}) {
+function ComposerActionButton() {
     const {isEditingInComposer} = useComposerEditState();
 
     if (isEditingInComposer) {
-        return <ComposerEditingButtons reportID={reportID} />;
+        return <ComposerEditingButtons />;
     }
-    return <ComposerActionMenu reportID={reportID} />;
+    return <ComposerActionMenu />;
 }
 
-export default ReportActionComposeActionButton;
+export default ComposerActionButton;
diff --git a/src/pages/inbox/report/ReportActionCompose/ComposerActionMenu.tsx b/src/pages/inbox/report/ReportActionCompose/ComposerActionMenu.tsx
@@ -11,11 +11,8 @@ import AttachmentPickerWithMenuItems from './AttachmentPickerWithMenuItems';
 import {useComposerActions, useComposerEditState, useComposerMeta, useComposerSendState, useComposerState} from './ComposerContext';
 import useAttachmentPicker from './useAttachmentPicker';
 
-type ComposerActionMenuProps = {
-    reportID: string;
-};
-
-function ComposerActionMenu({reportID}: ComposerActionMenuProps) {
+function ComposerActionMenu() {
+    const {reportID} = useComposerState();
     const currentUserPersonalDetails = useCurrentUserPersonalDetails();
     const {isMenuVisible, isFullComposerAvailable} = useComposerState();
     const {draftComment} = useComposerEditState();
diff --git a/src/pages/inbox/report/ReportActionCompose/ComposerBox.tsx b/src/pages/inbox/report/ReportActionCompose/ComposerBox.tsx
@@ -1,16 +1,13 @@
 import React from 'react';
+import type {PropsWithChildren} from 'react';
 import {View} from 'react-native';
 import useOnyx from '@hooks/useOnyx';
 import useThemeStyles from '@hooks/useThemeStyles';
 import ONYXKEYS from '@src/ONYXKEYS';
 import {useComposerMeta, useComposerSendState, useComposerState} from './ComposerContext';
 
-type ComposerBoxProps = {
-    reportID: string;
-    children: React.ReactNode;
-};
-
-function ComposerBox({reportID, children}: ComposerBoxProps) {
+function ComposerBox({children}: PropsWithChildren) {
+    const {reportID} = useComposerState();
     const styles = useThemeStyles();
     const {isFocused} = useComposerState();
     const {isExceedingMaxLength, isBlockedFromConcierge} = useComposerSendState();
diff --git a/src/pages/inbox/report/ReportActionCompose/ComposerContainer.tsx b/src/pages/inbox/report/ReportActionCompose/ComposerContainer.tsx
@@ -1,12 +1,14 @@
 import React from 'react';
+import type {PropsWithChildren} from 'react';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import useOnyx from '@hooks/useOnyx';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {getReportOfflinePendingActionAndErrors} from '@libs/ReportUtils';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {ReportActionComposeWithChildrenProps} from './ReportActionComposeTypes';
+import {useComposerState} from './ComposerContext';
 
-function ReportActionComposerContainer({reportID, children}: ReportActionComposeWithChildrenProps) {
+function ComposerContainer({children}: PropsWithChildren) {
+    const {reportID} = useComposerState();
     const styles = useThemeStyles();
     const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`);
     const [isComposerFullSize = false] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_IS_COMPOSER_FULL_SIZE}${reportID}`);
@@ -24,4 +26,4 @@ function ReportActionComposerContainer({reportID, children}: ReportActionCompose
     );
 }
 
-export default ReportActionComposerContainer;
+export default ComposerContainer;
diff --git a/src/pages/inbox/report/ReportActionCompose/ComposerContext.ts b/src/pages/inbox/report/ReportActionCompose/ComposerContext.ts
@@ -26,6 +26,7 @@ type ComposerText = string;
 
 // Warm — changes on interaction
 type ComposerState = {
+    reportID: string;
     isFocused: boolean;
     isMenuVisible: boolean;
     isFullComposerAvailable: boolean;
@@ -90,6 +91,7 @@ const noop = () => {};
 const ComposerTextContext = createContext<ComposerText>('');
 
 const defaultState: ComposerState = {
+    reportID: '',
     isFocused: false,
     isMenuVisible: false,
     isFullComposerAvailable: false,
diff --git a/src/pages/inbox/report/ReportActionCompose/ComposerDefaultFooter.tsx b/src/pages/inbox/report/ReportActionCompose/ComposerDefaultFooter.tsx
@@ -2,22 +2,21 @@ import React from 'react';
 import OfflineIndicator from '@components/OfflineIndicator';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
-import AgentZeroAwareTypingIndicator from './AgentZeroAwareTypingIndicator';
 import ComposerExceededLength from './ComposerExceededLength';
 import ComposerFooter from './ComposerFooter';
-import type {ReportActionComposeProps} from './ReportActionComposeTypes';
+import ComposerTypingIndicator from './ComposerTypingIndicator';
 
-function ReportActionComposeDefaultFooter({reportID}: ReportActionComposeProps) {
+function ComposerDefaultFooter() {
     const styles = useThemeStyles();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
 
     return (
         <ComposerFooter>
             {!shouldUseNarrowLayout && <OfflineIndicator containerStyles={[styles.chatItemComposeSecondaryRow]} />}
-            <AgentZeroAwareTypingIndicator reportID={reportID} />
+            <ComposerTypingIndicator />
             <ComposerExceededLength />
         </ComposerFooter>
     );
 }
 
-export default ReportActionComposeDefaultFooter;
+export default ComposerDefaultFooter;
diff --git a/src/pages/inbox/report/ReportActionCompose/ComposerDropZone.tsx b/src/pages/inbox/report/ReportActionCompose/ComposerDropZone.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import type {PropsWithChildren} from 'react';
 import DragAndDropConsumer from '@components/DragAndDrop/Consumer';
 import DropZoneUI from '@components/DropZone/DropZoneUI';
 import DualDropZone from '@components/DropZone/DualDropZone';
@@ -14,15 +15,11 @@ import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
 import {getParentReport, isChatRoom, isGroupChat, isInvoiceReport, isReportApproved, isSettled, temporary_getMoneyRequestOptions} from '@libs/ReportUtils';
 import {hasReceipt as hasReceiptTransactionUtils} from '@libs/TransactionUtils';
 import ONYXKEYS from '@src/ONYXKEYS';
+import {useComposerState} from './ComposerContext';
 import useAttachmentPicker from './useAttachmentPicker';
 import useReceiptDrop from './useReceiptDrop';
 import useShouldAddOrReplaceReceipt from './useShouldAddOrReplaceReceipt';
 
-type ComposerDropZoneProps = {
-    reportID: string;
-    children: React.ReactNode;
-};
-
 type RichDropZoneProps = {
     reportID: string;
     shouldAddOrReplaceReceipt: boolean;
@@ -110,7 +107,8 @@ function RichDropZone({reportID, shouldAddOrReplaceReceipt, transactionID, onAtt
     );
 }
 
-function ComposerDropZone({reportID, children}: ComposerDropZoneProps) {
+function ComposerDropZone({children}: PropsWithChildren) {
+    const {reportID} = useComposerState();
     const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`);
     const {shouldAddOrReplaceReceipt, transactionID} = useShouldAddOrReplaceReceipt(reportID);
     const {pickAttachments, PDFValidationComponent: AttachmentPDFValidation, ErrorModal: AttachmentErrorModal} = useAttachmentPicker(reportID);
diff --git a/src/pages/inbox/report/ReportActionCompose/ComposerEditingButtons.tsx b/src/pages/inbox/report/ReportActionCompose/ComposerEditingButtons.tsx
@@ -2,16 +2,12 @@ import React from 'react';
 import {View} from 'react-native';
 import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
-import {useComposerEditActions} from './ComposerContext';
+import {useComposerEditActions, useComposerState} from './ComposerContext';
 import ComposerExpandCollapseButton from './ComposerExpandCollapseButton';
 import MessageEditCancelButton from './MessageEditCancelButton';
 
-type ComposerEditingButtonsProps = {
-    /** The report ID */
-    reportID: string;
-};
-
-function ComposerEditingButtons({reportID}: ComposerEditingButtonsProps) {
+function ComposerEditingButtons() {
+    const {reportID} = useComposerState();
     const styles = useThemeStyles();
 
     const {deleteDraft} = useComposerEditActions();
diff --git a/src/pages/inbox/report/ReportActionCompose/ComposerEmojiPicker.tsx b/src/pages/inbox/report/ReportActionCompose/ComposerEmojiPicker.tsx
@@ -6,13 +6,10 @@ import {canUseTouchScreen} from '@libs/DeviceCapabilities';
 import DomUtils from '@libs/DomUtils';
 import {hideEmojiPicker, isActive as isActiveEmojiPickerAction} from '@userActions/EmojiPickerAction';
 import CONST from '@src/CONST';
-import {useComposerMeta, useComposerSendState} from './ComposerContext';
+import {useComposerMeta, useComposerSendState, useComposerState} from './ComposerContext';
 
-type ComposerEmojiPickerProps = {
-    reportID: string;
-};
-
-function ComposerEmojiPicker({reportID}: ComposerEmojiPickerProps) {
+function ComposerEmojiPicker() {
+    const {reportID} = useComposerState();
     const styles = useThemeStyles();
 
     const {isMediumScreenWidth} = useResponsiveLayout();
diff --git a/src/pages/inbox/report/ReportActionCompose/ComposerFooter.tsx b/src/pages/inbox/report/ReportActionCompose/ComposerFooter.tsx
@@ -1,14 +1,11 @@
 import React from 'react';
+import type {PropsWithChildren} from 'react';
 import {View} from 'react-native';
 import useNetwork from '@hooks/useNetwork';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 
-type ComposerFooterProps = {
-    children: React.ReactNode;
-};
-
-function ComposerFooter({children}: ComposerFooterProps) {
+function ComposerFooter({children}: PropsWithChildren) {
     const styles = useThemeStyles();
     // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
     const {isSmallScreenWidth} = useResponsiveLayout();
diff --git a/src/pages/inbox/report/ReportActionCompose/ComposerInput.tsx b/src/pages/inbox/report/ReportActionCompose/ComposerInput.tsx
@@ -23,18 +23,15 @@ import ComposerWithSuggestions from './ComposerWithSuggestions';
 import useAttachmentPicker from './useAttachmentPicker';
 import useComposerSubmit from './useComposerSubmit';
 
-type ComposerInputProps = {
-    reportID: string;
-};
-
 const AI_PLACEHOLDER_KEYS = ['reportActionCompose.askConciergeToUpdate', 'reportActionCompose.askConciergeToCorrect', 'reportActionCompose.askConciergeForHelp'] as const;
 
 function getRandomPlaceholder(translate: LocalizedTranslate): string {
     const randomIndex = Math.floor(Math.random() * AI_PLACEHOLDER_KEYS.length);
     return translate(AI_PLACEHOLDER_KEYS[randomIndex]);
 }
 
-function ComposerInput({reportID}: ComposerInputProps) {
+function ComposerInput() {
+    const {reportID} = useComposerState();
     const {translate, preferredLocale} = useLocalize();
     const {isMenuVisible} = useComposerState();
     const {isBlockedFromConcierge, debouncedCommentMaxLengthValidation} = useComposerSendState();
diff --git a/src/pages/inbox/report/ReportActionCompose/ComposerInputArea.tsx b/src/pages/inbox/report/ReportActionCompose/ComposerInputArea.tsx
@@ -5,16 +5,15 @@ import ComposerDropZone from './ComposerDropZone';
 import ComposerEmojiPicker from './ComposerEmojiPicker';
 import ComposerInput from './ComposerInput';
 import ComposerSendButton from './ComposerSendButton';
-import type {ReportActionComposeProps} from './types';
 
-function ComposerInputArea({reportID}: ReportActionComposeProps) {
+function ComposerInputArea() {
     return (
-        <ComposerDropZone reportID={reportID}>
-            <ComposerBox reportID={reportID}>
-                <ComposerActionButton reportID={reportID} />
-                <ComposerInput reportID={reportID} />
-                <ComposerEmojiPicker reportID={reportID} />
-                <ComposerSendButton reportID={reportID} />
+        <ComposerDropZone>
+            <ComposerBox>
+                <ComposerActionButton />
+                <ComposerInput />
+                <ComposerEmojiPicker />
+                <ComposerSendButton />
             </ComposerBox>
         </ComposerDropZone>
     );
diff --git a/src/pages/inbox/report/ReportActionCompose/ComposerLayout.tsx b/src/pages/inbox/report/ReportActionCompose/ComposerLayout.tsx
@@ -1,15 +1,17 @@
 import React from 'react';
+import type {PropsWithChildren} from 'react';
 import {View} from 'react-native';
 import useOnyx from '@hooks/useOnyx';
 import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ComposerContainer from './ComposerContainer';
+import {useComposerState} from './ComposerContext';
 import ComposerImportedState from './ComposerImportedState';
 import ComposerLocalTime from './ComposerLocalTime';
-import type {ReportActionComposeWithChildrenProps} from './types';
 
-function ComposerLayout({reportID, children}: ReportActionComposeWithChildrenProps) {
+function ComposerLayout({children}: PropsWithChildren) {
+    const {reportID} = useComposerState();
     const styles = useThemeStyles();
     const [isComposerFullSize = false] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_IS_COMPOSER_FULL_SIZE}${reportID}`);
 
@@ -18,9 +20,9 @@ function ComposerLayout({reportID, children}: ReportActionComposeWithChildrenPro
             testID={CONST.COMPOSER.TEST_ID.REPORT_ACTION_COMPOSE}
             style={[isComposerFullSize && styles.chatItemFullComposeRow]}
         >
-            <ComposerLocalTime reportID={reportID} />
+            <ComposerLocalTime />
             <View style={isComposerFullSize ? styles.flex1 : {}}>
-                <ComposerContainer reportID={reportID}>{children}</ComposerContainer>
+                <ComposerContainer>{children}</ComposerContainer>
                 <ComposerImportedState />
             </View>
         </View>
diff --git a/src/pages/inbox/report/ReportActionCompose/ComposerLocalTime.tsx b/src/pages/inbox/report/ReportActionCompose/ComposerLocalTime.tsx
@@ -8,12 +8,10 @@ import {isAgentEmail} from '@libs/SessionUtils';
 import ParticipantLocalTime from '@pages/inbox/report/ParticipantLocalTime';
 import ONYXKEYS from '@src/ONYXKEYS';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
+import {useComposerState} from './ComposerContext';
 
-type ComposerLocalTimeProps = {
-    reportID: string;
-};
-
-function ComposerLocalTime({reportID}: ComposerLocalTimeProps) {
+function ComposerLocalTime() {
+    const {reportID} = useComposerState();
     const [isComposerFullSize = false] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_IS_COMPOSER_FULL_SIZE}${reportID}`);
     const currentUserPersonalDetails = useCurrentUserPersonalDetails();
     const personalDetails = usePersonalDetails();
diff --git a/src/pages/inbox/report/ReportActionCompose/ComposerProvider.tsx b/src/pages/inbox/report/ReportActionCompose/ComposerProvider.tsx
@@ -124,6 +124,7 @@ function ComposerProvider({children, reportID}: ComposerProviderProps) {
     };
 
     const composerState = {
+        reportID,
         isFocused,
         isMenuVisible,
         isFullComposerAvailable,
diff --git a/src/pages/inbox/report/ReportActionCompose/ComposerSendButton.tsx b/src/pages/inbox/report/ReportActionCompose/ComposerSendButton.tsx
@@ -6,11 +6,12 @@ import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
-import {useComposerEditState, useComposerSendState} from './ComposerContext';
+import {useComposerEditState, useComposerSendState, useComposerState} from './ComposerContext';
 import SubmitDraftButton from './SubmitDraftButton';
 import useComposerSubmit from './useComposerSubmit';
 
-function ComposerSendButton({reportID}: {reportID: string}) {
+function ComposerSendButton() {
+    const {reportID} = useComposerState();
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const icons = useMemoizedLazyExpensifyIcons(['Send', 'Checkmark']);
diff --git a/src/pages/inbox/report/ReportActionCompose/ComposerTypingIndicator.tsx b/src/pages/inbox/report/ReportActionCompose/ComposerTypingIndicator.tsx
@@ -1,13 +1,15 @@
 import React from 'react';
 import useShouldSuppressConciergeIndicators from '@hooks/useShouldSuppressConciergeIndicators';
 import ReportTypingIndicator from '@pages/inbox/report/ReportTypingIndicator';
+import {useComposerState} from './ComposerContext';
 
-function AgentZeroAwareTypingIndicator({reportID}: {reportID: string}) {
+function ComposerTypingIndicator() {
+    const {reportID} = useComposerState();
     const shouldSuppress = useShouldSuppressConciergeIndicators(reportID);
     if (shouldSuppress) {
         return null;
     }
     return <ReportTypingIndicator reportID={reportID} />;
 }
 
-export default AgentZeroAwareTypingIndicator;
+export default ComposerTypingIndicator;
diff --git a/src/pages/inbox/report/ReportActionCompose/EditOnlyReportActionCompose.tsx b/src/pages/inbox/report/ReportActionCompose/EditOnlyReportActionCompose.tsx
@@ -2,13 +2,13 @@ import React from 'react';
 import ComposerInputArea from './ComposerInputArea';
 import ComposerLayout from './ComposerLayout';
 import ComposerProvider from './ComposerProvider';
-import type {ReportActionComposeProps} from './types';
+import type ReportActionComposeProps from './types';
 
 function EditOnlyReportActionCompose({reportID}: ReportActionComposeProps) {
     return (
         <ComposerProvider reportID={reportID}>
-            <ComposerLayout reportID={reportID}>
-                <ComposerInputArea reportID={reportID} />
+            <ComposerLayout>
+                <ComposerInputArea />
             </ComposerLayout>
         </ComposerProvider>
     );
diff --git a/src/pages/inbox/report/ReportActionCompose/ReportActionCompose.tsx b/src/pages/inbox/report/ReportActionCompose/ReportActionCompose.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import AgentZeroAwareTypingIndicator from './AgentZeroAwareTypingIndicator';
 import ComposerActionMenu from './ComposerActionMenu';
 import ComposerBox from './ComposerBox';
 import ComposerContainer from './ComposerContainer';
@@ -17,16 +16,17 @@ import ComposerLayout from './ComposerLayout';
 import ComposerLocalTime from './ComposerLocalTime';
 import ComposerProvider from './ComposerProvider';
 import ComposerSendButton from './ComposerSendButton';
+import ComposerTypingIndicator from './ComposerTypingIndicator';
 import EditOnlyReportActionCompose from './EditOnlyReportActionCompose';
-import type {ReportActionComposeProps} from './types';
+import type ReportActionComposeProps from './types';
 
 function ReportActionCompose({reportID}: ReportActionComposeProps) {
     return (
         <ComposerProvider reportID={reportID}>
-            <ComposerLayout reportID={reportID}>
-                <ComposerInputArea reportID={reportID} />
+            <ComposerLayout>
+                <ComposerInputArea />
             </ComposerLayout>
-            <ComposerDefaultFooter reportID={reportID} />
+            <ComposerDefaultFooter />
         </ComposerProvider>
     );
 }
@@ -42,7 +42,7 @@ ReportActionCompose.EmojiPicker = ComposerEmojiPicker;
 ReportActionCompose.SendButton = ComposerSendButton;
 ReportActionCompose.EditingButtons = ComposerEditingButtons;
 ReportActionCompose.Footer = ComposerFooter;
-ReportActionCompose.TypingIndicator = AgentZeroAwareTypingIndicator;
+ReportActionCompose.TypingIndicator = ComposerTypingIndicator;
 ReportActionCompose.ExceededLength = ComposerExceededLength;
 ReportActionCompose.Layout = ComposerLayout;
 ReportActionCompose.InputArea = ComposerInputArea;
diff --git a/src/pages/inbox/report/ReportActionCompose/types.ts b/src/pages/inbox/report/ReportActionCompose/types.ts
