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

src/components/ReportActionItem/ReportActionItemImage.tsx

@@ -1,8 +1,8 @@
 import Str from 'expensify-common/lib/str';
 import React from 'react';
 import type {ReactElement} from 'react';
+import type {ImageSourcePropType, ViewStyle} from 'react-native';
 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';
@@ -79,30 +79,25 @@ function ReportActionItemImage({thumbnail, image, enablePreviewModal = false, tr
         return (
             <ShowContextMenuContext.Consumer>
                 {({report}) => (
-                    // @ts-expect-error TODO: Remove this once AttachmentModal (https://github.com/Expensify/App/issues/25130) is migrated to TypeScript.
                     <AttachmentModal
                         source={imageSource}
                         isAuthTokenRequired={!isLocalFile}
                         report={report}
                         isReceiptAttachment
                         canEditReceipt={canEditReceipt}
-                        allowToDownload
+                        allowDownload
                         originalFileName={transaction?.filename}
                     >
-                        {
-                            // @ts-expect-error TODO: Remove this once AttachmentModal (https://github.com/Expensify/App/issues/25130) is migrated to TypeScript.
-                            ({show}) => (
-                                <PressableWithoutFocus
-                                    // @ts-expect-error TODO: Remove this once AttachmentModal (https://github.com/Expensify/App/issues/25130) is migrated to TypeScript.
-                                    style={[styles.noOutline, styles.w100, styles.h100]}
-                                    onPress={show}
-                                    accessibilityRole={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON}
-                                    accessibilityLabel={translate('accessibilityHints.viewAttachment')}
-                                >
-                                    {receiptImageComponent}
-                                </PressableWithoutFocus>
-                            )
-                        }
+                        {({show}) => (
+                            <PressableWithoutFocus
+                                style={[styles.w100, styles.h100, styles.noOutline as ViewStyle]}
+                                onPress={show}
+                                accessibilityRole={CONST.ROLE.BUTTON}
+                                accessibilityLabel={translate('accessibilityHints.viewAttachment')}
+                            >
+                                {receiptImageComponent}
+                            </PressableWithoutFocus>
+                        )}
                     </AttachmentModal>
                 )}
             </ShowContextMenuContext.Consumer>

src/libs/TransactionUtils.ts

@@ -36,10 +36,10 @@ Onyx.connect({
     callback: (value) => (allReports = value),
 });
 
-function isDistanceRequest(transaction: Transaction): boolean {
+function isDistanceRequest(transaction: OnyxEntry<Transaction>): boolean {
     // This is used during the request creation flow before the transaction has been saved to the server
     if (lodashHas(transaction, 'iouRequestType')) {
-        return transaction.iouRequestType === CONST.IOU.REQUEST_TYPE.DISTANCE;
+        return transaction?.iouRequestType === CONST.IOU.REQUEST_TYPE.DISTANCE;
     }
 
     // This is the case for transaction objects once they have been saved to the server

src/pages/ReportAvatar.tsx

@@ -28,7 +28,6 @@ function ReportAvatar({report = {} as Report, policies, isLoadingApp = true}: Re
 
     return (
         <AttachmentModal
-            // @ts-expect-error TODO: Remove this once AttachmentModal (https://github.com/Expensify/App/issues/25130) is migrated to TypeScript.
             headerTitle={policyName}
             defaultOpen
             source={UserUtils.getFullSizeAvatar(avatarURL, 0)}
@@ -38,7 +37,7 @@ function ReportAvatar({report = {} as Report, policies, isLoadingApp = true}: Re
             isWorkspaceAvatar
             originalFileName={policy?.originalFileName ?? policyName}
             shouldShowNotFoundPage={!report?.reportID && !isLoadingApp}
-            isLoading={(!report?.reportID || !policy?.id) && isLoadingApp}
+            isLoading={(!report?.reportID || !policy?.id) && !!isLoadingApp}
         />
     );
 }

src/pages/home/report/ReportAttachments.tsx

@@ -1,5 +1,6 @@
 import type {StackScreenProps} from '@react-navigation/stack';
 import React, {useCallback} from 'react';
+import type {Attachment} from '@components/AttachmentModal';
 import AttachmentModal from '@components/AttachmentModal';
 import ComposerFocusManager from '@libs/ComposerFocusManager';
 import Navigation from '@libs/Navigation/Navigation';
@@ -8,19 +9,6 @@ import * as ReportUtils from '@libs/ReportUtils';
 import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
 
-type File = {
-    name: string;
-};
-
-type Attachment = {
-    file: File;
-    hasBeenFlagged: boolean;
-    isAuthTokenRequired: boolean;
-    isReceipt: boolean;
-    reportActionID: string;
-    source: string;
-};
-
 type ReportAttachmentsProps = StackScreenProps<AuthScreensParamList, typeof SCREENS.REPORT_ATTACHMENTS>;
 
 function ReportAttachments({route}: ReportAttachmentsProps) {
@@ -33,15 +21,14 @@ function ReportAttachments({route}: ReportAttachmentsProps) {
 
     const onCarouselAttachmentChange = useCallback(
         (attachment: Attachment) => {
-            const routeToNavigate = ROUTES.REPORT_ATTACHMENTS.getRoute(reportID, attachment.source);
+            const routeToNavigate = ROUTES.REPORT_ATTACHMENTS.getRoute(reportID, String(attachment.source));
             Navigation.navigate(routeToNavigate);
         },
         [reportID],
     );
 
     return (
         <AttachmentModal
-            // @ts-expect-error TODO: Remove this once AttachmentModal (https://github.com/Expensify/App/issues/25130) is migrated to TypeScript.
             allowDownload
             defaultOpen
             report={report}

src/pages/settings/Profile/ProfileAvatar.tsx

@@ -34,15 +34,14 @@ function ProfileAvatar({route, personalDetails, isLoadingApp = true}: ProfileAva
 
     return (
         <AttachmentModal
-            // @ts-expect-error TODO: Remove this once AttachmentModal (https://github.com/Expensify/App/issues/25130) is migrated to TypeScript.
             headerTitle={personalDetail?.displayName ?? ''}
             defaultOpen
             source={UserUtils.getFullSizeAvatar(avatarURL, accountID)}
             onModalClose={() => {
                 Navigation.goBack();
             }}
             originalFileName={personalDetail?.originalFileName ?? ''}
-            isLoading={isLoading}
+            isLoading={!!isLoading}
             shouldShowNotFoundPage={!avatarURL}
         />
     );

src/pages/workspace/WorkspaceAvatar.tsx

@@ -24,7 +24,6 @@ function WorkspaceAvatar({route, policy, isLoadingApp = true}: WorkspaceAvatarPr
 
     return (
         <AttachmentModal
-            // @ts-expect-error TODO: Remove this once AttachmentModal (https://github.com/Expensify/App/issues/25130) is migrated to TypeScript.
             headerTitle={policy?.name ?? ''}
             defaultOpen
             source={UserUtils.getFullSizeAvatar(avatarURL, 0)}
@@ -34,7 +33,7 @@ function WorkspaceAvatar({route, policy, isLoadingApp = true}: WorkspaceAvatarPr
             isWorkspaceAvatar
             originalFileName={policy?.originalFileName ?? policy?.name ?? ''}
             shouldShowNotFoundPage={!Object.keys(policy ?? {}).length && !isLoadingApp}
-            isLoading={!Object.keys(policy ?? {}).length && isLoadingApp}
+            isLoading={!Object.keys(policy ?? {}).length && !!isLoadingApp}
         />
     );
 }

src/styles/utils/generators/ModalStyleUtils.ts

@@ -1,9 +1,9 @@
 import type {ViewStyle} from 'react-native';
 import type {ModalProps} from 'react-native-modal';
-import type {ValueOf} from 'type-fest';
 import type {ThemeStyles} from '@styles/index';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
+import type ModalType from '@src/types/utils/ModalType';
 import type StyleUtilGenerator from './types';
 
 function getCenteredModalStyles(styles: ThemeStyles, windowWidth: number, isSmallScreenWidth: boolean, isFullScreenWhenSmall = false): ViewStyle {
@@ -15,8 +15,6 @@ function getCenteredModalStyles(styles: ThemeStyles, windowWidth: number, isSmal
     };
 }
 
-type ModalType = ValueOf<typeof CONST.MODAL.MODAL_TYPE>;
-
 type WindowDimensions = {
     windowWidth: number;
     windowHeight: number;

src/types/utils/ModalType.ts

@@ -0,0 +1,6 @@
+import type {ValueOf} from 'type-fest';
+import type CONST from '@src/CONST';
+
+type ModalType = ValueOf<typeof CONST.MODAL.MODAL_TYPE>;
+
+export default ModalType;