diff --git a/src/components/OnyxProvider.tsx b/src/components/OnyxProvider.tsx index af16b7300e1a..23ddf2b0c4dd 100644 --- a/src/components/OnyxProvider.tsx +++ b/src/components/OnyxProvider.tsx @@ -6,17 +6,15 @@ import createOnyxContext from './createOnyxContext'; // Set up any providers for individual keys. This should only be used in cases where many components will subscribe to // the same key (e.g. FlatList renderItem components) const [withNetwork, NetworkProvider, NetworkContext] = createOnyxContext(ONYXKEYS.NETWORK); -const [withPersonalDetails, PersonalDetailsProvider, , usePersonalDetails] = createOnyxContext(ONYXKEYS.PERSONAL_DETAILS_LIST); +const [, PersonalDetailsProvider, , usePersonalDetails] = createOnyxContext(ONYXKEYS.PERSONAL_DETAILS_LIST); const [withCurrentDate, CurrentDateProvider] = createOnyxContext(ONYXKEYS.CURRENT_DATE); -const [withReportActionsDrafts, ReportActionsDraftsProvider, , useReportActionsDrafts] = createOnyxContext(ONYXKEYS.COLLECTION.REPORT_ACTIONS_DRAFTS); -const [withBlockedFromConcierge, BlockedFromConciergeProvider, , useBlockedFromConcierge] = createOnyxContext(ONYXKEYS.NVP_BLOCKED_FROM_CONCIERGE); -const [withBetas, BetasProvider, BetasContext, useBetas] = createOnyxContext(ONYXKEYS.BETAS); -const [withReportCommentDrafts, ReportCommentDraftsProvider] = createOnyxContext(ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT); -const [withPreferredTheme, PreferredThemeProvider, PreferredThemeContext] = createOnyxContext(ONYXKEYS.PREFERRED_THEME); -const [withFrequentlyUsedEmojis, FrequentlyUsedEmojisProvider, , useFrequentlyUsedEmojis] = createOnyxContext(ONYXKEYS.FREQUENTLY_USED_EMOJIS); -const [withPreferredEmojiSkinTone, PreferredEmojiSkinToneProvider, PreferredEmojiSkinToneContext] = createOnyxContext(ONYXKEYS.PREFERRED_EMOJI_SKIN_TONE); +const [, BlockedFromConciergeProvider, , useBlockedFromConcierge] = createOnyxContext(ONYXKEYS.NVP_BLOCKED_FROM_CONCIERGE); +const [, BetasProvider, BetasContext, useBetas] = createOnyxContext(ONYXKEYS.BETAS); +const [, ReportCommentDraftsProvider] = createOnyxContext(ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT); +const [, PreferredThemeProvider, PreferredThemeContext] = createOnyxContext(ONYXKEYS.PREFERRED_THEME); +const [, FrequentlyUsedEmojisProvider, , useFrequentlyUsedEmojis] = createOnyxContext(ONYXKEYS.FREQUENTLY_USED_EMOJIS); +const [, PreferredEmojiSkinToneProvider, PreferredEmojiSkinToneContext] = createOnyxContext(ONYXKEYS.PREFERRED_EMOJI_SKIN_TONE); const [, SessionProvider, , useSession] = createOnyxContext(ONYXKEYS.SESSION); -const [, AccountProvider, , useAccount] = createOnyxContext(ONYXKEYS.ACCOUNT); type OnyxProviderProps = { /** Rendered child component */ @@ -29,7 +27,6 @@ function OnyxProvider(props: OnyxProviderProps) { components={[ NetworkProvider, PersonalDetailsProvider, - ReportActionsDraftsProvider, CurrentDateProvider, BlockedFromConciergeProvider, BetasProvider, @@ -38,7 +35,6 @@ function OnyxProvider(props: OnyxProviderProps) { FrequentlyUsedEmojisProvider, PreferredEmojiSkinToneProvider, SessionProvider, - AccountProvider, ]} > {props.children} @@ -52,24 +48,14 @@ export default OnyxProvider; export { withNetwork, - withPersonalDetails, usePersonalDetails, - withReportActionsDrafts, withCurrentDate, - withBlockedFromConcierge, - withBetas, NetworkContext, BetasContext, - withReportCommentDrafts, - withPreferredTheme, PreferredThemeContext, useBetas, - withFrequentlyUsedEmojis, useFrequentlyUsedEmojis, - withPreferredEmojiSkinTone, PreferredEmojiSkinToneContext, useBlockedFromConcierge, - useReportActionsDrafts, useSession, - useAccount, }; diff --git a/src/pages/home/report/ReportActionItem.tsx b/src/pages/home/report/ReportActionItem.tsx index e4dab8518eb2..11fe5b01ad67 100644 --- a/src/pages/home/report/ReportActionItem.tsx +++ b/src/pages/home/report/ReportActionItem.tsx @@ -2,7 +2,7 @@ import lodashIsEqual from 'lodash/isEqual'; import React, {memo, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react'; import type {GestureResponderEvent, TextInput} from 'react-native'; import {InteractionManager, View} from 'react-native'; -import type {OnyxCollection, OnyxEntry} from 'react-native-onyx'; +import type {OnyxEntry} from 'react-native-onyx'; import {useOnyx, withOnyx} from 'react-native-onyx'; import type {Emoji} from '@assets/emojis/types'; import {AttachmentContext} from '@components/AttachmentContext'; @@ -14,7 +14,7 @@ import * as Expensicons from '@components/Icon/Expensicons'; import InlineSystemMessage from '@components/InlineSystemMessage'; import KYCWall from '@components/KYCWall'; import OfflineWithFeedback from '@components/OfflineWithFeedback'; -import {useBlockedFromConcierge, usePersonalDetails, useReportActionsDrafts} from '@components/OnyxProvider'; +import {useBlockedFromConcierge, usePersonalDetails} from '@components/OnyxProvider'; import PressableWithSecondaryInteraction from '@components/PressableWithSecondaryInteraction'; import ReportActionItemEmojiReactions from '@components/Reactions/ReportActionItemEmojiReactions'; import RenderHTML from '@components/RenderHTML'; @@ -82,13 +82,6 @@ import ReportActionItemSingle from './ReportActionItemSingle'; import ReportActionItemThread from './ReportActionItemThread'; import ReportAttachmentsContext from './ReportAttachmentsContext'; -const getDraftMessage = (drafts: OnyxCollection, reportID: string, action: OnyxTypes.ReportAction): string | undefined => { - const originalReportID = ReportUtils.getOriginalReportID(reportID, action); - const draftKey = `${ONYXKEYS.COLLECTION.REPORT_ACTIONS_DRAFTS}${originalReportID}`; - const draftMessage = drafts?.[draftKey]?.[action.reportActionID]; - return typeof draftMessage === 'string' ? draftMessage : draftMessage?.message; -}; - type ReportActionItemOnyxProps = { /** IOU report for this action, if any */ iouReport: OnyxEntry; @@ -185,8 +178,13 @@ function ReportActionItem({ const {translate} = useLocalize(); const {shouldUseNarrowLayout} = useResponsiveLayout(); const blockedFromConcierge = useBlockedFromConcierge(); - const reportActionDrafts = useReportActionsDrafts(); - const draftMessage = useMemo(() => getDraftMessage(reportActionDrafts, report.reportID, action), [action, report.reportID, reportActionDrafts]); + const originalReportID = useMemo(() => ReportUtils.getOriginalReportID(report.reportID, action) ?? '-1', [report.reportID, action]); + const [draftMessage] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS_DRAFTS}${originalReportID}`, { + selector: (draftMessagesForReport) => { + const matchingDraftMessage = draftMessagesForReport?.[action.reportActionID]; + return typeof matchingDraftMessage === 'string' ? matchingDraftMessage : matchingDraftMessage?.message; + }, + }); const theme = useTheme(); const styles = useThemeStyles(); const [reportNameValuePairs] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${report?.reportID ?? -1}`); @@ -204,7 +202,6 @@ function ReportActionItem({ const popoverAnchorRef = useRef>(null); const downloadedPreviews = useRef([]); const prevDraftMessage = usePrevious(draftMessage); - const originalReportID = ReportUtils.getOriginalReportID(report.reportID, action); // The app would crash due to subscribing to the entire report collection if parentReportID is an empty string. So we should have a fallback ID here. // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing @@ -917,7 +914,7 @@ function ReportActionItem({ reportID={report.reportID} reportActionID={action.reportActionID} anchor={popoverAnchorRef} - originalReportID={originalReportID ?? '-1'} + originalReportID={originalReportID} isArchivedRoom={isArchivedRoom} displayAsGroup={displayAsGroup} disabledActions={disabledActions}