From aca76d1d50190bd32dcf60ec8068d6dbc1fa7bf8 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Fri, 10 May 2024 13:59:25 +0800 Subject: [PATCH] replace withOnyx with useOnyx hook --- src/components/MoneyReportHeader.tsx | 50 ++++---------------- src/components/MoneyRequestHeader.tsx | 67 ++++----------------------- 2 files changed, 19 insertions(+), 98 deletions(-) diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx index e1a998f78cab..4b6345dd1b0c 100644 --- a/src/components/MoneyReportHeader.tsx +++ b/src/components/MoneyReportHeader.tsx @@ -1,7 +1,7 @@ import React, {useCallback, useEffect, useMemo, useState} from 'react'; import {View} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; -import {withOnyx} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; @@ -24,21 +24,7 @@ import MoneyReportHeaderStatusBar from './MoneyReportHeaderStatusBar'; import ProcessMoneyReportHoldMenu from './ProcessMoneyReportHoldMenu'; import SettlementButton from './SettlementButton'; -type MoneyReportHeaderOnyxProps = { - /** The chat report this report is linked to */ - chatReport: OnyxEntry; - - /** The next step for the report */ - nextStep: OnyxEntry; - - /** Session info for the currently logged in user. */ - session: OnyxEntry; - - /** The transaction thread report associated with the current report, if any */ - transactionThreadReport: OnyxEntry; -}; - -type MoneyReportHeaderProps = MoneyReportHeaderOnyxProps & { +type MoneyReportHeaderProps = { /** The report currently being looked at */ report: OnyxTypes.Report; @@ -59,17 +45,12 @@ type MoneyReportHeaderProps = MoneyReportHeaderOnyxProps & { onBackButtonPress: () => void; }; -function MoneyReportHeader({ - session, - policy, - chatReport, - nextStep, - report: moneyRequestReport, - transactionThreadReport, - reportActions, - shouldUseNarrowLayout = false, - onBackButtonPress, -}: MoneyReportHeaderProps) { +function MoneyReportHeader({policy, report: moneyRequestReport, transactionThreadReportID, reportActions, shouldUseNarrowLayout = false, onBackButtonPress}: MoneyReportHeaderProps) { + const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${moneyRequestReport.chatReportID}`); + const [nextStep] = useOnyx(`${ONYXKEYS.COLLECTION.NEXT_STEP}${moneyRequestReport.reportID}`); + const [transactionThreadReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${transactionThreadReportID}`); + const [session] = useOnyx(ONYXKEYS.SESSION); + const styles = useThemeStyles(); const [isDeleteRequestModalVisible, setIsDeleteRequestModalVisible] = useState(false); const {translate} = useLocalize(); @@ -318,17 +299,4 @@ function MoneyReportHeader({ MoneyReportHeader.displayName = 'MoneyReportHeader'; -export default withOnyx({ - chatReport: { - key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT}${report.chatReportID}`, - }, - nextStep: { - key: ({report}) => `${ONYXKEYS.COLLECTION.NEXT_STEP}${report.reportID}`, - }, - transactionThreadReport: { - key: ({transactionThreadReportID}) => `${ONYXKEYS.COLLECTION.REPORT}${transactionThreadReportID}`, - }, - session: { - key: ONYXKEYS.SESSION, - }, -})(MoneyReportHeader); +export default MoneyReportHeader; diff --git a/src/components/MoneyRequestHeader.tsx b/src/components/MoneyRequestHeader.tsx index 4616cb972a83..19d43fca94f9 100644 --- a/src/components/MoneyRequestHeader.tsx +++ b/src/components/MoneyRequestHeader.tsx @@ -1,6 +1,6 @@ import React, {useCallback, useEffect, useState} from 'react'; import {View} from 'react-native'; -import {withOnyx} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import type {OnyxEntry} from 'react-native-onyx'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -14,7 +14,7 @@ import * as IOU from '@userActions/IOU'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; -import type {Policy, Report, ReportAction, ReportActions, Session, Transaction} from '@src/types/onyx'; +import type {Policy, Report, ReportAction} from '@src/types/onyx'; import type {OriginalMessageIOU} from '@src/types/onyx/OriginalMessage'; import ConfirmModal from './ConfirmModal'; import HeaderWithBackButton from './HeaderWithBackButton'; @@ -22,25 +22,7 @@ import * as Expensicons from './Icon/Expensicons'; import MoneyRequestHeaderStatusBar from './MoneyRequestHeaderStatusBar'; import ProcessMoneyRequestHoldMenu from './ProcessMoneyRequestHoldMenu'; -type MoneyRequestHeaderOnyxProps = { - /** Session info for the currently logged in user. */ - session: OnyxEntry; - - /** The expense report or iou report (only will have a value if this is a transaction thread) */ - parentReport: OnyxEntry; - - /** All the data for the transaction */ - transaction: OnyxEntry; - - /** All report actions */ - // eslint-disable-next-line react/no-unused-prop-types - parentReportActions: OnyxEntry; - - /** Whether we should show the Hold Interstitial explaining the feature */ - shownHoldUseExplanation: OnyxEntry; -}; - -type MoneyRequestHeaderProps = MoneyRequestHeaderOnyxProps & { +type MoneyRequestHeaderProps = { /** The report currently being looked at */ report: Report; @@ -57,17 +39,12 @@ type MoneyRequestHeaderProps = MoneyRequestHeaderOnyxProps & { onBackButtonPress: () => void; }; -function MoneyRequestHeader({ - session, - parentReport, - report, - parentReportAction, - transaction, - shownHoldUseExplanation = false, - policy, - shouldUseNarrowLayout = false, - onBackButtonPress, -}: MoneyRequestHeaderProps) { +function MoneyRequestHeader({report, parentReportAction, policy, shouldUseNarrowLayout = false, onBackButtonPress}: MoneyRequestHeaderProps) { + const [parentReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${report.parentReportID}`); + const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${(parentReportAction as ReportAction & OriginalMessageIOU)?.originalMessage?.IOUTransactionID ?? 0}`); + const [session] = useOnyx(ONYXKEYS.SESSION); + const [shownHoldUseExplanation] = useOnyx(ONYXKEYS.NVP_HOLD_USE_EXPLAINED, {initWithStoredValues: false}); + const styles = useThemeStyles(); const {translate} = useLocalize(); const [isDeleteModalVisible, setIsDeleteModalVisible] = useState(false); @@ -241,28 +218,4 @@ function MoneyRequestHeader({ MoneyRequestHeader.displayName = 'MoneyRequestHeader'; -const MoneyRequestHeaderWithTransaction = withOnyx>({ - transaction: { - key: ({report, parentReportActions}) => { - const parentReportAction = (report.parentReportActionID && parentReportActions ? parentReportActions[report.parentReportActionID] : {}) as ReportAction & OriginalMessageIOU; - return `${ONYXKEYS.COLLECTION.TRANSACTION}${parentReportAction?.originalMessage?.IOUTransactionID ?? 0}`; - }, - }, - shownHoldUseExplanation: { - key: ONYXKEYS.NVP_HOLD_USE_EXPLAINED, - initWithStoredValues: true, - }, -})(MoneyRequestHeader); - -export default withOnyx, Omit>({ - session: { - key: ONYXKEYS.SESSION, - }, - parentReport: { - key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT}${report.parentReportID}`, - }, - parentReportActions: { - key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report.parentReportID ?? '0'}`, - canEvict: false, - }, -})(MoneyRequestHeaderWithTransaction); +export default MoneyRequestHeader;