From b56aebd5581d8052dd76c5f1aa352eac1ee469b6 Mon Sep 17 00:00:00 2001 From: daledah Date: Mon, 16 Sep 2024 16:47:09 +0700 Subject: [PATCH 1/4] fix: migrate withFullTransactionOrNotFound to useOnyx --- .../step/withFullTransactionOrNotFound.tsx | 34 ++++++------------- 1 file changed, 11 insertions(+), 23 deletions(-) diff --git a/src/pages/iou/request/step/withFullTransactionOrNotFound.tsx b/src/pages/iou/request/step/withFullTransactionOrNotFound.tsx index 491c37c9a402..b4984287955a 100644 --- a/src/pages/iou/request/step/withFullTransactionOrNotFound.tsx +++ b/src/pages/iou/request/step/withFullTransactionOrNotFound.tsx @@ -2,8 +2,7 @@ import type {RouteProp} from '@react-navigation/native'; import {useIsFocused} from '@react-navigation/native'; import type {ComponentType, ForwardedRef, RefAttributes} from 'react'; import React, {forwardRef} from 'react'; -import type {OnyxEntry} from 'react-native-onyx'; -import {withOnyx} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView'; import getComponentDisplayName from '@libs/getComponentDisplayName'; import * as IOUUtils from '@libs/IOUUtils'; @@ -11,12 +10,6 @@ import type {MoneyRequestNavigatorParamList} from '@libs/Navigation/types'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import type SCREENS from '@src/SCREENS'; -import type {Transaction} from '@src/types/onyx'; - -type WithFullTransactionOrNotFoundOnyxProps = { - /** Indicates whether the report data is loading */ - transaction: OnyxEntry; -}; type MoneyRequestRouteName = | typeof SCREENS.MONEY_REQUEST.CREATE @@ -40,12 +33,18 @@ type MoneyRequestRouteName = type Route = RouteProp; -type WithFullTransactionOrNotFoundProps = WithFullTransactionOrNotFoundOnyxProps & {route: Route}; +type WithFullTransactionOrNotFoundProps = {route: Route}; export default function , TRef>(WrappedComponent: ComponentType>) { // eslint-disable-next-line rulesdir/no-negated-variables function WithFullTransactionOrNotFound(props: TProps, ref: ForwardedRef) { - const transactionID = props.transaction?.transactionID; + const transactionID = props.route.params.transactionID ?? -1; + const userAction = 'action' in props.route.params && props.route.params.action ? props.route.params.action : CONST.IOU.ACTION.CREATE; + + const shouldUseTransactionDraft = IOUUtils.shouldUseTransactionDraft(userAction); + + const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`); + const [transactionDraft] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${transactionID}`); const isFocused = useIsFocused(); @@ -60,6 +59,7 @@ export default function ); @@ -67,19 +67,7 @@ export default function , WithFullTransactionOrNotFoundOnyxProps>({ - transaction: { - key: ({route}) => { - const transactionID = route.params.transactionID ?? -1; - const userAction = 'action' in route.params && route.params.action ? route.params.action : CONST.IOU.ACTION.CREATE; - - if (IOUUtils.shouldUseTransactionDraft(userAction)) { - return `${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${transactionID}` as `${typeof ONYXKEYS.COLLECTION.TRANSACTION}${string}`; - } - return `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`; - }, - }, - })(forwardRef(WithFullTransactionOrNotFound)); + return forwardRef(WithFullTransactionOrNotFound); } export type {WithFullTransactionOrNotFoundProps}; From 0e1343e1884c9c0f9512ec8821f705c72ddd891e Mon Sep 17 00:00:00 2001 From: daledah Date: Tue, 17 Sep 2024 10:16:10 +0700 Subject: [PATCH 2/4] fix: lint --- .../step/withFullTransactionOrNotFound.tsx | 21 ++++++++++++++----- 1 file changed, 16 insertions(+), 5 deletions(-) diff --git a/src/pages/iou/request/step/withFullTransactionOrNotFound.tsx b/src/pages/iou/request/step/withFullTransactionOrNotFound.tsx index b4984287955a..a05da39c062b 100644 --- a/src/pages/iou/request/step/withFullTransactionOrNotFound.tsx +++ b/src/pages/iou/request/step/withFullTransactionOrNotFound.tsx @@ -3,6 +3,7 @@ import {useIsFocused} from '@react-navigation/native'; import type {ComponentType, ForwardedRef, RefAttributes} from 'react'; import React, {forwardRef} from 'react'; import {useOnyx} from 'react-native-onyx'; +import type {OnyxEntry} from 'react-native-onyx'; import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView'; import getComponentDisplayName from '@libs/getComponentDisplayName'; import * as IOUUtils from '@libs/IOUUtils'; @@ -10,6 +11,12 @@ import type {MoneyRequestNavigatorParamList} from '@libs/Navigation/types'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import type SCREENS from '@src/SCREENS'; +import type {Transaction} from '@src/types/onyx'; + +type WithFullTransactionOrNotFoundOnyxProps = { + /** Indicates whether the report data is loading */ + transaction: OnyxEntry; +}; type MoneyRequestRouteName = | typeof SCREENS.MONEY_REQUEST.CREATE @@ -33,13 +40,16 @@ type MoneyRequestRouteName = type Route = RouteProp; -type WithFullTransactionOrNotFoundProps = {route: Route}; +type WithFullTransactionOrNotFoundProps = WithFullTransactionOrNotFoundOnyxProps & { + route: Route; +}; export default function , TRef>(WrappedComponent: ComponentType>) { // eslint-disable-next-line rulesdir/no-negated-variables - function WithFullTransactionOrNotFound(props: TProps, ref: ForwardedRef) { - const transactionID = props.route.params.transactionID ?? -1; - const userAction = 'action' in props.route.params && props.route.params.action ? props.route.params.action : CONST.IOU.ACTION.CREATE; + function WithFullTransactionOrNotFound(props: Omit, ref: ForwardedRef) { + const {route} = props; + const transactionID = route.params.transactionID ?? -1; + const userAction = 'action' in route.params && route.params.action ? route.params.action : CONST.IOU.ACTION.CREATE; const shouldUseTransactionDraft = IOUUtils.shouldUseTransactionDraft(userAction); @@ -58,8 +68,9 @@ export default function ); From 54b03a02f5b7ece856b7114053db7aec53683ed1 Mon Sep 17 00:00:00 2001 From: daledah Date: Thu, 19 Sep 2024 22:48:18 +0700 Subject: [PATCH 3/4] fix: remove abundant param --- src/pages/iou/request/step/withFullTransactionOrNotFound.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/iou/request/step/withFullTransactionOrNotFound.tsx b/src/pages/iou/request/step/withFullTransactionOrNotFound.tsx index a05da39c062b..144eae28ceed 100644 --- a/src/pages/iou/request/step/withFullTransactionOrNotFound.tsx +++ b/src/pages/iou/request/step/withFullTransactionOrNotFound.tsx @@ -70,7 +70,6 @@ export default function ); From d4ad1d1fc266be36a48dc93076f34ecac597f70d Mon Sep 17 00:00:00 2001 From: daledah Date: Thu, 26 Sep 2024 16:00:32 +0700 Subject: [PATCH 4/4] refactor: add return type, change generic type --- .../iou/request/step/withFullTransactionOrNotFound.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/pages/iou/request/step/withFullTransactionOrNotFound.tsx b/src/pages/iou/request/step/withFullTransactionOrNotFound.tsx index 144eae28ceed..0ddddf7ff878 100644 --- a/src/pages/iou/request/step/withFullTransactionOrNotFound.tsx +++ b/src/pages/iou/request/step/withFullTransactionOrNotFound.tsx @@ -38,13 +38,15 @@ type MoneyRequestRouteName = | typeof SCREENS.MONEY_REQUEST.STEP_SEND_FROM | typeof SCREENS.MONEY_REQUEST.STEP_COMPANY_INFO; -type Route = RouteProp; +type Route = RouteProp; -type WithFullTransactionOrNotFoundProps = WithFullTransactionOrNotFoundOnyxProps & { - route: Route; +type WithFullTransactionOrNotFoundProps = WithFullTransactionOrNotFoundOnyxProps & { + route: Route; }; -export default function , TRef>(WrappedComponent: ComponentType>) { +export default function , TRef>( + WrappedComponent: ComponentType>, +): React.ComponentType & RefAttributes> { // eslint-disable-next-line rulesdir/no-negated-variables function WithFullTransactionOrNotFound(props: Omit, ref: ForwardedRef) { const {route} = props;