Merge pull request #34374 from VickyStash/ts-migration/reportActionIt…

…emReportPreview-component

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

src/components/ImageWithSizeCalculation.tsx

@@ -1,6 +1,6 @@
 import delay from 'lodash/delay';
 import React, {useEffect, useRef, useState} from 'react';
-import type {StyleProp, ViewStyle} from 'react-native';
+import type {ImageSourcePropType, StyleProp, ViewStyle} from 'react-native';
 import {View} from 'react-native';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Log from '@libs/Log';
@@ -19,7 +19,7 @@ type OnLoadNativeEvent = {
 
 type ImageWithSizeCalculationProps = {
     /** Url for image to display */
-    url: string | number;
+    url: string | ImageSourcePropType;
 
     /** Any additional styles to apply */
     style?: StyleProp<ViewStyle>;

src/components/ReportActionItem/ReportActionItemImage.tsx

@@ -2,6 +2,7 @@ import Str from 'expensify-common/lib/str';
 import React from 'react';
 import type {ReactElement} from 'react';
 import {View} from 'react-native';
+import type {ImageSourcePropType} from 'react-native';
 import AttachmentModal from '@components/AttachmentModal';
 import EReceiptThumbnail from '@components/EReceiptThumbnail';
 import Image from '@components/Image';
@@ -17,10 +18,10 @@ import type {Transaction} from '@src/types/onyx';
 
 type ReportActionItemImageProps = {
     /** thumbnail URI for the image */
-    thumbnail?: string | number;
+    thumbnail?: string | ImageSourcePropType | null;
 
     /** URI for the image or local numeric reference for the image  */
-    image: string | number;
+    image: string | ImageSourcePropType;
 
     /** whether or not to enable the image preview modal */
     enablePreviewModal?: boolean;

src/components/ReportActionItem/ReportActionItemImages.tsx

@@ -6,20 +6,13 @@ import Text from '@components/Text';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
+import type {ThumbnailAndImageURI} from '@libs/ReceiptUtils';
 import variables from '@styles/variables';
-import type {Transaction} from '@src/types/onyx';
 import ReportActionItemImage from './ReportActionItemImage';
 
-type Image = {
-    thumbnail: string | number;
-    image: string | number;
-    transaction: Transaction;
-    isLocalFile: boolean;
-};
-
 type ReportActionItemImagesProps = {
     /** array of image and thumbnail URIs */
-    images: Image[];
+    images: ThumbnailAndImageURI[];
 
     // We're not providing default values for size and total and disabling the ESLint rule
     // because we want them to default to the length of images, but we can't set default props
@@ -79,7 +72,7 @@ function ReportActionItemImages({images, size, total, isHovered = false}: Report
                 const borderStyle = shouldShowBorder ? styles.reportActionItemImageBorder : {};
                 return (
                     <View
-                        key={`${index}-${image}`}
+                        key={`${index}-${image as string}`}
                         style={[styles.reportActionItemImage, borderStyle, hoverStyle]}
                     >
                         <ReportActionItemImage

src/components/ReportActionItem/TaskPreview.tsx

@@ -1,7 +1,5 @@
 import Str from 'expensify-common/lib/str';
 import React from 'react';
-// eslint-disable-next-line no-restricted-imports
-import type {Text as RNText} from 'react-native';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
@@ -24,6 +22,7 @@ import * as LocalePhoneNumber from '@libs/LocalePhoneNumber';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as TaskUtils from '@libs/TaskUtils';
+import type {ContextMenuAnchor} from '@pages/home/report/ContextMenu/ReportActionContextMenu';
 import * as Session from '@userActions/Session';
 import * as Task from '@userActions/Task';
 import CONST from '@src/CONST';
@@ -65,7 +64,7 @@ type TaskPreviewProps = WithCurrentUserPersonalDetailsProps &
         chatReportID: string;
 
         /** Popover context menu anchor, used for showing context menu */
-        contextMenuAnchor: RNText | null;
+        contextMenuAnchor: ContextMenuAnchor;
 
         /** Callback for updating context menu active state, used for showing context menu */
         checkIfContextMenuActive: () => void;

src/components/ShowContextMenuContext.ts

@@ -1,15 +1,16 @@
 import {createContext} from 'react';
 // eslint-disable-next-line no-restricted-imports
-import type {GestureResponderEvent, Text as RNText} from 'react-native';
+import type {GestureResponderEvent} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportActionContextMenu';
+import type {ContextMenuAnchor} from '@pages/home/report/ContextMenu/ReportActionContextMenu';
 import CONST from '@src/CONST';
 import type {Report, ReportAction} from '@src/types/onyx';
 
 type ShowContextMenuContextProps = {
-    anchor: RNText | null;
+    anchor: ContextMenuAnchor;
     report: OnyxEntry<Report>;
     action: OnyxEntry<ReportAction>;
     checkIfContextMenuActive: () => void;
@@ -36,7 +37,7 @@ ShowContextMenuContext.displayName = 'ShowContextMenuContext';
  */
 function showContextMenuForReport(
     event: GestureResponderEvent | MouseEvent,
-    anchor: RNText | null,
+    anchor: ContextMenuAnchor,
     reportID: string,
     action: OnyxEntry<ReportAction>,
     checkIfContextMenuActive: () => void,

src/components/ThumbnailImage.tsx

@@ -1,6 +1,6 @@
 import lodashClamp from 'lodash/clamp';
 import React, {useCallback, useState} from 'react';
-import type {StyleProp, ViewStyle} from 'react-native';
+import type {ImageSourcePropType, StyleProp, ViewStyle} from 'react-native';
 import {Dimensions, View} from 'react-native';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -10,7 +10,7 @@ import ImageWithSizeCalculation from './ImageWithSizeCalculation';
 
 type ThumbnailImageProps = {
     /** Source URL for the preview image */
-    previewSourceURL: string | number;
+    previewSourceURL: string | ImageSourcePropType;
 
     /** Any additional styles to apply */
     style?: StyleProp<ViewStyle>;

src/libs/ReceiptUtils.ts

@@ -73,3 +73,4 @@ function getThumbnailAndImageURIs(transaction: Transaction, receiptPath: string
 
 // eslint-disable-next-line import/prefer-default-export
 export {getThumbnailAndImageURIs};
+export type {ThumbnailAndImageURI};

src/libs/ReportUtils.ts

@@ -17,12 +17,11 @@ import ROUTES from '@src/ROUTES';
 import type {Beta, PersonalDetails, PersonalDetailsList, Policy, PolicyReportField, Report, ReportAction, ReportMetadata, Session, Transaction, TransactionViolation} from '@src/types/onyx';
 import type {Participant} from '@src/types/onyx/IOU';
 import type {Errors, Icon, PendingAction} from '@src/types/onyx/OnyxCommon';
-import type {ChangeLog, IOUMessage, OriginalMessageActionName, OriginalMessageCreated} from '@src/types/onyx/OriginalMessage';
+import type {ChangeLog, IOUMessage, OriginalMessageActionName, OriginalMessageCreated, PaymentMethodType} from '@src/types/onyx/OriginalMessage';
 import type {Status} from '@src/types/onyx/PersonalDetails';
 import type {NotificationPreference} from '@src/types/onyx/Report';
 import type {Message, ReportActionBase, ReportActions} from '@src/types/onyx/ReportAction';
 import type {Receipt, WaypointCollection} from '@src/types/onyx/Transaction';
-import type DeepValueOf from '@src/types/utils/DeepValueOf';
 import type {EmptyObject} from '@src/types/utils/EmptyObject';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import type IconAsset from '@src/types/utils/IconAsset';
@@ -1580,7 +1579,7 @@ function getPersonalDetailsForAccountID(accountID: number): Partial<PersonalDeta
 /**
  * Get the displayName for a single report participant.
  */
-function getDisplayNameForParticipant(accountID?: number, shouldUseShortForm = false, shouldFallbackToHidden = true): string | undefined {
+function getDisplayNameForParticipant(accountID?: number, shouldUseShortForm = false, shouldFallbackToHidden = true): string {
     if (!accountID) {
         return '';
     }
@@ -2822,7 +2821,7 @@ function buildOptimisticIOUReportAction(
     comment: string,
     participants: Participant[],
     transactionID: string,
-    paymentType: DeepValueOf<typeof CONST.IOU.PAYMENT_TYPE>,
+    paymentType: PaymentMethodType,
     iouReportID = '',
     isSettlingUp = false,
     isSendMoneyFlow = false,

src/libs/onyxSubscribe.ts

@@ -1,14 +1,14 @@
 import type {ConnectOptions} from 'react-native-onyx';
 import Onyx from 'react-native-onyx';
-import type {OnyxKey} from '@src/ONYXKEYS';
+import type {OnyxCollectionKey, OnyxKey} from '@src/ONYXKEYS';
 
 /**
  * Connect to onyx data. Same params as Onyx.connect(), but returns a function to unsubscribe.
  *
  * @param mapping Same as for Onyx.connect()
  * @return Unsubscribe callback
  */
-function onyxSubscribe<TKey extends OnyxKey>(mapping: ConnectOptions<TKey>) {
+function onyxSubscribe<TKey extends OnyxKey | OnyxCollectionKey>(mapping: ConnectOptions<TKey>) {
     const connectionId = Onyx.connect(mapping);
     return () => Onyx.disconnect(connectionId);
 }

src/libs/tryResolveUrlFromApiRoot.ts

@@ -1,3 +1,4 @@
+import type {ImageSourcePropType} from 'react-native';
 import Config from '@src/CONFIG';
 import type {Request} from '@src/types/onyx';
 import * as ApiUtils from './ApiUtils';
@@ -18,12 +19,12 @@ const ORIGIN_PATTERN = new RegExp(`^(${ORIGINS_TO_REPLACE.join('|')})`);
  * - Unmatched URLs (non expensify) are returned with no modifications
  */
 function tryResolveUrlFromApiRoot(url: string): string;
-function tryResolveUrlFromApiRoot(url: number): number;
-function tryResolveUrlFromApiRoot(url: string | number): string | number;
-function tryResolveUrlFromApiRoot(url: string | number): string | number {
+function tryResolveUrlFromApiRoot(url: ImageSourcePropType): number;
+function tryResolveUrlFromApiRoot(url: string | ImageSourcePropType): string | ImageSourcePropType;
+function tryResolveUrlFromApiRoot(url: string | ImageSourcePropType): string | ImageSourcePropType {
     // in native, when we import an image asset, it will have a number representation which can be used in `source` of Image
     // in this case we can skip the url resolving
-    if (typeof url === 'number') {
+    if (typeof url !== 'string') {
         return url;
     }
     const apiRoot = ApiUtils.getApiRoot({shouldUseSecure: false} as Request);

src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.tsx

@@ -2,7 +2,7 @@ import type {ForwardedRef} from 'react';
 import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react';
 
 /* eslint-disable no-restricted-imports */
-import type {EmitterSubscription, GestureResponderEvent, NativeTouchEvent, Text as RNText, View} from 'react-native';
+import type {EmitterSubscription, GestureResponderEvent, NativeTouchEvent, View} from 'react-native';
 import {Dimensions} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import ConfirmModal from '@components/ConfirmModal';
@@ -16,7 +16,7 @@ import CONST from '@src/CONST';
 import type {ReportAction} from '@src/types/onyx';
 import BaseReportActionContextMenu from './BaseReportActionContextMenu';
 import type {ContextMenuAction} from './ContextMenuActions';
-import type {ContextMenuType, ReportActionContextMenu} from './ReportActionContextMenu';
+import type {ContextMenuAnchor, ContextMenuType, ReportActionContextMenu} from './ReportActionContextMenu';
 
 type Location = {
     x: number;
@@ -67,7 +67,7 @@ function PopoverReportActionContextMenu(_props: never, ref: ForwardedRef<ReportA
     const contentRef = useRef<View>(null);
     const anchorRef = useRef<View | HTMLDivElement>(null);
     const dimensionsEventListener = useRef<EmitterSubscription | null>(null);
-    const contextMenuAnchorRef = useRef<View | RNText | null>(null);
+    const contextMenuAnchorRef = useRef<ContextMenuAnchor | null>(null);
     const contextMenuTargetNode = useRef<HTMLElement | null>(null);
 
     const onPopoverShow = useRef(() => {});

src/pages/home/report/ContextMenu/ReportActionContextMenu.ts

@@ -16,11 +16,13 @@ type OnCancel = () => void;
 
 type ContextMenuType = ValueOf<typeof CONST.CONTEXT_MENU_TYPES>;
 
+type ContextMenuAnchor = View | RNText | null | undefined;
+
 type ShowContextMenu = (
     type: ContextMenuType,
     event: GestureResponderEvent | MouseEvent,
     selection: string,
-    contextMenuAnchor: View | RNText | null,
+    contextMenuAnchor: ContextMenuAnchor,
     reportID?: string,
     reportActionID?: string,
     originalReportID?: string,
@@ -99,7 +101,7 @@ function showContextMenu(
     type: ContextMenuType,
     event: GestureResponderEvent | MouseEvent,
     selection: string,
-    contextMenuAnchor: View | RNText | null,
+    contextMenuAnchor: ContextMenuAnchor,
     reportID = '0',
     reportActionID = '0',
     originalReportID = '0',
@@ -180,4 +182,4 @@ function clearActiveReportAction() {
 }
 
 export {contextMenuRef, showContextMenu, hideContextMenu, isActiveReportAction, clearActiveReportAction, showDeleteModal, hideDeleteModal};
-export type {ContextMenuType, ShowContextMenu, ReportActionContextMenu};
+export type {ContextMenuType, ShowContextMenu, ReportActionContextMenu, ContextMenuAnchor};

src/types/onyx/OriginalMessage.ts

@@ -2,6 +2,8 @@ import type {ValueOf} from 'type-fest';
 import type CONST from '@src/CONST';
 import type DeepValueOf from '@src/types/utils/DeepValueOf';
 
+type PaymentMethodType = DeepValueOf<typeof CONST.IOU.PAYMENT_TYPE>;
+
 type ActionName = DeepValueOf<typeof CONST.REPORT.ACTIONS.TYPE>;
 type OriginalMessageActionName =
     | 'ADDCOMMENT'
@@ -43,7 +45,7 @@ type IOUMessage = {
     lastModified?: string;
     participantAccountIDs?: number[];
     type: ValueOf<typeof CONST.IOU.REPORT_ACTION_TYPE>;
-    paymentType?: DeepValueOf<typeof CONST.IOU.PAYMENT_TYPE>;
+    paymentType?: PaymentMethodType;
     /** Only exists when we are sending money */
     IOUDetails?: IOUDetails;
 };
@@ -284,4 +286,5 @@ export type {
     OriginalMessageAddComment,
     OriginalMessageSource,
     OriginalMessageReimbursementDequeued,
+    PaymentMethodType,
 };

src/types/onyx/TransactionViolation.ts

@@ -31,7 +31,7 @@ type TransactionViolation = {
     };
 };
 
-type TransactionViolations = Record<string, TransactionViolation>;
+type TransactionViolations = TransactionViolation[];
 
 export type {TransactionViolation, ViolationName};
 export default TransactionViolations;