[TS migration] Migrate 'ConfirmedRoute.js' component to TypeScript

src/components/ConfirmedRoute.js → src/components/ConfirmedRoute.tsx

@@ -1,64 +1,59 @@
-import lodashGet from 'lodash/get';
-import lodashIsNil from 'lodash/isNil';
-import PropTypes from 'prop-types';
 import React, {useCallback, useEffect} from 'react';
+import type {ReactNode} from 'react';
 import {withOnyx} from 'react-native-onyx';
-import _ from 'underscore';
+import type {OnyxEntry} from 'react-native-onyx/lib/types';
 import useNetwork from '@hooks/useNetwork';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as TransactionUtils from '@libs/TransactionUtils';
 import * as MapboxToken from '@userActions/MapboxToken';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import type {MapboxAccessToken, Transaction} from '@src/types/onyx';
+import type {WaypointCollection} from '@src/types/onyx/Transaction';
+import type IconAsset from '@src/types/utils/IconAsset';
 import DistanceMapView from './DistanceMapView';
 import * as Expensicons from './Icon/Expensicons';
 import ImageSVG from './ImageSVG';
 import PendingMapView from './MapView/PendingMapView';
-import transactionPropTypes from './transactionPropTypes';
 
-const propTypes = {
-    /** Transaction that stores the distance request data */
-    transaction: transactionPropTypes,
+type WayPoint = {
+    id: string;
+    coordinate: [number, number];
+    markerComponent: () => ReactNode;
+};
 
+type ConfirmedRoutePropsOnyxProps = {
     /** Data about Mapbox token for calling Mapbox API */
-    mapboxAccessToken: PropTypes.shape({
-        /** Temporary token for Mapbox API */
-        token: PropTypes.string,
-
-        /** Time when the token will expire in ISO 8601 */
-        expiration: PropTypes.string,
-    }),
+    mapboxAccessToken: OnyxEntry<MapboxAccessToken>;
 };
 
-const defaultProps = {
-    transaction: {},
-    mapboxAccessToken: {
-        token: '',
-    },
+type ConfirmedRouteProps = ConfirmedRoutePropsOnyxProps & {
+    /** Transaction that stores the distance request data */
+    transaction: Transaction;
 };
 
-function ConfirmedRoute({mapboxAccessToken, transaction}) {
+function ConfirmedRoute({mapboxAccessToken, transaction}: ConfirmedRouteProps) {
     const {isOffline} = useNetwork();
-    const {route0: route} = transaction.routes || {};
-    const waypoints = lodashGet(transaction, 'comment.waypoints', {});
-    const coordinates = lodashGet(route, 'geometry.coordinates', []);
+    const {route0: route} = transaction.routes ?? {};
+    const waypoints = transaction.comment?.waypoints ?? {};
+    const coordinates = route.geometry?.coordinates ?? [];
     const theme = useTheme();
     const styles = useThemeStyles();
 
     const getWaypointMarkers = useCallback(
-        (waypointsData) => {
-            const numberOfWaypoints = _.size(waypointsData);
+        (waypointsData: WaypointCollection): WayPoint[] => {
+            const numberOfWaypoints = Object.keys(waypointsData).length;
             const lastWaypointIndex = numberOfWaypoints - 1;
 
-            return _.filter(
-                _.map(waypointsData, (waypoint, key) => {
-                    if (!waypoint || lodashIsNil(waypoint.lat) || lodashIsNil(waypoint.lng)) {
+            return Object.entries(waypointsData)
+                .map(([key, waypoint]) => {
+                    if (!waypoint?.lat || !waypoint?.lng) {
                         return;
                     }
 
                     const index = TransactionUtils.getWaypointIndex(key);
-                    let MarkerComponent;
+                    let MarkerComponent: IconAsset;
                     if (index === 0) {
                         MarkerComponent = Expensicons.DotIndicatorUnfilled;
                     } else if (index === lastWaypointIndex) {
@@ -69,8 +64,8 @@ function ConfirmedRoute({mapboxAccessToken, transaction}) {
 
                     return {
                         id: `${waypoint.lng},${waypoint.lat},${index}`,
-                        coordinate: [waypoint.lng, waypoint.lat],
-                        markerComponent: () => (
+                        coordinate: [waypoint.lng, waypoint.lat] as const,
+                        markerComponent: (): ReactNode => (
                             <ImageSVG
                                 src={MarkerComponent}
                                 width={CONST.MAP_MARKER_SIZE}
@@ -79,9 +74,8 @@ function ConfirmedRoute({mapboxAccessToken, transaction}) {
                             />
                         ),
                     };
-                }),
-                (waypoint) => waypoint,
-            );
+                })
+                .filter((waypoint): waypoint is WayPoint => !!waypoint);
         },
         [theme],
     );
@@ -95,16 +89,16 @@ function ConfirmedRoute({mapboxAccessToken, transaction}) {
 
     return (
         <>
-            {!isOffline && Boolean(mapboxAccessToken.token) ? (
+            {!isOffline && Boolean(mapboxAccessToken?.token) ? (
                 <DistanceMapView
-                    accessToken={mapboxAccessToken.token}
+                    accessToken={mapboxAccessToken?.token ?? ''}
                     mapPadding={CONST.MAP_PADDING}
                     pitchEnabled={false}
                     initialState={{
                         zoom: CONST.MAPBOX.DEFAULT_ZOOM,
-                        location: lodashGet(waypointMarkers, [0, 'coordinate'], CONST.MAPBOX.DEFAULT_COORDINATE),
+                        location: waypointMarkers?.[0]?.coordinate ?? (CONST.MAPBOX.DEFAULT_COORDINATE as [number, number]),
                     }}
-                    directionCoordinates={coordinates}
+                    directionCoordinates={coordinates as Array<[number, number]>}
                     style={[styles.mapView, styles.br4]}
                     waypoints={waypointMarkers}
                     styleURL={CONST.MAPBOX.STYLE_URL}
@@ -116,12 +110,10 @@ function ConfirmedRoute({mapboxAccessToken, transaction}) {
     );
 }
 
-export default withOnyx({
+export default withOnyx<ConfirmedRouteProps, ConfirmedRoutePropsOnyxProps>({
     mapboxAccessToken: {
         key: ONYXKEYS.MAPBOX_ACCESS_TOKEN,
     },
 })(ConfirmedRoute);
 
 ConfirmedRoute.displayName = 'ConfirmedRoute';
-ConfirmedRoute.propTypes = propTypes;
-ConfirmedRoute.defaultProps = defaultProps;