[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);