From 4e9f65d5af2759f0586fa1e4e3e3ff137598f296 Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Sun, 17 May 2026 16:34:30 +0100 Subject: [PATCH 1/7] refactor: `ReportActionCompose` changes compositional approach --- .../ReportActionCompose.tsx | 136 +++++++++++------- src/pages/inbox/report/ReportFooter.tsx | 19 +-- 2 files changed, 99 insertions(+), 56 deletions(-) diff --git a/src/pages/inbox/report/ReportActionCompose/ReportActionCompose.tsx b/src/pages/inbox/report/ReportActionCompose/ReportActionCompose.tsx index b81935a33ada..ab67b2d1ad9d 100644 --- a/src/pages/inbox/report/ReportActionCompose/ReportActionCompose.tsx +++ b/src/pages/inbox/report/ReportActionCompose/ReportActionCompose.tsx @@ -27,77 +27,117 @@ import ComposerSendButton from './ComposerSendButton'; type ReportActionComposeProps = { /** Report ID */ reportID: string; +}; - /** Whether the composer is edit only */ - isEditOnly?: boolean; +type ReportActionComposerContainerProps = ReportActionComposeProps & { + children: React.ReactNode; }; -function ComposerInner({reportID, isEditOnly = false}: ReportActionComposeProps) { +function ReportActionComposerContainer({reportID, children}: ReportActionComposerContainerProps) { const styles = useThemeStyles(); - const {shouldUseNarrowLayout} = useResponsiveLayout(); - const {isEditingInComposer} = useComposerEditState(); const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`); const [isComposerFullSize = false] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_IS_COMPOSER_FULL_SIZE}${reportID}`); const {reportPendingAction: pendingAction} = getReportOfflinePendingActionAndErrors(report); + return ( + + {children} + + ); +} + +function ReportActionComposeLayout({reportID, children}: ReportActionComposeProps & {children: React.ReactNode}) { + const styles = useThemeStyles(); + const [isComposerFullSize = false] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_IS_COMPOSER_FULL_SIZE}${reportID}`); + return ( - + - - - - {isEditingInComposer ? : } - - - - - - {!isEditOnly && ( - - {!shouldUseNarrowLayout && } - - - - )} - - + {children} + ); } -function Composer({reportID, ...restProps}: ReportActionComposeProps) { +function ReportActionComposeInputArea({reportID}: ReportActionComposeProps) { + const {isEditingInComposer} = useComposerEditState(); + + return ( + + + {isEditingInComposer ? : } + + + + + + ); +} + +function ReportActionComposeDefaultFooter({reportID}: ReportActionComposeProps) { + const styles = useThemeStyles(); + const {shouldUseNarrowLayout} = useResponsiveLayout(); + + return ( + + {!shouldUseNarrowLayout && } + + + + ); +} + +function ReportActionComposeWithProvider({reportID, children}: ReportActionComposeProps & {children: React.ReactNode}) { return ( - + {children} ); } -Composer.LocalTime = ComposerLocalTime; -Composer.DropZone = ComposerDropZone; -Composer.Box = ComposerBox; -Composer.ActionMenu = ComposerActionMenu; -Composer.Input = ComposerInput; -Composer.EmojiPicker = ComposerEmojiPicker; -Composer.SendButton = ComposerSendButton; -Composer.EditingButtons = ComposerEditingButtons; -Composer.Footer = ComposerFooter; -Composer.TypingIndicator = AgentZeroAwareTypingIndicator; -Composer.ExceededLength = ComposerExceededLength; -Composer.ImportedState = ComposerImportedState; - -export default Composer; +function ReportActionCompose({reportID}: ReportActionComposeProps) { + return ( + + + + + ); +} + +function EditOnlyReportActionComposer({reportID}: ReportActionComposeProps) { + return ( + + + + ); +} + +ReportActionCompose.LocalTime = ComposerLocalTime; +ReportActionCompose.Container = ReportActionComposerContainer; +ReportActionCompose.DropZone = ComposerDropZone; +ReportActionCompose.Box = ComposerBox; +ReportActionCompose.ActionMenu = ComposerActionMenu; +ReportActionCompose.Input = ComposerInput; +ReportActionCompose.EmojiPicker = ComposerEmojiPicker; +ReportActionCompose.SendButton = ComposerSendButton; +ReportActionCompose.EditingButtons = ComposerEditingButtons; +ReportActionCompose.Footer = ComposerFooter; +ReportActionCompose.TypingIndicator = AgentZeroAwareTypingIndicator; +ReportActionCompose.ExceededLength = ComposerExceededLength; +ReportActionCompose.ImportedState = ComposerImportedState; + +const ReportActionComposer = ReportActionCompose; + +export default ReportActionCompose; +export {EditOnlyReportActionComposer, ReportActionComposer}; export type {SuggestionsRef, ReportActionComposeProps}; diff --git a/src/pages/inbox/report/ReportFooter.tsx b/src/pages/inbox/report/ReportFooter.tsx index cc5265b4528b..3032a4a16ffe 100644 --- a/src/pages/inbox/report/ReportFooter.tsx +++ b/src/pages/inbox/report/ReportFooter.tsx @@ -31,7 +31,7 @@ import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import {isLoadingInitialReportActionsSelector} from '@src/selectors/ReportMetaData'; import type * as OnyxTypes from '@src/types/onyx'; -import ReportActionCompose from './ReportActionCompose/ReportActionCompose'; +import ReportActionCompose, {EditOnlyReportActionComposer} from './ReportActionCompose/ReportActionCompose'; import {useReportActionActiveEdit} from './ReportActionEditMessageContext'; import SystemChatReportFooterMessage from './SystemChatReportFooterMessage'; @@ -89,16 +89,19 @@ function ReportFooter() { const chatFooterStyles = {...styles.chatFooter, minHeight: !isOffline ? CONST.CHAT_FOOTER_MIN_HEIGHT : 0}; - const renderComposerSwipeable = (isEditOnly = false) => ( + const renderEditOnlyComposerSwipeable = () => ( - + ); - const renderComposer = () => {renderComposerSwipeable()}; + const renderComposer = () => ( + + + + + + ); // Happy path — user can compose if (!shouldHideComposer) { @@ -167,7 +170,7 @@ function ReportFooter() { return ( - {isEditingWithComposer && {renderComposerSwipeable(true)}} + {isEditingWithComposer && {renderEditOnlyComposerSwipeable()}} Date: Sun, 17 May 2026 16:56:22 +0100 Subject: [PATCH 2/7] refactor: split compositional components into separate files --- .../EditOnlyReportActionComposer.tsx | 14 +++ .../ReportActionCompose.tsx | 114 ++---------------- .../ReportActionComposeDefaultFooter.tsx | 23 ++++ .../ReportActionComposeInputArea.tsx | 27 +++++ .../ReportActionComposeLayout.tsx | 30 +++++ .../ReportActionComposeTypes.ts | 12 ++ .../ReportActionComposeWithProvider.tsx | 14 +++ .../ReportActionComposerContainer.tsx | 27 +++++ src/pages/inbox/report/ReportFooter.tsx | 4 +- 9 files changed, 162 insertions(+), 103 deletions(-) create mode 100644 src/pages/inbox/report/ReportActionCompose/EditOnlyReportActionComposer.tsx create mode 100644 src/pages/inbox/report/ReportActionCompose/ReportActionComposeDefaultFooter.tsx create mode 100644 src/pages/inbox/report/ReportActionCompose/ReportActionComposeInputArea.tsx create mode 100644 src/pages/inbox/report/ReportActionCompose/ReportActionComposeLayout.tsx create mode 100644 src/pages/inbox/report/ReportActionCompose/ReportActionComposeTypes.ts create mode 100644 src/pages/inbox/report/ReportActionCompose/ReportActionComposeWithProvider.tsx create mode 100644 src/pages/inbox/report/ReportActionCompose/ReportActionComposerContainer.tsx diff --git a/src/pages/inbox/report/ReportActionCompose/EditOnlyReportActionComposer.tsx b/src/pages/inbox/report/ReportActionCompose/EditOnlyReportActionComposer.tsx new file mode 100644 index 000000000000..6d8b08ddf0dd --- /dev/null +++ b/src/pages/inbox/report/ReportActionCompose/EditOnlyReportActionComposer.tsx @@ -0,0 +1,14 @@ +import React from 'react'; +import ReportActionComposeInputArea from './ReportActionComposeInputArea'; +import type {ReportActionComposeProps} from './ReportActionComposeTypes'; +import ReportActionComposeWithProvider from './ReportActionComposeWithProvider'; + +function EditOnlyReportActionComposer({reportID}: ReportActionComposeProps) { + return ( + + + + ); +} + +export default EditOnlyReportActionComposer; diff --git a/src/pages/inbox/report/ReportActionCompose/ReportActionCompose.tsx b/src/pages/inbox/report/ReportActionCompose/ReportActionCompose.tsx index ab67b2d1ad9d..c026a1d3937b 100644 --- a/src/pages/inbox/report/ReportActionCompose/ReportActionCompose.tsx +++ b/src/pages/inbox/report/ReportActionCompose/ReportActionCompose.tsx @@ -1,17 +1,7 @@ import React from 'react'; -import {View} from 'react-native'; -import OfflineIndicator from '@components/OfflineIndicator'; -import OfflineWithFeedback from '@components/OfflineWithFeedback'; -import useOnyx from '@hooks/useOnyx'; -import useResponsiveLayout from '@hooks/useResponsiveLayout'; -import useThemeStyles from '@hooks/useThemeStyles'; -import {getReportOfflinePendingActionAndErrors} from '@libs/ReportUtils'; -import CONST from '@src/CONST'; -import ONYXKEYS from '@src/ONYXKEYS'; import AgentZeroAwareTypingIndicator from './AgentZeroAwareTypingIndicator'; import ComposerActionMenu from './ComposerActionMenu'; import ComposerBox from './ComposerBox'; -import {useComposerEditState} from './ComposerContext'; import type {SuggestionsRef} from './ComposerContext'; import ComposerDropZone from './ComposerDropZone'; import ComposerEditingButtons from './ComposerEditingButtons'; @@ -21,89 +11,14 @@ import ComposerFooter from './ComposerFooter'; import ComposerImportedState from './ComposerImportedState'; import ComposerInput from './ComposerInput'; import ComposerLocalTime from './ComposerLocalTime'; -import ComposerProvider from './ComposerProvider'; import ComposerSendButton from './ComposerSendButton'; - -type ReportActionComposeProps = { - /** Report ID */ - reportID: string; -}; - -type ReportActionComposerContainerProps = ReportActionComposeProps & { - children: React.ReactNode; -}; - -function ReportActionComposerContainer({reportID, children}: ReportActionComposerContainerProps) { - const styles = useThemeStyles(); - const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`); - const [isComposerFullSize = false] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_IS_COMPOSER_FULL_SIZE}${reportID}`); - const {reportPendingAction: pendingAction} = getReportOfflinePendingActionAndErrors(report); - - return ( - - {children} - - ); -} - -function ReportActionComposeLayout({reportID, children}: ReportActionComposeProps & {children: React.ReactNode}) { - const styles = useThemeStyles(); - const [isComposerFullSize = false] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_IS_COMPOSER_FULL_SIZE}${reportID}`); - - return ( - - - - {children} - - - - ); -} - -function ReportActionComposeInputArea({reportID}: ReportActionComposeProps) { - const {isEditingInComposer} = useComposerEditState(); - - return ( - - - {isEditingInComposer ? : } - - - - - - ); -} - -function ReportActionComposeDefaultFooter({reportID}: ReportActionComposeProps) { - const styles = useThemeStyles(); - const {shouldUseNarrowLayout} = useResponsiveLayout(); - - return ( - - {!shouldUseNarrowLayout && } - - - - ); -} - -function ReportActionComposeWithProvider({reportID, children}: ReportActionComposeProps & {children: React.ReactNode}) { - return ( - - {children} - - ); -} +import EditOnlyReportActionComposer from './EditOnlyReportActionComposer'; +import ReportActionComposeDefaultFooter from './ReportActionComposeDefaultFooter'; +import ReportActionComposeInputArea from './ReportActionComposeInputArea'; +import ReportActionComposeLayout from './ReportActionComposeLayout'; +import ReportActionComposerContainer from './ReportActionComposerContainer'; +import type {ReportActionComposeProps} from './ReportActionComposeTypes'; +import ReportActionComposeWithProvider from './ReportActionComposeWithProvider'; function ReportActionCompose({reportID}: ReportActionComposeProps) { return ( @@ -114,16 +29,9 @@ function ReportActionCompose({reportID}: ReportActionComposeProps) { ); } -function EditOnlyReportActionComposer({reportID}: ReportActionComposeProps) { - return ( - - - - ); -} - ReportActionCompose.LocalTime = ComposerLocalTime; ReportActionCompose.Container = ReportActionComposerContainer; +ReportActionCompose.ImportedState = ComposerImportedState; ReportActionCompose.DropZone = ComposerDropZone; ReportActionCompose.Box = ComposerBox; ReportActionCompose.ActionMenu = ComposerActionMenu; @@ -134,7 +42,11 @@ ReportActionCompose.EditingButtons = ComposerEditingButtons; ReportActionCompose.Footer = ComposerFooter; ReportActionCompose.TypingIndicator = AgentZeroAwareTypingIndicator; ReportActionCompose.ExceededLength = ComposerExceededLength; -ReportActionCompose.ImportedState = ComposerImportedState; +ReportActionCompose.Layout = ReportActionComposeLayout; +ReportActionCompose.InputArea = ReportActionComposeInputArea; +ReportActionCompose.DefaultFooter = ReportActionComposeDefaultFooter; +ReportActionCompose.WithProvider = ReportActionComposeWithProvider; +ReportActionCompose.EditOnly = EditOnlyReportActionComposer; const ReportActionComposer = ReportActionCompose; diff --git a/src/pages/inbox/report/ReportActionCompose/ReportActionComposeDefaultFooter.tsx b/src/pages/inbox/report/ReportActionCompose/ReportActionComposeDefaultFooter.tsx new file mode 100644 index 000000000000..32727a63a432 --- /dev/null +++ b/src/pages/inbox/report/ReportActionCompose/ReportActionComposeDefaultFooter.tsx @@ -0,0 +1,23 @@ +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'; + +function ReportActionComposeDefaultFooter({reportID}: ReportActionComposeProps) { + const styles = useThemeStyles(); + const {shouldUseNarrowLayout} = useResponsiveLayout(); + + return ( + + {!shouldUseNarrowLayout && } + + + + ); +} + +export default ReportActionComposeDefaultFooter; diff --git a/src/pages/inbox/report/ReportActionCompose/ReportActionComposeInputArea.tsx b/src/pages/inbox/report/ReportActionCompose/ReportActionComposeInputArea.tsx new file mode 100644 index 000000000000..a9088be47b3a --- /dev/null +++ b/src/pages/inbox/report/ReportActionCompose/ReportActionComposeInputArea.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import ComposerActionMenu from './ComposerActionMenu'; +import ComposerBox from './ComposerBox'; +import {useComposerEditState} from './ComposerContext'; +import ComposerDropZone from './ComposerDropZone'; +import ComposerEditingButtons from './ComposerEditingButtons'; +import ComposerEmojiPicker from './ComposerEmojiPicker'; +import ComposerInput from './ComposerInput'; +import ComposerSendButton from './ComposerSendButton'; +import type {ReportActionComposeProps} from './ReportActionComposeTypes'; + +function ReportActionComposeInputArea({reportID}: ReportActionComposeProps) { + const {isEditingInComposer} = useComposerEditState(); + + return ( + + + {isEditingInComposer ? : } + + + + + + ); +} + +export default ReportActionComposeInputArea; diff --git a/src/pages/inbox/report/ReportActionCompose/ReportActionComposeLayout.tsx b/src/pages/inbox/report/ReportActionCompose/ReportActionComposeLayout.tsx new file mode 100644 index 000000000000..8b63b1505b39 --- /dev/null +++ b/src/pages/inbox/report/ReportActionCompose/ReportActionComposeLayout.tsx @@ -0,0 +1,30 @@ +import React 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 ComposerImportedState from './ComposerImportedState'; +import ComposerLocalTime from './ComposerLocalTime'; +import ReportActionComposerContainer from './ReportActionComposerContainer'; +import type {ReportActionComposeWithChildrenProps} from './ReportActionComposeTypes'; + +function ReportActionComposeLayout({reportID, children}: ReportActionComposeWithChildrenProps) { + const styles = useThemeStyles(); + const [isComposerFullSize = false] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_IS_COMPOSER_FULL_SIZE}${reportID}`); + + return ( + + + + {children} + + + + ); +} + +export default ReportActionComposeLayout; diff --git a/src/pages/inbox/report/ReportActionCompose/ReportActionComposeTypes.ts b/src/pages/inbox/report/ReportActionCompose/ReportActionComposeTypes.ts new file mode 100644 index 000000000000..b1e115c51634 --- /dev/null +++ b/src/pages/inbox/report/ReportActionCompose/ReportActionComposeTypes.ts @@ -0,0 +1,12 @@ +import type React from 'react'; + +type ReportActionComposeProps = { + /** Report ID */ + reportID: string; +}; + +type ReportActionComposeWithChildrenProps = ReportActionComposeProps & { + children: React.ReactNode; +}; + +export type {ReportActionComposeProps, ReportActionComposeWithChildrenProps}; diff --git a/src/pages/inbox/report/ReportActionCompose/ReportActionComposeWithProvider.tsx b/src/pages/inbox/report/ReportActionCompose/ReportActionComposeWithProvider.tsx new file mode 100644 index 000000000000..980bcef31535 --- /dev/null +++ b/src/pages/inbox/report/ReportActionCompose/ReportActionComposeWithProvider.tsx @@ -0,0 +1,14 @@ +import React from 'react'; +import ComposerProvider from './ComposerProvider'; +import ReportActionComposeLayout from './ReportActionComposeLayout'; +import type {ReportActionComposeWithChildrenProps} from './ReportActionComposeTypes'; + +function ReportActionComposeWithProvider({reportID, children}: ReportActionComposeWithChildrenProps) { + return ( + + {children} + + ); +} + +export default ReportActionComposeWithProvider; diff --git a/src/pages/inbox/report/ReportActionCompose/ReportActionComposerContainer.tsx b/src/pages/inbox/report/ReportActionCompose/ReportActionComposerContainer.tsx new file mode 100644 index 000000000000..c6d10f9958e8 --- /dev/null +++ b/src/pages/inbox/report/ReportActionCompose/ReportActionComposerContainer.tsx @@ -0,0 +1,27 @@ +import React 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'; + +function ReportActionComposerContainer({reportID, children}: ReportActionComposeWithChildrenProps) { + const styles = useThemeStyles(); + const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`); + const [isComposerFullSize = false] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_IS_COMPOSER_FULL_SIZE}${reportID}`); + const {reportPendingAction: pendingAction} = getReportOfflinePendingActionAndErrors(report); + + return ( + + {children} + + ); +} + +export default ReportActionComposerContainer; diff --git a/src/pages/inbox/report/ReportFooter.tsx b/src/pages/inbox/report/ReportFooter.tsx index 3032a4a16ffe..93348ebdfe9b 100644 --- a/src/pages/inbox/report/ReportFooter.tsx +++ b/src/pages/inbox/report/ReportFooter.tsx @@ -31,7 +31,7 @@ import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import {isLoadingInitialReportActionsSelector} from '@src/selectors/ReportMetaData'; import type * as OnyxTypes from '@src/types/onyx'; -import ReportActionCompose, {EditOnlyReportActionComposer} from './ReportActionCompose/ReportActionCompose'; +import ReportActionCompose from './ReportActionCompose/ReportActionCompose'; import {useReportActionActiveEdit} from './ReportActionEditMessageContext'; import SystemChatReportFooterMessage from './SystemChatReportFooterMessage'; @@ -91,7 +91,7 @@ function ReportFooter() { const renderEditOnlyComposerSwipeable = () => ( - + ); From ea220b576d8b254cd0e4451297db698bf843fe43 Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Tue, 26 May 2026 08:54:21 +0200 Subject: [PATCH 3/7] refactor: extract action button component --- .../ReportActionCompose/ComposerActionButton.tsx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 src/pages/inbox/report/ReportActionCompose/ComposerActionButton.tsx diff --git a/src/pages/inbox/report/ReportActionCompose/ComposerActionButton.tsx b/src/pages/inbox/report/ReportActionCompose/ComposerActionButton.tsx new file mode 100644 index 000000000000..3d9e2cb049af --- /dev/null +++ b/src/pages/inbox/report/ReportActionCompose/ComposerActionButton.tsx @@ -0,0 +1,14 @@ +import ComposerActionMenu from './ComposerActionMenu'; +import {useComposerEditState} from './ComposerContext'; +import ComposerEditingButtons from './ComposerEditingButtons'; + +function ReportActionComposeActionButton({reportID}: {reportID: string}) { + const {isEditingInComposer} = useComposerEditState(); + + if (isEditingInComposer) { + return ; + } + return ; +} + +export default ReportActionComposeActionButton; From a24eb9e0590bff48dac738225d2b4e36f15641f1 Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Tue, 26 May 2026 08:54:38 +0200 Subject: [PATCH 4/7] refactor: component and file renaming --- ...serContainer.tsx => ComposerContainer.tsx} | 0 ...ltFooter.tsx => ComposerDefaultFooter.tsx} | 0 ...oseInputArea.tsx => ComposerInputArea.tsx} | 14 +++---- ...onComposeLayout.tsx => ComposerLayout.tsx} | 10 ++--- ...laceholder.tsx => ComposerPlaceholder.tsx} | 4 +- .../EditOnlyReportActionCompose.tsx | 17 +++++++++ .../EditOnlyReportActionComposer.tsx | 14 ------- .../ReportActionCompose.tsx | 38 +++++++++---------- .../ReportActionComposeWithProvider.tsx | 14 ------- .../{ReportActionComposeTypes.ts => types.ts} | 0 10 files changed, 47 insertions(+), 64 deletions(-) rename src/pages/inbox/report/ReportActionCompose/{ReportActionComposerContainer.tsx => ComposerContainer.tsx} (100%) rename src/pages/inbox/report/ReportActionCompose/{ReportActionComposeDefaultFooter.tsx => ComposerDefaultFooter.tsx} (100%) rename src/pages/inbox/report/ReportActionCompose/{ReportActionComposeInputArea.tsx => ComposerInputArea.tsx} (52%) rename src/pages/inbox/report/ReportActionCompose/{ReportActionComposeLayout.tsx => ComposerLayout.tsx} (68%) rename src/pages/inbox/report/ReportActionCompose/{ReportActionComposePlaceholder.tsx => ComposerPlaceholder.tsx} (97%) create mode 100644 src/pages/inbox/report/ReportActionCompose/EditOnlyReportActionCompose.tsx delete mode 100644 src/pages/inbox/report/ReportActionCompose/EditOnlyReportActionComposer.tsx delete mode 100644 src/pages/inbox/report/ReportActionCompose/ReportActionComposeWithProvider.tsx rename src/pages/inbox/report/ReportActionCompose/{ReportActionComposeTypes.ts => types.ts} (100%) diff --git a/src/pages/inbox/report/ReportActionCompose/ReportActionComposerContainer.tsx b/src/pages/inbox/report/ReportActionCompose/ComposerContainer.tsx similarity index 100% rename from src/pages/inbox/report/ReportActionCompose/ReportActionComposerContainer.tsx rename to src/pages/inbox/report/ReportActionCompose/ComposerContainer.tsx diff --git a/src/pages/inbox/report/ReportActionCompose/ReportActionComposeDefaultFooter.tsx b/src/pages/inbox/report/ReportActionCompose/ComposerDefaultFooter.tsx similarity index 100% rename from src/pages/inbox/report/ReportActionCompose/ReportActionComposeDefaultFooter.tsx rename to src/pages/inbox/report/ReportActionCompose/ComposerDefaultFooter.tsx diff --git a/src/pages/inbox/report/ReportActionCompose/ReportActionComposeInputArea.tsx b/src/pages/inbox/report/ReportActionCompose/ComposerInputArea.tsx similarity index 52% rename from src/pages/inbox/report/ReportActionCompose/ReportActionComposeInputArea.tsx rename to src/pages/inbox/report/ReportActionCompose/ComposerInputArea.tsx index a9088be47b3a..94f18c77d4af 100644 --- a/src/pages/inbox/report/ReportActionCompose/ReportActionComposeInputArea.tsx +++ b/src/pages/inbox/report/ReportActionCompose/ComposerInputArea.tsx @@ -1,21 +1,17 @@ import React from 'react'; -import ComposerActionMenu from './ComposerActionMenu'; +import ComposerActionButton from './ComposerActionButton'; import ComposerBox from './ComposerBox'; -import {useComposerEditState} from './ComposerContext'; import ComposerDropZone from './ComposerDropZone'; -import ComposerEditingButtons from './ComposerEditingButtons'; import ComposerEmojiPicker from './ComposerEmojiPicker'; import ComposerInput from './ComposerInput'; import ComposerSendButton from './ComposerSendButton'; -import type {ReportActionComposeProps} from './ReportActionComposeTypes'; - -function ReportActionComposeInputArea({reportID}: ReportActionComposeProps) { - const {isEditingInComposer} = useComposerEditState(); +import type {ReportActionComposeProps} from './types'; +function ComposerInputArea({reportID}: ReportActionComposeProps) { return ( - {isEditingInComposer ? : } + @@ -24,4 +20,4 @@ function ReportActionComposeInputArea({reportID}: ReportActionComposeProps) { ); } -export default ReportActionComposeInputArea; +export default ComposerInputArea; diff --git a/src/pages/inbox/report/ReportActionCompose/ReportActionComposeLayout.tsx b/src/pages/inbox/report/ReportActionCompose/ComposerLayout.tsx similarity index 68% rename from src/pages/inbox/report/ReportActionCompose/ReportActionComposeLayout.tsx rename to src/pages/inbox/report/ReportActionCompose/ComposerLayout.tsx index 8b63b1505b39..bdda5e5ad667 100644 --- a/src/pages/inbox/report/ReportActionCompose/ReportActionComposeLayout.tsx +++ b/src/pages/inbox/report/ReportActionCompose/ComposerLayout.tsx @@ -4,12 +4,12 @@ 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 ComposerImportedState from './ComposerImportedState'; import ComposerLocalTime from './ComposerLocalTime'; -import ReportActionComposerContainer from './ReportActionComposerContainer'; -import type {ReportActionComposeWithChildrenProps} from './ReportActionComposeTypes'; +import type {ReportActionComposeWithChildrenProps} from './types'; -function ReportActionComposeLayout({reportID, children}: ReportActionComposeWithChildrenProps) { +function ComposerLayout({reportID, children}: ReportActionComposeWithChildrenProps) { const styles = useThemeStyles(); const [isComposerFullSize = false] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_IS_COMPOSER_FULL_SIZE}${reportID}`); @@ -20,11 +20,11 @@ function ReportActionComposeLayout({reportID, children}: ReportActionComposeWith > - {children} + {children} ); } -export default ReportActionComposeLayout; +export default ComposerLayout; diff --git a/src/pages/inbox/report/ReportActionCompose/ReportActionComposePlaceholder.tsx b/src/pages/inbox/report/ReportActionCompose/ComposerPlaceholder.tsx similarity index 97% rename from src/pages/inbox/report/ReportActionCompose/ReportActionComposePlaceholder.tsx rename to src/pages/inbox/report/ReportActionCompose/ComposerPlaceholder.tsx index 7a90fad4a08c..f3a997f5357a 100644 --- a/src/pages/inbox/report/ReportActionCompose/ReportActionComposePlaceholder.tsx +++ b/src/pages/inbox/report/ReportActionCompose/ComposerPlaceholder.tsx @@ -22,7 +22,7 @@ import CONST from '@src/CONST'; * chatItemComposeSecondaryRow, and icons [Plus, Emoji, Send]. * If the real composer changes its layout or icon set, update this placeholder to match. */ -function ReportActionComposePlaceholder() { +function ComposerPlaceholder() { const theme = useTheme(); const styles = useThemeStyles(); const {translate} = useLocalize(); @@ -86,4 +86,4 @@ function ReportActionComposePlaceholder() { ); } -export default ReportActionComposePlaceholder; +export default ComposerPlaceholder; diff --git a/src/pages/inbox/report/ReportActionCompose/EditOnlyReportActionCompose.tsx b/src/pages/inbox/report/ReportActionCompose/EditOnlyReportActionCompose.tsx new file mode 100644 index 000000000000..2b49996acc8c --- /dev/null +++ b/src/pages/inbox/report/ReportActionCompose/EditOnlyReportActionCompose.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import ComposerInputArea from './ComposerInputArea'; +import ComposerLayout from './ComposerLayout'; +import ComposerProvider from './ComposerProvider'; +import type {ReportActionComposeProps} from './types'; + +function EditOnlyReportActionCompose({reportID}: ReportActionComposeProps) { + return ( + + + + + + ); +} + +export default EditOnlyReportActionCompose; diff --git a/src/pages/inbox/report/ReportActionCompose/EditOnlyReportActionComposer.tsx b/src/pages/inbox/report/ReportActionCompose/EditOnlyReportActionComposer.tsx deleted file mode 100644 index 6d8b08ddf0dd..000000000000 --- a/src/pages/inbox/report/ReportActionCompose/EditOnlyReportActionComposer.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; -import ReportActionComposeInputArea from './ReportActionComposeInputArea'; -import type {ReportActionComposeProps} from './ReportActionComposeTypes'; -import ReportActionComposeWithProvider from './ReportActionComposeWithProvider'; - -function EditOnlyReportActionComposer({reportID}: ReportActionComposeProps) { - return ( - - - - ); -} - -export default EditOnlyReportActionComposer; diff --git a/src/pages/inbox/report/ReportActionCompose/ReportActionCompose.tsx b/src/pages/inbox/report/ReportActionCompose/ReportActionCompose.tsx index c026a1d3937b..bb6e5a27e4d1 100644 --- a/src/pages/inbox/report/ReportActionCompose/ReportActionCompose.tsx +++ b/src/pages/inbox/report/ReportActionCompose/ReportActionCompose.tsx @@ -2,7 +2,9 @@ import React from 'react'; import AgentZeroAwareTypingIndicator from './AgentZeroAwareTypingIndicator'; import ComposerActionMenu from './ComposerActionMenu'; import ComposerBox from './ComposerBox'; +import ComposerContainer from './ComposerContainer'; import type {SuggestionsRef} from './ComposerContext'; +import ComposerDefaultFooter from './ComposerDefaultFooter'; import ComposerDropZone from './ComposerDropZone'; import ComposerEditingButtons from './ComposerEditingButtons'; import ComposerEmojiPicker from './ComposerEmojiPicker'; @@ -10,27 +12,27 @@ import ComposerExceededLength from './ComposerExceededLength'; import ComposerFooter from './ComposerFooter'; import ComposerImportedState from './ComposerImportedState'; import ComposerInput from './ComposerInput'; +import ComposerInputArea from './ComposerInputArea'; +import ComposerLayout from './ComposerLayout'; import ComposerLocalTime from './ComposerLocalTime'; +import ComposerProvider from './ComposerProvider'; import ComposerSendButton from './ComposerSendButton'; -import EditOnlyReportActionComposer from './EditOnlyReportActionComposer'; -import ReportActionComposeDefaultFooter from './ReportActionComposeDefaultFooter'; -import ReportActionComposeInputArea from './ReportActionComposeInputArea'; -import ReportActionComposeLayout from './ReportActionComposeLayout'; -import ReportActionComposerContainer from './ReportActionComposerContainer'; -import type {ReportActionComposeProps} from './ReportActionComposeTypes'; -import ReportActionComposeWithProvider from './ReportActionComposeWithProvider'; +import EditOnlyReportActionCompose from './EditOnlyReportActionCompose'; +import type {ReportActionComposeProps} from './types'; function ReportActionCompose({reportID}: ReportActionComposeProps) { return ( - - - - + + + + + + ); } ReportActionCompose.LocalTime = ComposerLocalTime; -ReportActionCompose.Container = ReportActionComposerContainer; +ReportActionCompose.Container = ComposerContainer; ReportActionCompose.ImportedState = ComposerImportedState; ReportActionCompose.DropZone = ComposerDropZone; ReportActionCompose.Box = ComposerBox; @@ -42,14 +44,10 @@ ReportActionCompose.EditingButtons = ComposerEditingButtons; ReportActionCompose.Footer = ComposerFooter; ReportActionCompose.TypingIndicator = AgentZeroAwareTypingIndicator; ReportActionCompose.ExceededLength = ComposerExceededLength; -ReportActionCompose.Layout = ReportActionComposeLayout; -ReportActionCompose.InputArea = ReportActionComposeInputArea; -ReportActionCompose.DefaultFooter = ReportActionComposeDefaultFooter; -ReportActionCompose.WithProvider = ReportActionComposeWithProvider; -ReportActionCompose.EditOnly = EditOnlyReportActionComposer; - -const ReportActionComposer = ReportActionCompose; +ReportActionCompose.Layout = ComposerLayout; +ReportActionCompose.InputArea = ComposerInputArea; +ReportActionCompose.DefaultFooter = ComposerDefaultFooter; +ReportActionCompose.EditOnly = EditOnlyReportActionCompose; export default ReportActionCompose; -export {EditOnlyReportActionComposer, ReportActionComposer}; export type {SuggestionsRef, ReportActionComposeProps}; diff --git a/src/pages/inbox/report/ReportActionCompose/ReportActionComposeWithProvider.tsx b/src/pages/inbox/report/ReportActionCompose/ReportActionComposeWithProvider.tsx deleted file mode 100644 index 980bcef31535..000000000000 --- a/src/pages/inbox/report/ReportActionCompose/ReportActionComposeWithProvider.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; -import ComposerProvider from './ComposerProvider'; -import ReportActionComposeLayout from './ReportActionComposeLayout'; -import type {ReportActionComposeWithChildrenProps} from './ReportActionComposeTypes'; - -function ReportActionComposeWithProvider({reportID, children}: ReportActionComposeWithChildrenProps) { - return ( - - {children} - - ); -} - -export default ReportActionComposeWithProvider; diff --git a/src/pages/inbox/report/ReportActionCompose/ReportActionComposeTypes.ts b/src/pages/inbox/report/ReportActionCompose/types.ts similarity index 100% rename from src/pages/inbox/report/ReportActionCompose/ReportActionComposeTypes.ts rename to src/pages/inbox/report/ReportActionCompose/types.ts From c8fb31121b7877cadcaa8fac65d1d5359b38b1ff Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Tue, 26 May 2026 09:09:33 +0200 Subject: [PATCH 5/7] refactor: remove prop-drilling of `reportID` --- .../ReportActionCompose/ComposerActionButton.tsx | 8 ++++---- .../ReportActionCompose/ComposerActionMenu.tsx | 7 ++----- .../report/ReportActionCompose/ComposerBox.tsx | 9 +++------ .../ReportActionCompose/ComposerContainer.tsx | 8 +++++--- .../report/ReportActionCompose/ComposerContext.ts | 2 ++ .../ReportActionCompose/ComposerDefaultFooter.tsx | 9 ++++----- .../ReportActionCompose/ComposerDropZone.tsx | 10 ++++------ .../ComposerEditingButtons.tsx | 10 +++------- .../ReportActionCompose/ComposerEmojiPicker.tsx | 9 +++------ .../report/ReportActionCompose/ComposerFooter.tsx | 7 ++----- .../report/ReportActionCompose/ComposerInput.tsx | 7 ++----- .../ReportActionCompose/ComposerInputArea.tsx | 15 +++++++-------- .../report/ReportActionCompose/ComposerLayout.tsx | 10 ++++++---- .../ReportActionCompose/ComposerLocalTime.tsx | 8 +++----- .../ReportActionCompose/ComposerProvider.tsx | 1 + .../ReportActionCompose/ComposerSendButton.tsx | 5 +++-- ...gIndicator.tsx => ComposerTypingIndicator.tsx} | 6 ++++-- .../EditOnlyReportActionCompose.tsx | 6 +++--- .../ReportActionCompose/ReportActionCompose.tsx | 12 ++++++------ .../inbox/report/ReportActionCompose/types.ts | 8 +------- 20 files changed, 68 insertions(+), 89 deletions(-) rename src/pages/inbox/report/ReportActionCompose/{AgentZeroAwareTypingIndicator.tsx => ComposerTypingIndicator.tsx} (69%) diff --git a/src/pages/inbox/report/ReportActionCompose/ComposerActionButton.tsx b/src/pages/inbox/report/ReportActionCompose/ComposerActionButton.tsx index 3d9e2cb049af..c0f694363919 100644 --- 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 ; + return ; } - return ; + return ; } -export default ReportActionComposeActionButton; +export default ComposerActionButton; diff --git a/src/pages/inbox/report/ReportActionCompose/ComposerActionMenu.tsx b/src/pages/inbox/report/ReportActionCompose/ComposerActionMenu.tsx index c84eda56f95f..b7e8f4e14569 100644 --- 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 index 568c90b2a619..0c1414788420 100644 --- 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 index c6d10f9958e8..7a11d44e5f90 100644 --- 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 index ec9b33de1433..64c32912a0a3 100644 --- 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(''); 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 index 32727a63a432..0c83e2b890ef 100644 --- 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 ( {!shouldUseNarrowLayout && } - + ); } -export default ReportActionComposeDefaultFooter; +export default ComposerDefaultFooter; diff --git a/src/pages/inbox/report/ReportActionCompose/ComposerDropZone.tsx b/src/pages/inbox/report/ReportActionCompose/ComposerDropZone.tsx index 344a2316925c..0db4107e2e22 100644 --- 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 index 77f8f58dfae0..4bf7e056ad13 100644 --- 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 index 99c26549cd59..43f4ff1c8c47 100644 --- 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 index c34ca8e8e9de..4bcfe5289c4c 100644 --- 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 index 1b01a369687f..c8425c634336 100644 --- a/src/pages/inbox/report/ReportActionCompose/ComposerInput.tsx +++ b/src/pages/inbox/report/ReportActionCompose/ComposerInput.tsx @@ -23,10 +23,6 @@ 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 { @@ -34,7 +30,8 @@ function getRandomPlaceholder(translate: LocalizedTranslate): string { 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 index 94f18c77d4af..0b9f10f56212 100644 --- 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 ( - - - - - - + + + + + + ); diff --git a/src/pages/inbox/report/ReportActionCompose/ComposerLayout.tsx b/src/pages/inbox/report/ReportActionCompose/ComposerLayout.tsx index bdda5e5ad667..99f0715fd5a8 100644 --- 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]} > - + - {children} + {children} diff --git a/src/pages/inbox/report/ReportActionCompose/ComposerLocalTime.tsx b/src/pages/inbox/report/ReportActionCompose/ComposerLocalTime.tsx index 9cfba965e4d2..e578fb87089b 100644 --- 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 index 7c3b41392182..3435222bd241 100644 --- 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 index 79aab7007d88..361c4828cccb 100644 --- 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/AgentZeroAwareTypingIndicator.tsx b/src/pages/inbox/report/ReportActionCompose/ComposerTypingIndicator.tsx similarity index 69% rename from src/pages/inbox/report/ReportActionCompose/AgentZeroAwareTypingIndicator.tsx rename to src/pages/inbox/report/ReportActionCompose/ComposerTypingIndicator.tsx index 835cc1323b4f..7ced0f7cc9c7 100644 --- a/src/pages/inbox/report/ReportActionCompose/AgentZeroAwareTypingIndicator.tsx +++ b/src/pages/inbox/report/ReportActionCompose/ComposerTypingIndicator.tsx @@ -1,8 +1,10 @@ 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; @@ -10,4 +12,4 @@ function AgentZeroAwareTypingIndicator({reportID}: {reportID: string}) { return ; } -export default AgentZeroAwareTypingIndicator; +export default ComposerTypingIndicator; diff --git a/src/pages/inbox/report/ReportActionCompose/EditOnlyReportActionCompose.tsx b/src/pages/inbox/report/ReportActionCompose/EditOnlyReportActionCompose.tsx index 2b49996acc8c..838846641a81 100644 --- 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 ( - - + + ); diff --git a/src/pages/inbox/report/ReportActionCompose/ReportActionCompose.tsx b/src/pages/inbox/report/ReportActionCompose/ReportActionCompose.tsx index bb6e5a27e4d1..035b236b53fa 100644 --- 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 ( - - + + - + ); } @@ -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 index b1e115c51634..1a60aa4c6880 100644 --- a/src/pages/inbox/report/ReportActionCompose/types.ts +++ b/src/pages/inbox/report/ReportActionCompose/types.ts @@ -1,12 +1,6 @@ -import type React from 'react'; - type ReportActionComposeProps = { /** Report ID */ reportID: string; }; -type ReportActionComposeWithChildrenProps = ReportActionComposeProps & { - children: React.ReactNode; -}; - -export type {ReportActionComposeProps, ReportActionComposeWithChildrenProps}; +export default ReportActionComposeProps; From 0eafc2a3fbf9d2827f8a9fbb7f0afde033b8ce5b Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Tue, 26 May 2026 09:20:29 +0200 Subject: [PATCH 6/7] refactor: remove redundant extra component --- .../ReportActionCompose/ComposerInputArea.tsx | 40 +++++++++++++++---- .../ReportActionCompose/ComposerLayout.tsx | 32 --------------- .../EditOnlyReportActionCompose.tsx | 17 -------- .../ReportActionCompose.tsx | 22 ++++++---- .../inbox/report/ReportActionCompose/types.ts | 6 --- 5 files changed, 47 insertions(+), 70 deletions(-) delete mode 100644 src/pages/inbox/report/ReportActionCompose/ComposerLayout.tsx delete mode 100644 src/pages/inbox/report/ReportActionCompose/EditOnlyReportActionCompose.tsx delete mode 100644 src/pages/inbox/report/ReportActionCompose/types.ts diff --git a/src/pages/inbox/report/ReportActionCompose/ComposerInputArea.tsx b/src/pages/inbox/report/ReportActionCompose/ComposerInputArea.tsx index 0b9f10f56212..2b59b2f8db2a 100644 --- a/src/pages/inbox/report/ReportActionCompose/ComposerInputArea.tsx +++ b/src/pages/inbox/report/ReportActionCompose/ComposerInputArea.tsx @@ -1,21 +1,45 @@ import React 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 ComposerActionButton from './ComposerActionButton'; import ComposerBox from './ComposerBox'; +import ComposerContainer from './ComposerContainer'; +import {useComposerState} from './ComposerContext'; import ComposerDropZone from './ComposerDropZone'; import ComposerEmojiPicker from './ComposerEmojiPicker'; +import ComposerImportedState from './ComposerImportedState'; import ComposerInput from './ComposerInput'; +import ComposerLocalTime from './ComposerLocalTime'; import ComposerSendButton from './ComposerSendButton'; function ComposerInputArea() { + const {reportID} = useComposerState(); + const styles = useThemeStyles(); + const [isComposerFullSize = false] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_IS_COMPOSER_FULL_SIZE}${reportID}`); + return ( - - - - - - - - + + + + + + + + + + + + + + + + ); } diff --git a/src/pages/inbox/report/ReportActionCompose/ComposerLayout.tsx b/src/pages/inbox/report/ReportActionCompose/ComposerLayout.tsx deleted file mode 100644 index 99f0715fd5a8..000000000000 --- a/src/pages/inbox/report/ReportActionCompose/ComposerLayout.tsx +++ /dev/null @@ -1,32 +0,0 @@ -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'; - -function ComposerLayout({children}: PropsWithChildren) { - const {reportID} = useComposerState(); - const styles = useThemeStyles(); - const [isComposerFullSize = false] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_IS_COMPOSER_FULL_SIZE}${reportID}`); - - return ( - - - - {children} - - - - ); -} - -export default ComposerLayout; diff --git a/src/pages/inbox/report/ReportActionCompose/EditOnlyReportActionCompose.tsx b/src/pages/inbox/report/ReportActionCompose/EditOnlyReportActionCompose.tsx deleted file mode 100644 index 838846641a81..000000000000 --- a/src/pages/inbox/report/ReportActionCompose/EditOnlyReportActionCompose.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; -import ComposerInputArea from './ComposerInputArea'; -import ComposerLayout from './ComposerLayout'; -import ComposerProvider from './ComposerProvider'; -import type ReportActionComposeProps from './types'; - -function EditOnlyReportActionCompose({reportID}: ReportActionComposeProps) { - return ( - - - - - - ); -} - -export default EditOnlyReportActionCompose; diff --git a/src/pages/inbox/report/ReportActionCompose/ReportActionCompose.tsx b/src/pages/inbox/report/ReportActionCompose/ReportActionCompose.tsx index 035b236b53fa..e3c101dc1003 100644 --- a/src/pages/inbox/report/ReportActionCompose/ReportActionCompose.tsx +++ b/src/pages/inbox/report/ReportActionCompose/ReportActionCompose.tsx @@ -12,25 +12,33 @@ import ComposerFooter from './ComposerFooter'; import ComposerImportedState from './ComposerImportedState'; import ComposerInput from './ComposerInput'; import ComposerInputArea from './ComposerInputArea'; -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'; + +type ReportActionComposeProps = { + /** Report ID */ + reportID: string; +}; function ReportActionCompose({reportID}: ReportActionComposeProps) { return ( - - - + ); } +function EditOnlyReportActionCompose({reportID}: ReportActionComposeProps) { + return ( + + + + ); +} + ReportActionCompose.LocalTime = ComposerLocalTime; ReportActionCompose.Container = ComposerContainer; ReportActionCompose.ImportedState = ComposerImportedState; @@ -44,7 +52,7 @@ ReportActionCompose.EditingButtons = ComposerEditingButtons; ReportActionCompose.Footer = ComposerFooter; ReportActionCompose.TypingIndicator = ComposerTypingIndicator; ReportActionCompose.ExceededLength = ComposerExceededLength; -ReportActionCompose.Layout = ComposerLayout; +ReportActionCompose.Layout = ComposerInputArea; ReportActionCompose.InputArea = ComposerInputArea; ReportActionCompose.DefaultFooter = ComposerDefaultFooter; ReportActionCompose.EditOnly = EditOnlyReportActionCompose; diff --git a/src/pages/inbox/report/ReportActionCompose/types.ts b/src/pages/inbox/report/ReportActionCompose/types.ts deleted file mode 100644 index 1a60aa4c6880..000000000000 --- a/src/pages/inbox/report/ReportActionCompose/types.ts +++ /dev/null @@ -1,6 +0,0 @@ -type ReportActionComposeProps = { - /** Report ID */ - reportID: string; -}; - -export default ReportActionComposeProps; From b4bdb340c8ecc367f76e376c4e4153ec416e42e3 Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Tue, 26 May 2026 09:42:37 +0200 Subject: [PATCH 7/7] fix: TS errors --- src/pages/inbox/ReportScreen.tsx | 4 ++-- .../ReportActionCompose/ReportActionCompose.tsx | 2 ++ tests/unit/ComposerLocalTimeTest.tsx | 13 +++++++++---- 3 files changed, 13 insertions(+), 6 deletions(-) diff --git a/src/pages/inbox/ReportScreen.tsx b/src/pages/inbox/ReportScreen.tsx index 684f69b66284..0fe5cab9d7fb 100644 --- a/src/pages/inbox/ReportScreen.tsx +++ b/src/pages/inbox/ReportScreen.tsx @@ -28,7 +28,7 @@ import useDeferNonEssentials from './hooks/useDeferNonEssentials'; import useFlushDeferredWriteOnFocus from './hooks/useFlushDeferredWriteOnFocus'; import LinkedActionNotFoundGuard from './LinkedActionNotFoundGuard'; import ReactionListWrapper from './ReactionListWrapper'; -import ReportActionComposePlaceholder from './report/ReportActionCompose/ReportActionComposePlaceholder'; +import ReportActionCompose from './report/ReportActionCompose/ReportActionCompose'; import {ReportActionEditMessageContextProvider, ReportScreenEditMessageProviderWithTransactionThread} from './report/ReportActionEditMessageContext'; import ReportFooter from './report/ReportFooter'; import useClearReportActionDraftsOnReportChange from './report/useClearReportActionDraftsOnReportChange'; @@ -148,7 +148,7 @@ function ReportScreen({route, navigation}: ReportScreenProps) { testID="report-actions-view-wrapper" > - {shouldDeferNonEssentials ? : } + {shouldDeferNonEssentials ? : } diff --git a/src/pages/inbox/report/ReportActionCompose/ReportActionCompose.tsx b/src/pages/inbox/report/ReportActionCompose/ReportActionCompose.tsx index e3c101dc1003..984b242f8c9d 100644 --- a/src/pages/inbox/report/ReportActionCompose/ReportActionCompose.tsx +++ b/src/pages/inbox/report/ReportActionCompose/ReportActionCompose.tsx @@ -13,6 +13,7 @@ import ComposerImportedState from './ComposerImportedState'; import ComposerInput from './ComposerInput'; import ComposerInputArea from './ComposerInputArea'; import ComposerLocalTime from './ComposerLocalTime'; +import ComposerPlaceholder from './ComposerPlaceholder'; import ComposerProvider from './ComposerProvider'; import ComposerSendButton from './ComposerSendButton'; import ComposerTypingIndicator from './ComposerTypingIndicator'; @@ -53,6 +54,7 @@ ReportActionCompose.Footer = ComposerFooter; ReportActionCompose.TypingIndicator = ComposerTypingIndicator; ReportActionCompose.ExceededLength = ComposerExceededLength; ReportActionCompose.Layout = ComposerInputArea; +ReportActionCompose.Placeholder = ComposerPlaceholder; ReportActionCompose.InputArea = ComposerInputArea; ReportActionCompose.DefaultFooter = ComposerDefaultFooter; ReportActionCompose.EditOnly = EditOnlyReportActionCompose; diff --git a/tests/unit/ComposerLocalTimeTest.tsx b/tests/unit/ComposerLocalTimeTest.tsx index 6906767de2f6..545530046d6e 100644 --- a/tests/unit/ComposerLocalTimeTest.tsx +++ b/tests/unit/ComposerLocalTimeTest.tsx @@ -5,6 +5,7 @@ import ComposeProviders from '@components/ComposeProviders'; import {LocaleContextProvider} from '@components/LocaleContextProvider'; import OnyxListItemProvider from '@components/OnyxListItemProvider'; import ComposerLocalTime from '@pages/inbox/report/ReportActionCompose/ComposerLocalTime'; +import ComposerProvider from '@pages/inbox/report/ReportActionCompose/ComposerProvider'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import type {PersonalDetailsList, Report} from '@src/types/onyx'; @@ -37,8 +38,12 @@ function buildReport(participantAccountIDs: number[]): Report { } as Report; } -function renderWithProviders(component: React.ReactElement) { - return render({component}); +function renderWithProviders(component: React.ReactElement, reportID: string) { + return render( + + {component} + , + ); } describe('ComposerLocalTime', () => { @@ -67,7 +72,7 @@ describe('ComposerLocalTime', () => { await Onyx.merge(ONYXKEYS.PERSONAL_DETAILS_LIST, personalDetails); await waitForBatchedUpdates(); - renderWithProviders(); + renderWithProviders(, REPORT_ID); await waitForBatchedUpdates(); @@ -92,7 +97,7 @@ describe('ComposerLocalTime', () => { await Onyx.merge(ONYXKEYS.PERSONAL_DETAILS_LIST, personalDetails); await waitForBatchedUpdates(); - const {toJSON} = renderWithProviders(); + const {toJSON} = renderWithProviders(, REPORT_ID); await waitForBatchedUpdates();