[TS migration] Migrate 'IOUWaypoint' page to TypeScript

src/ROUTES.ts

@@ -300,7 +300,7 @@ const ROUTES = {
     },
     MONEY_REQUEST_EDIT_WAYPOINT: {
         route: 'r/:threadReportID/edit/distance/:transactionID/waypoint/:waypointIndex',
-        getRoute: (threadReportID: number, transactionID: string, waypointIndex: number) => `r/${threadReportID}/edit/distance/${transactionID}/waypoint/${waypointIndex}` as const,
+        getRoute: (threadReportID: string, transactionID: string, waypointIndex: number) => `r/${threadReportID}/edit/distance/${transactionID}/waypoint/${waypointIndex}` as const,
     },
     MONEY_REQUEST_DISTANCE_TAB: {
         route: ':iouType/new/:reportID?/distance',

src/libs/Navigation/types.ts

@@ -227,13 +227,13 @@ type MoneyRequestNavigatorParamList = {
         iouType: string;
         transactionID: string;
         waypointIndex: string;
-        threadReportID: number;
+        threadReportID: string;
     };
     [SCREENS.MONEY_REQUEST.EDIT_WAYPOINT]: {
         iouType: string;
         transactionID: string;
         waypointIndex: string;
-        threadReportID: number;
+        threadReportID: string;
     };
     [SCREENS.MONEY_REQUEST.DISTANCE]: {
         iouType: ValueOf<typeof CONST.IOU.TYPE>;

src/libs/actions/Transaction.ts

@@ -1,7 +1,7 @@
 import {isEqual} from 'lodash';
 import lodashClone from 'lodash/clone';
 import lodashHas from 'lodash/has';
-import Onyx from 'react-native-onyx';
+import Onyx, {OnyxEntry} from 'react-native-onyx';
 import * as API from '@libs/API';
 import * as CollectionUtils from '@libs/CollectionUtils';
 import * as TransactionUtils from '@libs/TransactionUtils';
@@ -99,7 +99,7 @@ function saveWaypoint(transactionID: string, index: string, waypoint: RecentWayp
     }
 }
 
-function removeWaypoint(transaction: Transaction, currentIndex: string, isDraft: boolean) {
+function removeWaypoint(transaction: OnyxEntry<Transaction>, currentIndex: string, isDraft?: boolean) {
     // Index comes from the route params and is a string
     const index = Number(currentIndex);
     const existingWaypoints = transaction?.comment?.waypoints ?? {};
@@ -128,8 +128,17 @@ function removeWaypoint(transaction: Transaction, currentIndex: string, isDraft:
     // Doing a deep clone of the transaction to avoid mutating the original object and running into a cache issue when using Onyx.set
     let newTransaction: Transaction = {
         ...transaction,
+        amount: transaction?.amount ?? 0,
+        billable: transaction?.billable ?? false,
+        category: transaction?.category ?? '',
+        created: transaction?.created ?? '',
+        currency: transaction?.currency ?? '',
+        merchant: transaction?.merchant ?? '',
+        reportID: transaction?.reportID ?? '',
+        transactionID: transaction?.transactionID ?? '',
+        tag: transaction?.tag ?? '',
         comment: {
-            ...transaction.comment,
+            ...transaction?.comment,
             waypoints: reIndexedWaypoints,
         },
     };
@@ -153,10 +162,10 @@ function removeWaypoint(transaction: Transaction, currentIndex: string, isDraft:
         };
     }
     if (isDraft) {
-        Onyx.set(`${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${transaction.transactionID}`, newTransaction);
+        Onyx.set(`${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${transaction?.transactionID}`, newTransaction);
         return;
     }
-    Onyx.set(`${ONYXKEYS.COLLECTION.TRANSACTION}${transaction.transactionID}`, newTransaction);
+    Onyx.set(`${ONYXKEYS.COLLECTION.TRANSACTION}${transaction?.transactionID}`, newTransaction);
 }
 
 function getOnyxDataForRouteRequest(transactionID: string, isDraft = false): OnyxData {

src/pages/iou/MoneyRequestEditWaypointPage.tsx

@@ -0,0 +1,15 @@
+import {StackScreenProps} from '@react-navigation/stack';
+import React from 'react';
+import {MoneyRequestNavigatorParamList} from '@libs/Navigation/types';
+import SCREENS from '@src/SCREENS';
+import WaypointEditor from './WaypointEditor';
+
+type MoneyRequestEditWaypointPageProps = StackScreenProps<MoneyRequestNavigatorParamList, typeof SCREENS.MONEY_REQUEST.EDIT_WAYPOINT>;
+
+function MoneyRequestEditWaypointPage({route}: MoneyRequestEditWaypointPageProps) {
+    return <WaypointEditor route={route} />;
+}
+
+MoneyRequestEditWaypointPage.displayName = 'MoneyRequestEditWaypointPage';
+
+export default MoneyRequestEditWaypointPage;

src/pages/iou/NewDistanceRequestWaypointEditorPage.tsx

@@ -0,0 +1,38 @@
+import {RouteProp} from '@react-navigation/native';
+import {StackScreenProps} from '@react-navigation/stack';
+import React from 'react';
+import {withOnyx} from 'react-native-onyx';
+import {MoneyRequestNavigatorParamList} from '@libs/Navigation/types';
+import ONYXKEYS from '@src/ONYXKEYS';
+import SCREENS from '@src/SCREENS';
+import WaypointEditor from './WaypointEditor';
+
+type NewDistanceRequestWaypointEditorPageOnyxProps = {
+    transactionID: string | undefined;
+};
+type NewDistanceRequestWaypointEditorPageProps = StackScreenProps<MoneyRequestNavigatorParamList, typeof SCREENS.MONEY_REQUEST.EDIT_WAYPOINT> & NewDistanceRequestWaypointEditorPageOnyxProps;
+
+// This component is responsible for grabbing the transactionID from the IOU key
+// 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 NewDistanceRequestWaypointEditorPage({transactionID = '', route}: NewDistanceRequestWaypointEditorPageProps) {
+    return (
+        <WaypointEditor
+            // Put the transactionID into the route params so that WaypointEdit behaves the same when creating a new waypoint
+            // or editing an existing waypoint.
+            route={
+                {
+                    params: {
+                        ...route.params,
+                        transactionID,
+                    },
+                } as RouteProp<MoneyRequestNavigatorParamList, typeof SCREENS.MONEY_REQUEST.EDIT_WAYPOINT>
+            }
+        />
+    );
+}
+
+NewDistanceRequestWaypointEditorPage.displayName = 'NewDistanceRequestWaypointEditorPage';
+
+export default withOnyx<NewDistanceRequestWaypointEditorPageProps, NewDistanceRequestWaypointEditorPageOnyxProps>({
+    transactionID: {key: ONYXKEYS.IOU, selector: (iou) => iou?.transactionID},
+})(NewDistanceRequestWaypointEditorPage);