Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[TS migration] Migrate withFullTransactionOrNotFound HOC to TypeScript #39582

1 change: 0 additions & 1 deletion src/pages/iou/MoneyRequestWaypointPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ type MoneyRequestWaypointPageProps = StackScreenProps<MoneyRequestNavigatorParam
// You can't use Onyx props in the withOnyx mapping, so we need to set up and access the transactionID here, and then pass it down so that WaypointEditor can subscribe to the transaction.
function MoneyRequestWaypointPage({transactionID = '', route}: MoneyRequestWaypointPageProps) {
return (
// @ts-expect-error TODO: Remove this once withFullTransactionOrNotFound(https://github.com/Expensify/App/issues/36123) is migrated to TypeScript.
<IOURequestStepWaypoint
// Put the transactionID into the route params so that WaypointEdit behaves the same when creating a new waypoint
// or editing an existing waypoint.
Expand Down
52 changes: 25 additions & 27 deletions src/pages/iou/request/step/IOURequestStepWaypoint.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -233,31 +233,29 @@ function IOURequestStepWaypoint({

IOURequestStepWaypoint.displayName = 'IOURequestStepWaypoint';

// eslint-disable-next-line rulesdir/no-negated-variables
const IOURequestStepWaypointWithWritableReportOrNotFound = withWritableReportOrNotFound(IOURequestStepWaypoint);
// eslint-disable-next-line rulesdir/no-negated-variables
const IOURequestStepWaypointWithFullTransactionOrNotFound = withFullTransactionOrNotFound(IOURequestStepWaypointWithWritableReportOrNotFound);
export default withWritableReportOrNotFound(
withFullTransactionOrNotFound(
withOnyx<IOURequestStepWaypointProps, IOURequestStepWaypointOnyxProps>({
userLocation: {
key: ONYXKEYS.USER_LOCATION,
},
recentWaypoints: {
key: ONYXKEYS.NVP_RECENT_WAYPOINTS,

export default withOnyx<IOURequestStepWaypointProps, IOURequestStepWaypointOnyxProps>({
userLocation: {
key: ONYXKEYS.USER_LOCATION,
},
recentWaypoints: {
key: ONYXKEYS.NVP_RECENT_WAYPOINTS,

// Only grab the most recent 5 waypoints because that's all that is shown in the UI. This also puts them into the format of data
// that the google autocomplete component expects for it's "predefined places" feature.
selector: (waypoints) =>
(waypoints ? waypoints.slice(0, 5) : []).map((waypoint) => ({
name: waypoint.name,
description: waypoint.address ?? '',
geometry: {
location: {
lat: waypoint.lat ?? 0,
lng: waypoint.lng ?? 0,
},
},
})),
},
// @ts-expect-error TODO: Remove this once withFullTransactionOrNotFound (https://github.com/Expensify/App/issues/36123) is migrated to TypeScript.
})(IOURequestStepWaypointWithFullTransactionOrNotFound);
// Only grab the most recent 5 waypoints because that's all that is shown in the UI. This also puts them into the format of data
// that the google autocomplete component expects for it's "predefined places" feature.
selector: (waypoints) =>
(waypoints ? waypoints.slice(0, 5) : []).map((waypoint) => ({
name: waypoint.name,
description: waypoint.address ?? '',
geometry: {
location: {
lat: waypoint.lat ?? 0,
lng: waypoint.lng ?? 0,
},
},
})),
},
})(IOURequestStepWaypoint),
),
);
78 changes: 0 additions & 78 deletions src/pages/iou/request/step/withFullTransactionOrNotFound.js

This file was deleted.

70 changes: 70 additions & 0 deletions src/pages/iou/request/step/withFullTransactionOrNotFound.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
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 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 = {
/** Indicates whether the report data is loading */
transaction: OnyxEntry<Transaction>;
};

type MoneyRequestRouteName =
| typeof SCREENS.MONEY_REQUEST.STEP_WAYPOINT
| typeof SCREENS.MONEY_REQUEST.STEP_DESCRIPTION
| typeof SCREENS.MONEY_REQUEST.STEP_TAX_AMOUNT
| typeof SCREENS.MONEY_REQUEST.STEP_TAX_RATE;

type Route<T extends MoneyRequestRouteName> = RouteProp<MoneyRequestNavigatorParamList, T>;

type WithFullTransactionOrNotFoundProps<T extends MoneyRequestRouteName> = WithFullTransactionOrNotFoundOnyxProps & {route: Route<T>};
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there any benefits of using generics here?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've added this generic based on withWritableReportOrNotFound HOC, both of this HOC uses generic Route props based on MoneyRequestParamList, depending on the Screen where this is called the Route prop changes.


export default function <TProps extends WithFullTransactionOrNotFoundProps<MoneyRequestRouteName>, TRef>(WrappedComponent: ComponentType<TProps & RefAttributes<TRef>>) {
// eslint-disable-next-line rulesdir/no-negated-variables
function WithFullTransactionOrNotFound(props: TProps, ref: ForwardedRef<TRef>) {
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 <FullPageNotFoundView shouldShow={isFocused} />;
}

return (
<WrappedComponent
// eslint-disable-next-line react/jsx-props-no-spreading
{...props}
ref={ref}
/>
);
}

WithFullTransactionOrNotFound.displayName = `withFullTransactionOrNotFound(${getComponentDisplayName(WrappedComponent)})`;

return withOnyx<TProps & RefAttributes<TRef>, WithFullTransactionOrNotFoundOnyxProps>({
transaction: {
key: ({route}) => {
const transactionID = route.params.transactionID ?? 0;
const userAction = 'action' in route.params && route.params.action ? 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};
Loading