[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/components/BlockingViews/FullPageNotFoundView.tsx

@@ -33,10 +33,10 @@ type FullPageNotFoundViewProps = {
     linkKey?: TranslationPaths;
 
     /** Method to trigger when pressing the back button of the header */
-    onBackButtonPress: () => void;
+    onBackButtonPress?: () => void;
 
     /** Function to call when pressing the navigation link */
-    onLinkPress: () => void;
+    onLinkPress?: () => void;
 };
 
 // eslint-disable-next-line rulesdir/no-negated-variables

src/hooks/useLocationBias.ts

@@ -1,9 +1,12 @@
 import {useMemo} from 'react';
+import type {OnyxEntry} from 'react-native-onyx';
+import type {Location} from '@pages/iou/WaypointEditor';
+import type {UserLocation} from '@src/types/onyx';
 
 /**
  * Construct the rectangular boundary based on user location and waypoints
  */
-export default function useLocationBias(allWaypoints: Record<string, {lng?: number; lat?: number}>, userLocation?: {latitude: number; longitude: number}) {
+export default function useLocationBias(allWaypoints: Record<string, Location>, userLocation?: OnyxEntry<UserLocation>) {
     return useMemo(() => {
         const hasFilledWaypointCount = Object.values(allWaypoints).some((waypoint) => Object.keys(waypoint).length > 0);
         // If there are no filled wayPoints and if user's current location cannot be retrieved,
@@ -29,8 +32,8 @@ export default function useLocationBias(allWaypoints: Record<string, {lng?: numb
         // When no filled waypoints are available but the current location of the user is available,
         // let us consider the current user's location to construct a rectangular bound
         if (!hasFilledWaypointCount && userLocation !== undefined) {
-            longitudes.push(userLocation.longitude);
-            latitudes.push(userLocation.latitude);
+            longitudes.push(userLocation?.longitude ?? 0);
+            latitudes.push(userLocation?.latitude ?? 0);
         }
 
         // Extend the rectangular bound by 0.5 degree (roughly around 25-30 miles in US)

src/libs/ErrorUtils.ts

@@ -120,3 +120,4 @@ function addErrorMessage<TKey extends TranslationPaths>(errors: ErrorsList, inpu
 }
 
 export {getAuthenticateErrorMessage, getMicroSecondOnyxError, getMicroSecondOnyxErrorObject, getLatestErrorMessage, getLatestErrorField, getEarliestErrorField, addErrorMessage};
+export type {ErrorsList};

src/libs/Navigation/types.ts

@@ -41,6 +41,13 @@ type CentralPaneNavigatorParamList = {
     };
 };
 
+type WaypointParams = {
+    iouType: string;
+    transactionID: string;
+    waypointIndex: string;
+    threadReportID: string;
+};
+
 type SettingsNavigatorParamList = {
     [SCREENS.SETTINGS.ROOT]: undefined;
     [SCREENS.SETTINGS.SHARE_CODE]: undefined;
@@ -235,18 +242,8 @@ type MoneyRequestNavigatorParamList = {
     [SCREENS.IOU_SEND.ENABLE_PAYMENTS]: undefined;
     [SCREENS.IOU_SEND.ADD_BANK_ACCOUNT]: undefined;
     [SCREENS.IOU_SEND.ADD_DEBIT_CARD]: undefined;
-    [SCREENS.MONEY_REQUEST.WAYPOINT]: {
-        iouType: string;
-        transactionID: string;
-        waypointIndex: string;
-        threadReportID: number;
-    };
-    [SCREENS.MONEY_REQUEST.EDIT_WAYPOINT]: {
-        iouType: string;
-        transactionID: string;
-        waypointIndex: string;
-        threadReportID: number;
-    };
+    [SCREENS.MONEY_REQUEST.WAYPOINT]: WaypointParams;
+    [SCREENS.MONEY_REQUEST.EDIT_WAYPOINT]: WaypointParams;
     [SCREENS.MONEY_REQUEST.DISTANCE]: {
         iouType: ValueOf<typeof CONST.IOU.TYPE>;
         reportID: string;
@@ -465,4 +462,5 @@ export type {
     SignInNavigatorParamList,
     ReferralDetailsNavigatorParamList,
     ReimbursementAccountNavigatorParamList,
+    WaypointParams,
 };

src/libs/actions/Transaction.ts

@@ -1,6 +1,7 @@
 import {isEqual} from 'lodash';
 import lodashClone from 'lodash/clone';
 import lodashHas from 'lodash/has';
+import type {OnyxEntry} from 'react-native-onyx';
 import Onyx from 'react-native-onyx';
 import * as API from '@libs/API';
 import * as CollectionUtils from '@libs/CollectionUtils';
@@ -99,7 +100,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 ?? {};
@@ -127,9 +128,10 @@ function removeWaypoint(transaction: Transaction, currentIndex: string, isDraft:
     // to remove nested keys while also preserving other object keys
     // 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,
+        // eslint-disable-next-line @typescript-eslint/non-nullable-type-assertion-style
+        ...(transaction as Transaction),
         comment: {
-            ...transaction.comment,
+            ...transaction?.comment,
             waypoints: reIndexedWaypoints,
         },
     };
@@ -153,10 +155,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 type {StackScreenProps} from '@react-navigation/stack';
+import React from 'react';
+import type {MoneyRequestNavigatorParamList} from '@libs/Navigation/types';
+import type 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.js → src/pages/iou/NewDistanceRequestWaypointEditorPage.tsx

@@ -1,38 +1,19 @@
-import PropTypes from 'prop-types';
+import type {StackScreenProps} from '@react-navigation/stack';
 import React from 'react';
 import {withOnyx} from 'react-native-onyx';
+import type {MoneyRequestNavigatorParamList} from '@libs/Navigation/types';
 import ONYXKEYS from '@src/ONYXKEYS';
+import type SCREENS from '@src/SCREENS';
 import WaypointEditor from './WaypointEditor';
 
-const propTypes = {
-    /** The transactionID of this request */
-    transactionID: PropTypes.string,
-
-    /** Route params */
-    route: PropTypes.shape({
-        params: PropTypes.shape({
-            /** IOU type */
-            iouType: PropTypes.string,
-
-            /** Index of the waypoint being edited */
-            waypointIndex: PropTypes.string,
-        }),
-    }),
-};
-
-const defaultProps = {
-    transactionID: '',
-    route: {
-        params: {
-            iouType: '',
-            waypointIndex: '',
-        },
-    },
+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}) {
+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
@@ -48,8 +29,7 @@ function NewDistanceRequestWaypointEditorPage({transactionID, route}) {
 }
 
 NewDistanceRequestWaypointEditorPage.displayName = 'NewDistanceRequestWaypointEditorPage';
-NewDistanceRequestWaypointEditorPage.propTypes = propTypes;
-NewDistanceRequestWaypointEditorPage.defaultProps = defaultProps;
-export default withOnyx({
-    transactionID: {key: ONYXKEYS.IOU, selector: (iou) => iou && iou.transactionID},
+
+export default withOnyx<NewDistanceRequestWaypointEditorPageProps, NewDistanceRequestWaypointEditorPageOnyxProps>({
+    transactionID: {key: ONYXKEYS.IOU, selector: (iou) => iou?.transactionID},
 })(NewDistanceRequestWaypointEditorPage);