replace withOnyx with useOnyx hook

Expensify · May 10, 2024 · aca76d1 · aca76d1
1 parent 807c945
commit aca76d1
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 98 deletions.
diff --git 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<OnyxTypes.Report>;
-
-    /** The next step for the report */
-    nextStep: OnyxEntry<OnyxTypes.ReportNextStep>;
-
-    /** Session info for the currently logged in user. */
-    session: OnyxEntry<OnyxTypes.Session>;
-
-    /** The transaction thread report associated with the current report, if any */
-    transactionThreadReport: OnyxEntry<OnyxTypes.Report>;
-};
-
-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<MoneyReportHeaderProps, MoneyReportHeaderOnyxProps>({
-    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
@@ -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,33 +14,15 @@ 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';
 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<Session>;
-
-    /** The expense report or iou report (only will have a value if this is a transaction thread) */
-    parentReport: OnyxEntry<Report>;
-
-    /** All the data for the transaction */
-    transaction: OnyxEntry<Transaction>;
-
-    /** All report actions */
-    // eslint-disable-next-line react/no-unused-prop-types
-    parentReportActions: OnyxEntry<ReportActions>;
-
-    /** Whether we should show the Hold Interstitial explaining the feature */
-    shownHoldUseExplanation: OnyxEntry<boolean>;
-};
-
-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<MoneyRequestHeaderProps, Pick<MoneyRequestHeaderOnyxProps, 'transaction' | 'shownHoldUseExplanation'>>({
-    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<MoneyRequestHeaderProps, 'transaction' | 'shownHoldUseExplanation'>, Omit<MoneyRequestHeaderOnyxProps, 'transaction' | 'shownHoldUseExplanation'>>({
-    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;