From e838d5d4a4fba2ebc17e4d285d848977d3cb6588 Mon Sep 17 00:00:00 2001 From: Tyler Karaszewski Date: Thu, 29 Feb 2024 14:33:39 -0800 Subject: [PATCH] Revert "[TS migration] Migrate withFullTransactionOrNotFound HOC" --- .../step/withFullTransactionOrNotFound.js | 78 +++++++++++++++++++ .../step/withFullTransactionOrNotFound.tsx | 62 --------------- 2 files changed, 78 insertions(+), 62 deletions(-) create mode 100644 src/pages/iou/request/step/withFullTransactionOrNotFound.js delete mode 100644 src/pages/iou/request/step/withFullTransactionOrNotFound.tsx diff --git a/src/pages/iou/request/step/withFullTransactionOrNotFound.js b/src/pages/iou/request/step/withFullTransactionOrNotFound.js new file mode 100644 index 000000000000..7cdbb3484999 --- /dev/null +++ b/src/pages/iou/request/step/withFullTransactionOrNotFound.js @@ -0,0 +1,78 @@ +import {useIsFocused} from '@react-navigation/native'; +import lodashGet from 'lodash/get'; +import PropTypes from 'prop-types'; +import React from 'react'; +import {withOnyx} from 'react-native-onyx'; +import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView'; +import transactionPropTypes from '@components/transactionPropTypes'; +import getComponentDisplayName from '@libs/getComponentDisplayName'; +import CONST from '@src/CONST'; +import ONYXKEYS from '@src/ONYXKEYS'; +import IOURequestStepRoutePropTypes from './IOURequestStepRoutePropTypes'; + +const propTypes = { + /** The HOC takes an optional ref as a prop and passes it as a ref to the wrapped component. + * That way, if a ref is passed to a component wrapped in the HOC, the ref is a reference to the wrapped component, not the HOC. */ + forwardedRef: PropTypes.func, + + /** The report corresponding to the reportID in the route params */ + transaction: transactionPropTypes, + + route: IOURequestStepRoutePropTypes.isRequired, +}; + +const defaultProps = { + forwardedRef: () => {}, + transaction: {}, +}; + +export default function (WrappedComponent) { + // eslint-disable-next-line rulesdir/no-negated-variables + function WithFullTransactionOrNotFound({forwardedRef, ...props}) { + const { + transaction: {transactionID}, + } = props; + + const isFocused = useIsFocused(); + + // If the transaction does not have a transactionID, then the transaction no longer exists in Onyx as a full transaction and the not-found page should be shown. + // In addition, the not-found page should be shown only if the component screen's route is active (i.e. is focused). + // This is to prevent it from showing when the modal is being dismissed while navigating to a different route (e.g. on requesting money). + if (!transactionID) { + return ; + } + + return ( + + ); + } + + WithFullTransactionOrNotFound.propTypes = propTypes; + WithFullTransactionOrNotFound.defaultProps = defaultProps; + WithFullTransactionOrNotFound.displayName = `withFullTransactionOrNotFound(${getComponentDisplayName(WrappedComponent)})`; + + // eslint-disable-next-line rulesdir/no-negated-variables + const WithFullTransactionOrNotFoundWithRef = React.forwardRef((props, ref) => ( + + )); + + WithFullTransactionOrNotFoundWithRef.displayName = 'WithFullTransactionOrNotFoundWithRef'; + + return withOnyx({ + transaction: { + key: ({route}) => { + const transactionID = lodashGet(route, 'params.transactionID', 0); + const userAction = lodashGet(route, 'params.action', CONST.IOU.ACTION.CREATE); + return `${userAction === CONST.IOU.ACTION.CREATE ? ONYXKEYS.COLLECTION.TRANSACTION_DRAFT : ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`; + }, + }, + })(WithFullTransactionOrNotFoundWithRef); +} diff --git a/src/pages/iou/request/step/withFullTransactionOrNotFound.tsx b/src/pages/iou/request/step/withFullTransactionOrNotFound.tsx deleted file mode 100644 index eb9abd579960..000000000000 --- a/src/pages/iou/request/step/withFullTransactionOrNotFound.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import {useIsFocused} from '@react-navigation/native'; -import type {StackScreenProps} from '@react-navigation/stack'; -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 FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView'; -import getComponentDisplayName from '@libs/getComponentDisplayName'; -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 = { - /** Indicated whether the report data is loading */ - transaction: OnyxEntry; -}; - -type WithFullTransactionOrNotFoundProps = WithFullTransactionOrNotFoundOnyxProps & StackScreenProps; - -export default function (WrappedComponent: ComponentType>) { - // eslint-disable-next-line rulesdir/no-negated-variables - function WithFullTransactionOrNotFound(props: TProps, ref: ForwardedRef) { - const transactionID = props.transaction?.transactionID; - - const isFocused = useIsFocused(); - - // If the transaction does not have a transactionID, then the transaction no longer exists in Onyx as a full transaction and the not-found page should be shown. - // In addition, the not-found page should be shown only if the component screen's route is active (i.e. is focused). - // This is to prevent it from showing when the modal is being dismissed while navigating to a different route (e.g. on requesting money). - if (!transactionID) { - return ; - } - - return ( - - ); - } - - WithFullTransactionOrNotFound.displayName = `withFullTransactionOrNotFound(${getComponentDisplayName(WrappedComponent)})`; - - return withOnyx, WithFullTransactionOrNotFoundOnyxProps>({ - transaction: { - key: ({route}) => { - const transactionID = route.params.transactionID ?? 0; - const userAction = route.params.action ?? CONST.IOU.ACTION.CREATE; - - if (userAction === CONST.IOU.ACTION.CREATE) { - return `${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${transactionID}` as `${typeof ONYXKEYS.COLLECTION.TRANSACTION}${string}`; - } - return `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`; - }, - }, - })(forwardRef(WithFullTransactionOrNotFound)); -} - -export type {WithFullTransactionOrNotFoundProps};