diff --git a/src/components/ChronosTimerHeaderButton.tsx b/src/components/ChronosTimerHeaderButton.tsx index 69f5c9ef9362..2da68c501ffe 100644 --- a/src/components/ChronosTimerHeaderButton.tsx +++ b/src/components/ChronosTimerHeaderButton.tsx @@ -47,16 +47,12 @@ function ChronosTimerHeaderButton({report}: ChronosTimerHeaderButtonProps) { const {accountID: currentUserAccountID, timezone: timezoneParam} = useCurrentUserPersonalDetails(); const reportActionsOnyxKey = `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report.reportID}` as OnyxKey; - const [timerStartTime] = useOnyx( - reportActionsOnyxKey, - { - selector: (reportActions: unknown): string | null => { - const sorted = getSortedReportActionsForDisplay(reportActions as OnyxEntry, canPerformWriteAction, false, visibleReportActionsData, report.reportID); - return getTimeOfChronosTimerRunningFromVisibleActions(sorted, currentUserAccountID); - }, + const [timerStartTime] = useOnyx(reportActionsOnyxKey, { + selector: (reportActions: unknown): string | null => { + const sorted = getSortedReportActionsForDisplay(reportActions as OnyxEntry, canPerformWriteAction, false, visibleReportActionsData, report.reportID); + return getTimeOfChronosTimerRunningFromVisibleActions(sorted, currentUserAccountID); }, - [canPerformWriteAction, visibleReportActionsData, report.reportID, currentUserAccountID], - ); + }); const [isLoadingInitialReportActions] = useOnyx(`${ONYXKEYS.COLLECTION.RAM_ONLY_REPORT_LOADING_STATE}${report.reportID}`, { selector: isLoadingInitialReportActionsSelector, diff --git a/src/components/Reactions/ReactionTooltipContent.tsx b/src/components/Reactions/ReactionTooltipContent.tsx index d4e280145ddf..d4e832a064c2 100644 --- a/src/components/Reactions/ReactionTooltipContent.tsx +++ b/src/components/Reactions/ReactionTooltipContent.tsx @@ -50,13 +50,9 @@ function userNamesStringSelector(accountIDs: number[], currentUserAccountID: num function ReactionTooltipContent({accountIDs, emojiCodes, emojiName, currentUserAccountID}: ReactionTooltipContentProps) { const styles = useThemeStyles(); const {translate, preferredLocale} = useLocalize(); - const [namesString] = useOnyx( - ONYXKEYS.PERSONAL_DETAILS_LIST, - { - selector: userNamesStringSelector(accountIDs, currentUserAccountID, translate), - }, - [accountIDs, currentUserAccountID, translate], - ); + const [namesString] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, { + selector: (personalDetails: OnyxEntry) => userNamesStringSelector(accountIDs, currentUserAccountID, translate)(personalDetails), + }); const localizedEmojiName = getLocalizedEmojiName(emojiName, preferredLocale); return ( diff --git a/src/pages/inbox/report/ReactionList/PopoverReactionList.tsx b/src/pages/inbox/report/ReactionList/PopoverReactionList.tsx index f299949488bc..2930a100da99 100644 --- a/src/pages/inbox/report/ReactionList/PopoverReactionList.tsx +++ b/src/pages/inbox/report/ReactionList/PopoverReactionList.tsx @@ -9,10 +9,11 @@ import type {ReactionListAnchor} from '@pages/inbox/ReportScreenContext'; import ONYXKEYS from '@src/ONYXKEYS'; import {multiPersonalDetailsSelector} from '@src/selectors/PersonalDetails'; -import type {PersonalDetails} from '@src/types/onyx'; +import type {PersonalDetails, PersonalDetailsList} from '@src/types/onyx'; import getEmptyArray from '@src/types/utils/getEmptyArray'; import type {RefObject} from 'react'; +import type {OnyxEntry} from 'react-native-onyx'; import React, {useEffect} from 'react'; @@ -39,13 +40,9 @@ function PopoverReactionList({isVisible, emojiName, reportActionID, anchorPositi const isReady = !!selectedReaction; const {emojiCodes = [], reactionCount = 0, hasUserReacted = false, userAccountIDs = []} = selectedReaction ? getEmojiReactionDetails(emojiName, selectedReaction, accountID) : {}; - const [users = getEmptyArray()] = useOnyx( - ONYXKEYS.PERSONAL_DETAILS_LIST, - { - selector: multiPersonalDetailsSelector(isReady ? userAccountIDs : []), - }, - [isReady, userAccountIDs], - ); + const [users = getEmptyArray()] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, { + selector: (personalDetailsList: OnyxEntry) => multiPersonalDetailsSelector(isReady ? userAccountIDs : getEmptyArray())(personalDetailsList), + }); // Hide the list when all reactions are removed useEffect(() => { diff --git a/src/pages/inbox/report/ReportActionCompose/SuggestionMention.tsx b/src/pages/inbox/report/ReportActionCompose/SuggestionMention.tsx index 474ac674a786..6341f5f29327 100644 --- a/src/pages/inbox/report/ReportActionCompose/SuggestionMention.tsx +++ b/src/pages/inbox/report/ReportActionCompose/SuggestionMention.tsx @@ -100,7 +100,7 @@ function SuggestionMention({ ); const [conciergeReportID = ''] = useOnyx(ONYXKEYS.CONCIERGE_REPORT_ID); - const [mentionableReports] = useOnyx(ONYXKEYS.COLLECTION.REPORT, {selector: mentionableReportsSelector}, [policyID]); + const [mentionableReports] = useOnyx(ONYXKEYS.COLLECTION.REPORT, {selector: mentionableReportsSelector}); const currentUserPersonalDetails = useCurrentUserPersonalDetails(); const isMentionSuggestionsMenuVisible = !!suggestionValues.suggestedMentions.length && suggestionValues.shouldShowSuggestionMenu; diff --git a/src/pages/inbox/report/ReportActionItem.tsx b/src/pages/inbox/report/ReportActionItem.tsx index 81d73bd09c2d..3c53bb98c5f9 100644 --- a/src/pages/inbox/report/ReportActionItem.tsx +++ b/src/pages/inbox/report/ReportActionItem.tsx @@ -204,10 +204,10 @@ function ReportActionItem({ const shouldDisplayContextMenuValue = shouldDisplayContextMenu && !isConciergeGreeting; const {transitionActionSheetState} = ActionSheetAwareScrollView.useActionSheetAwareScrollViewActions(); const {translate, datetimeToCalendarTime} = useLocalize(); - const [actorDisplayName] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {selector: personalDetailsDisplayNameSelector(action.actorAccountID ?? CONST.DEFAULT_NUMBER_ID, translate)}, [ - action.actorAccountID, - translate, - ]); + const actorAccountID = action.actorAccountID ?? CONST.DEFAULT_NUMBER_ID; + const [actorDisplayName] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, { + selector: (personalDetailsList: OnyxEntry) => personalDetailsDisplayNameSelector(actorAccountID, translate)(personalDetailsList), + }); const {showConfirmModal} = useConfirmModal(); const {shouldUseNarrowLayout} = useResponsiveLayout(); const theme = useTheme(); diff --git a/src/pages/inbox/report/ReportActionItemCreated.tsx b/src/pages/inbox/report/ReportActionItemCreated.tsx index 3e76244c6f0d..2084a0f98740 100644 --- a/src/pages/inbox/report/ReportActionItemCreated.tsx +++ b/src/pages/inbox/report/ReportActionItemCreated.tsx @@ -19,7 +19,7 @@ import ONYXKEYS from '@src/ONYXKEYS'; import {hasSeenTourSelector} from '@selectors/Onboarding'; import {conciergePersonalDetailSelector, isOptimisticPersonalDetailSelector, personalDetailsSelector} from '@selectors/PersonalDetails'; -import React, {memo, useMemo} from 'react'; +import React, {memo} from 'react'; import {View} from 'react-native'; import AnimatedEmptyStateBackground from './AnimatedEmptyStateBackground'; @@ -46,8 +46,7 @@ function ReportActionItemCreated({reportID, policyID}: ReportActionItemCreatedPr const currentUserPersonalDetail = useCurrentUserPersonalDetails(); const {accountID: currentUserAccountID} = currentUserPersonalDetail; const [conciergePersonalDetail] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {selector: conciergePersonalDetailSelector}); - const reportOwnerSelector = useMemo(() => personalDetailsSelector(report?.ownerAccountID), [report?.ownerAccountID]); - const [reportOwnerPersonalDetail] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {selector: reportOwnerSelector}, [reportOwnerSelector]); + const [reportOwnerPersonalDetail] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {selector: personalDetailsSelector(report?.ownerAccountID)}); const otherParticipantAccountID = Object.keys(report?.participants ?? {}) diff --git a/src/pages/inbox/report/ReportActionItemParentAction.tsx b/src/pages/inbox/report/ReportActionItemParentAction.tsx index b91f754849cd..2d6d6e17c9e6 100644 --- a/src/pages/inbox/report/ReportActionItemParentAction.tsx +++ b/src/pages/inbox/report/ReportActionItemParentAction.tsx @@ -19,7 +19,7 @@ import type {OnyxCollection, OnyxEntry} from 'react-native-onyx'; import {hasSeenTourSelector} from '@selectors/Onboarding'; import {conciergePersonalDetailSelector, personalDetailsSelector} from '@selectors/PersonalDetails'; -import React, {useCallback} from 'react'; +import React from 'react'; import {View} from 'react-native'; import AncestorReportActionItem from './AncestorReportActionItem'; @@ -77,14 +77,14 @@ function ReportActionItemParentAction({ const [conciergePersonalDetail] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {selector: conciergePersonalDetailSelector}); const [reportOwnerPersonalDetail] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {selector: personalDetailsSelector(report?.ownerAccountID)}); - const getLinkedTransactionRouteError = useCallback((transaction: OnyxEntry) => { - return transaction?.errorFields?.route; - }, []); - - const [linkedTransactionRouteError] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, {selector: getLinkedTransactionRouteError}); + const [linkedTransactionRouteError] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, { + selector: (transaction: OnyxEntry) => { + return transaction?.errorFields?.route; + }, + }); - const ancestorReportNameValuePairsSelector = useCallback( - (allReportNameValuePairs: OnyxCollection) => { + const [ancestorsReportNameValuePairs] = useOnyx(ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS, { + selector: (allReportNameValuePairs: OnyxCollection) => { if (!allReportNameValuePairs) { return {}; } @@ -95,16 +95,7 @@ function ReportActionItemParentAction({ } return ancestorReportNameValuePairs; }, - [ancestors], - ); - - const [ancestorsReportNameValuePairs] = useOnyx( - ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS, - { - selector: ancestorReportNameValuePairsSelector, - }, - [ancestors], - ); + }); const [conciergeReportID] = useOnyx(ONYXKEYS.CONCIERGE_REPORT_ID); const [introSelected] = useOnyx(ONYXKEYS.NVP_INTRO_SELECTED); diff --git a/src/pages/inbox/report/actionContents/ChatActionableButtons.tsx b/src/pages/inbox/report/actionContents/ChatActionableButtons.tsx index 221871a8b355..34d0f8390b1e 100644 --- a/src/pages/inbox/report/actionContents/ChatActionableButtons.tsx +++ b/src/pages/inbox/report/actionContents/ChatActionableButtons.tsx @@ -63,7 +63,7 @@ function ChatActionableButtons({action, originalReportID, reportID, hasPendingFo const [userBillingGracePeriodEnds] = useOnyx(ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_USER_BILLING_GRACE_PERIOD_END); const [amountOwed] = useOnyx(ONYXKEYS.NVP_PRIVATE_AMOUNT_OWED); const [ownerBillingGracePeriodEnd] = useOnyx(ONYXKEYS.NVP_PRIVATE_OWNER_BILLING_GRACE_PERIOD_END); - const [filteredPoliciesInfo] = useOnyx(ONYXKEYS.COLLECTION.POLICY, {selector: createFilteredPoliciesInfoSelector(personalDetail.email)}, [personalDetail.email]); + const [filteredPoliciesInfo] = useOnyx(ONYXKEYS.COLLECTION.POLICY, {selector: createFilteredPoliciesInfoSelector(personalDetail.email)}); const filteredPoliciesCount = filteredPoliciesInfo?.filteredPoliciesCount ?? 0; const firstPolicyID = filteredPoliciesInfo?.firstPolicyID; const trackExpenseTransactionID = isActionableTrackExpense(action) ? getOriginalMessage(action)?.transactionID : undefined; diff --git a/src/pages/inbox/report/actionContents/ReimbursementQueuedContent.tsx b/src/pages/inbox/report/actionContents/ReimbursementQueuedContent.tsx index 35c9eb640969..93cf408518e6 100644 --- a/src/pages/inbox/report/actionContents/ReimbursementQueuedContent.tsx +++ b/src/pages/inbox/report/actionContents/ReimbursementQueuedContent.tsx @@ -18,7 +18,7 @@ import {openPersonalBankAccountSetupView} from '@userActions/BankAccounts'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; -import type {Report, ReportAction} from '@src/types/onyx'; +import type {PersonalDetailsList, Report, ReportAction} from '@src/types/onyx'; import type {OnyxEntry} from 'react-native-onyx'; @@ -49,10 +49,10 @@ function ReimbursementQueuedContent({action, report, iouReport}: ReimbursementQu const [isUserValidated] = useOnyx(ONYXKEYS.ACCOUNT, {selector: isUserValidatedSelector}); const targetReport = isChatThread(report) ? parentReport : report; - const [ownerDisplayName] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {selector: personalDetailsDisplayNameSelector(targetReport?.ownerAccountID ?? CONST.DEFAULT_NUMBER_ID, translate)}, [ - targetReport?.ownerAccountID, - translate, - ]); + const ownerAccountID = targetReport?.ownerAccountID ?? CONST.DEFAULT_NUMBER_ID; + const [ownerDisplayName] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, { + selector: (personalDetailsList: OnyxEntry) => personalDetailsDisplayNameSelector(ownerAccountID, translate)(personalDetailsList), + }); const submitterDisplayName = formatPhoneNumber(ownerDisplayName ?? ''); const paymentType = getOriginalMessage(action)?.paymentType ?? ''; const missingPaymentMethod = getIndicatedMissingPaymentMethod(userWalletTierName, targetReport?.reportID, action, bankAccountList); diff --git a/src/pages/inbox/report/useActiveDraftReportAction.ts b/src/pages/inbox/report/useActiveDraftReportAction.ts index 8e7f43715fe8..fb1a1204a6fd 100644 --- a/src/pages/inbox/report/useActiveDraftReportAction.ts +++ b/src/pages/inbox/report/useActiveDraftReportAction.ts @@ -143,72 +143,64 @@ function useActiveDraftReportAction({reportID, effectiveTransactionThreadReportI ? undefined : effectiveTransactionThreadReportID; - const [reportActions] = useOnyx( - ONYXKEYS.COLLECTION.REPORT_ACTIONS, - { - selector: (allReportActions) => { - if (!allReportActions) { - return {}; - } - - const scopedReportActionsSlice: OnyxCollection = {}; - - if (reportID) { - const visibleReportActionsKey = `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`; - scopedReportActionsSlice[visibleReportActionsKey] = allReportActions[visibleReportActionsKey]; - } - - if (transactionThreadReportID != null) { - const transactionThreadActionsKey = `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${transactionThreadReportID}`; - scopedReportActionsSlice[transactionThreadActionsKey] = allReportActions[transactionThreadActionsKey]; - } - - for (const ancestor of ancestors) { - const ancestorReportActionsKey = `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${ancestor.report.reportID}`; - scopedReportActionsSlice[ancestorReportActionsKey] = allReportActions[ancestorReportActionsKey]; - } - - return scopedReportActionsSlice; - }, + const [reportActions] = useOnyx(ONYXKEYS.COLLECTION.REPORT_ACTIONS, { + selector: (allReportActions: OnyxCollection) => { + if (!allReportActions) { + return {}; + } + + const scopedReportActionsSlice: OnyxCollection = {}; + + if (reportID) { + const visibleReportActionsKey = `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`; + scopedReportActionsSlice[visibleReportActionsKey] = allReportActions[visibleReportActionsKey]; + } + + if (transactionThreadReportID != null) { + const transactionThreadActionsKey = `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${transactionThreadReportID}`; + scopedReportActionsSlice[transactionThreadActionsKey] = allReportActions[transactionThreadActionsKey]; + } + + for (const ancestor of ancestors) { + const ancestorReportActionsKey = `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${ancestor.report.reportID}`; + scopedReportActionsSlice[ancestorReportActionsKey] = allReportActions[ancestorReportActionsKey]; + } + + return scopedReportActionsSlice; }, - [ancestors, reportID, transactionThreadReportID], - ); - - const [reportActionsDrafts] = useOnyx( - ONYXKEYS.COLLECTION.REPORT_ACTIONS_DRAFTS, - { - selector: (allDrafts) => { - if (!allDrafts) { - return {}; - } - - const scopedDraftsSlice: OnyxCollection = {}; - - if (reportID) { - const currentDraftKey = `${ONYXKEYS.COLLECTION.REPORT_ACTIONS_DRAFTS}${reportID}`; - scopedDraftsSlice[currentDraftKey] = allDrafts[currentDraftKey]; - } - - if (transactionThreadReportID != null) { - const transactionThreadDraftKey = `${ONYXKEYS.COLLECTION.REPORT_ACTIONS_DRAFTS}${transactionThreadReportID}`; - scopedDraftsSlice[transactionThreadDraftKey] = allDrafts[transactionThreadDraftKey]; - } + }); - for (const ancestor of ancestors) { - const actionsForAncestorRow = reportActions?.[`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${ancestor.report.reportID}`]; - const draftOwningReportID = getOriginalReportID(ancestor.report.reportID, ancestor.reportAction, actionsForAncestorRow); - if (!draftOwningReportID) { - continue; - } - const ancestorDraftBucketKey = `${ONYXKEYS.COLLECTION.REPORT_ACTIONS_DRAFTS}${draftOwningReportID}`; - scopedDraftsSlice[ancestorDraftBucketKey] = allDrafts[ancestorDraftBucketKey]; + const [reportActionsDrafts] = useOnyx(ONYXKEYS.COLLECTION.REPORT_ACTIONS_DRAFTS, { + selector: (allDrafts: OnyxCollection) => { + if (!allDrafts) { + return {}; + } + + const scopedDraftsSlice: OnyxCollection = {}; + + if (reportID) { + const currentDraftKey = `${ONYXKEYS.COLLECTION.REPORT_ACTIONS_DRAFTS}${reportID}`; + scopedDraftsSlice[currentDraftKey] = allDrafts[currentDraftKey]; + } + + if (transactionThreadReportID != null) { + const transactionThreadDraftKey = `${ONYXKEYS.COLLECTION.REPORT_ACTIONS_DRAFTS}${transactionThreadReportID}`; + scopedDraftsSlice[transactionThreadDraftKey] = allDrafts[transactionThreadDraftKey]; + } + + for (const ancestor of ancestors) { + const actionsForAncestorRow = reportActions?.[`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${ancestor.report.reportID}`]; + const draftOwningReportID = getOriginalReportID(ancestor.report.reportID, ancestor.reportAction, actionsForAncestorRow); + if (!draftOwningReportID) { + continue; } + const ancestorDraftBucketKey = `${ONYXKEYS.COLLECTION.REPORT_ACTIONS_DRAFTS}${draftOwningReportID}`; + scopedDraftsSlice[ancestorDraftBucketKey] = allDrafts[ancestorDraftBucketKey]; + } - return scopedDraftsSlice; - }, + return scopedDraftsSlice; }, - [ancestors, reportActions, reportID, transactionThreadReportID], - ); + }); return computeResolvedActiveDraftEdit({ancestors, reportActions, reportActionsDrafts, reportID, transactionThreadReportID}); } diff --git a/src/pages/settings/Report/ReportDetailsColumnsPage.tsx b/src/pages/settings/Report/ReportDetailsColumnsPage.tsx index 14fba0c005af..7e9f5fb9f30d 100644 --- a/src/pages/settings/Report/ReportDetailsColumnsPage.tsx +++ b/src/pages/settings/Report/ReportDetailsColumnsPage.tsx @@ -23,7 +23,7 @@ import arraysEqual from '@src/utils/arraysEqual'; import type {OnyxCollection} from 'react-native-onyx'; import {useRoute} from '@react-navigation/native'; -import React, {useCallback, useMemo} from 'react'; +import React, {useMemo} from 'react'; /** * Default selected columns for the report details table. @@ -47,16 +47,14 @@ function ReportDetailsColumnsPage() { const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${report?.policyID}`); // Selector keeps re-renders scoped to this report's transactions. We intentionally return undefined // while the collection is loading so the caller can distinguish "loading" from "no transactions". - const reportTransactionsSelector = useCallback( - (transactions: OnyxCollection): Transaction[] | undefined => { + const [reportTransactions] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION, { + selector: (transactions: OnyxCollection): Transaction[] | undefined => { if (!transactions) { return undefined; } return Object.values(transactions).filter((transaction): transaction is Transaction => !!transaction && transaction.reportID === reportID); }, - [reportID], - ); - const [reportTransactions] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION, {selector: reportTransactionsSelector}, [reportTransactionsSelector]); + }); const currentUserDetails = useCurrentUserPersonalDetails(); const allTypeCustomColumns = Object.values(CONST.SEARCH.REPORT_DETAILS_CUSTOM_COLUMNS) as SearchCustomColumnIds[]; diff --git a/src/pages/tasks/NewTaskDetailsPage.tsx b/src/pages/tasks/NewTaskDetailsPage.tsx index 19f2fba863d0..157e04b35a89 100644 --- a/src/pages/tasks/NewTaskDetailsPage.tsx +++ b/src/pages/tasks/NewTaskDetailsPage.tsx @@ -38,7 +38,7 @@ type NewTaskDetailsPageProps = PlatformStackScreenProps