Merge pull request #35566 from VickyStash/ts-migration/report-page

[TS migration] Migrate 'Report' page to TypeScript

src/components/DragAndDrop/Provider/types.ts

@@ -8,7 +8,7 @@ type DragAndDropProviderProps = {
     isDisabled?: boolean;
 
     /** Indicate that users are dragging file or not */
-    setIsDraggingOver: (value: boolean) => void;
+    setIsDraggingOver?: (value: boolean) => void;
 };
 
 type SetOnDropHandlerCallback = (event: DragEvent) => void;

src/components/MoneyReportHeader.tsx

@@ -40,7 +40,7 @@ type MoneyReportHeaderProps = MoneyReportHeaderOnyxProps & {
     report: OnyxTypes.Report;
 
     /** The policy tied to the money request report */
-    policy: OnyxTypes.Policy;
+    policy: OnyxEntry<OnyxTypes.Policy>;
 };
 
 function MoneyReportHeader({session, policy, chatReport, nextStep, report: moneyRequestReport}: MoneyReportHeaderProps) {
@@ -79,8 +79,8 @@ function MoneyReportHeader({session, policy, chatReport, nextStep, report: money
 
     // The submit button should be success green colour only if the user is submitter and the policy does not have Scheduled Submit turned on
     const isWaitingForSubmissionFromCurrentUser = useMemo(
-        () => chatReport?.isOwnPolicyExpenseChat && !policy.harvesting?.enabled,
-        [chatReport?.isOwnPolicyExpenseChat, policy.harvesting?.enabled],
+        () => chatReport?.isOwnPolicyExpenseChat && !policy?.harvesting?.enabled,
+        [chatReport?.isOwnPolicyExpenseChat, policy?.harvesting?.enabled],
     );
 
     const threeDotsMenuItems = [HeaderUtils.getPinMenuItem(moneyRequestReport)];

src/components/MoneyRequestHeader.tsx

@@ -46,10 +46,10 @@ type MoneyRequestHeaderProps = MoneyRequestHeaderOnyxProps & {
     report: Report;
 
     /** The policy which the report is tied to */
-    policy: Policy;
+    policy: OnyxEntry<Policy>;
 
     /** The report action the transaction is tied to from the parent report */
-    parentReportAction: ReportAction & OriginalMessageIOU;
+    parentReportAction: OnyxEntry<ReportAction>;
 };
 
 function MoneyRequestHeader({session, parentReport, report, parentReportAction, transaction, shownHoldUseExplanation = false, policy}: MoneyRequestHeaderProps) {
@@ -69,7 +69,11 @@ function MoneyRequestHeader({session, parentReport, report, parentReportAction,
     const isApprover = ReportUtils.isMoneyRequestReport(moneyRequestReport) && (session?.accountID ?? null) === moneyRequestReport?.managerID;
 
     const deleteTransaction = useCallback(() => {
-        IOU.deleteMoneyRequest(parentReportAction?.originalMessage?.IOUTransactionID ?? '', parentReportAction, true);
+        if (parentReportAction) {
+            const iouTransactionID = parentReportAction.actionName === CONST.REPORT.ACTIONS.TYPE.IOU ? parentReportAction.originalMessage?.IOUTransactionID ?? '' : '';
+            IOU.deleteMoneyRequest(iouTransactionID, parentReportAction, true);
+        }
+
         setIsDeleteModalVisible(false);
     }, [parentReportAction, setIsDeleteModalVisible]);
 
@@ -83,11 +87,13 @@ function MoneyRequestHeader({session, parentReport, report, parentReportAction,
     const canDeleteRequest = isActionOwner && ReportUtils.canAddOrDeleteTransactions(moneyRequestReport) && !isDeletedParentAction;
 
     const changeMoneyRequestStatus = () => {
+        const iouTransactionID = parentReportAction?.actionName === CONST.REPORT.ACTIONS.TYPE.IOU ? parentReportAction.originalMessage?.IOUTransactionID ?? '' : '';
+
         if (isOnHold) {
-            IOU.unholdRequest(parentReportAction?.originalMessage?.IOUTransactionID ?? '', report?.reportID);
+            IOU.unholdRequest(iouTransactionID, report?.reportID);
         } else {
             const activeRoute = encodeURIComponent(Navigation.getActiveRouteWithoutParams());
-            Navigation.navigate(ROUTES.MONEY_REQUEST_HOLD_REASON.getRoute(policy?.type, parentReportAction?.originalMessage?.IOUTransactionID ?? '', report?.reportID, activeRoute));
+            Navigation.navigate(ROUTES.MONEY_REQUEST_HOLD_REASON.getRoute(policy?.type ?? '', iouTransactionID, report?.reportID, activeRoute));
         }
     };
 

src/components/ScreenWrapper.tsx

@@ -14,7 +14,7 @@ import useTackInputFocus from '@hooks/useTackInputFocus';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as Browser from '@libs/Browser';
-import type {RootStackParamList} from '@libs/Navigation/types';
+import type {CentralPaneNavigatorParamList, RootStackParamList} from '@libs/Navigation/types';
 import toggleTestToolsModal from '@userActions/TestTool';
 import CONST from '@src/CONST';
 import CustomDevMenu from './CustomDevMenu';
@@ -92,7 +92,7 @@ type ScreenWrapperProps = {
      *
      * This is required because transitionEnd event doesn't trigger in the testing environment.
      */
-    navigation?: StackNavigationProp<RootStackParamList>;
+    navigation?: StackNavigationProp<RootStackParamList> | StackNavigationProp<CentralPaneNavigatorParamList>;
 
     /** Whether to show offline indicator on wide screens */
     shouldShowOfflineIndicatorInWideScreen?: boolean;

src/components/withViewportOffsetTop.tsx

@@ -40,3 +40,5 @@ export default function withViewportOffsetTop<TProps extends ViewportOffsetTopPr
 
     return forwardRef(WithViewportOffsetTop);
 }
+
+export type {ViewportOffsetTopProps};

src/libs/Navigation/AppNavigator/ReportScreenWrapper.tsx

@@ -13,7 +13,6 @@ function ReportScreenWrapper({route, navigation}: ReportScreenWrapperProps) {
     return (
         <>
             <ReportScreen
-                // @ts-expect-error Error will be resolved after ReportScreen migration to TypeScript
                 route={route}
                 navigation={navigation}
             />

src/libs/OnyxSelectors/reportWithoutHasDraftSelector.ts

@@ -1,10 +1,14 @@
 import type {OnyxEntry} from 'react-native-onyx';
 import type {Report} from '@src/types/onyx';
 
-export default function reportWithoutHasDraftSelector(report: OnyxEntry<Report>) {
+type ReportWithoutHasDraft = Omit<Report, 'hasDraft'>;
+
+export default function reportWithoutHasDraftSelector(report: OnyxEntry<Report>): OnyxEntry<ReportWithoutHasDraft> {
     if (!report) {
-        return report;
+        return null;
     }
     const {hasDraft, ...reportWithoutHasDraft} = report;
     return reportWithoutHasDraft;
 }
+
+export type {ReportWithoutHasDraft};

src/libs/ReportActionsUtils.ts

@@ -135,7 +135,7 @@ function isModifiedExpenseAction(reportAction: OnyxEntry<ReportAction>): boolean
     return reportAction?.actionName === CONST.REPORT.ACTIONS.TYPE.MODIFIEDEXPENSE;
 }
 
-function isWhisperAction(reportAction: OnyxEntry<ReportAction>): boolean {
+function isWhisperAction(reportAction: OnyxEntry<ReportAction> | EmptyObject): boolean {
     return (reportAction?.whisperedToAccountIDs ?? []).length > 0;
 }
 
@@ -205,7 +205,7 @@ function isSentMoneyReportAction(reportAction: OnyxEntry<ReportAction | Optimist
  * Returns whether the thread is a transaction thread, which is any thread with IOU parent
  * report action from requesting money (type - create) or from sending money (type - pay with IOUDetails field)
  */
-function isTransactionThread(parentReportAction: OnyxEntry<ReportAction>): boolean {
+function isTransactionThread(parentReportAction: OnyxEntry<ReportAction> | EmptyObject): boolean {
     return (
         parentReportAction?.actionName === CONST.REPORT.ACTIONS.TYPE.IOU &&
         (parentReportAction.originalMessage.type === CONST.IOU.REPORT_ACTION_TYPE.CREATE ||

src/libs/ReportUtils.ts

@@ -1230,7 +1230,7 @@ function isMoneyRequest(reportOrID: OnyxEntry<Report> | string): boolean {
 /**
  * Checks if a report is an IOU or expense report.
  */
-function isMoneyRequestReport(reportOrID: OnyxEntry<Report> | string): boolean {
+function isMoneyRequestReport(reportOrID: OnyxEntry<Report> | EmptyObject | string): boolean {
     const report = typeof reportOrID === 'object' ? reportOrID : allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${reportOrID}`] ?? null;
     return isIOUReport(report) || isExpenseReport(report);
 }
@@ -2806,8 +2806,8 @@ function getReportDescriptionText(report: Report): string {
     return parser.htmlToText(report.description);
 }
 
-function getPolicyDescriptionText(policy: Policy): string {
-    if (!policy.description) {
+function getPolicyDescriptionText(policy: OnyxEntry<Policy>): string {
+    if (!policy?.description) {
         return '';
     }
 
@@ -4603,7 +4603,7 @@ function getAddWorkspaceRoomOrChatReportErrors(report: OnyxEntry<Report>): Error
 /**
  * Return true if the Money Request report is marked for deletion.
  */
-function isMoneyRequestReportPendingDeletion(report: OnyxEntry<Report>): boolean {
+function isMoneyRequestReportPendingDeletion(report: OnyxEntry<Report> | EmptyObject): boolean {
     if (!isMoneyRequestReport(report)) {
         return false;
     }

src/libs/actions/Session/index.ts

@@ -253,7 +253,7 @@ function signOutAndRedirectToSignIn(shouldReplaceCurrentScreen?: boolean, should
  * @returns same callback if the action is allowed, otherwise a function that signs out and redirects to sign in
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-function checkIfActionIsAllowed<TCallback extends (...args: any[]) => any>(callback: TCallback, isAnonymousAction = false): TCallback | (() => void) {
+function checkIfActionIsAllowed<TCallback extends ((...args: any[]) => any) | void>(callback: TCallback, isAnonymousAction = false): TCallback | (() => void) {
     if (isAnonymousUser() && !isAnonymousAction) {
         return () => signOutAndRedirectToSignIn();
     }

src/libs/actions/Task.ts

@@ -100,7 +100,7 @@ function createTaskAndNavigate(
     assigneeEmail: string,
     assigneeAccountID = 0,
     assigneeChatReport: OnyxEntry<OnyxTypes.Report> = null,
-    policyID = CONST.POLICY.OWNER_EMAIL_FAKE,
+    policyID: string = CONST.POLICY.OWNER_EMAIL_FAKE,
 ) {
     const optimisticTaskReport = ReportUtils.buildOptimisticTaskReport(currentUserAccountID, assigneeAccountID, parentReportID, title, description, policyID);