Merge pull request #35242 from mkhutornyi/ts-migration/App

[TS migration] Migrate 'App.js' file to TypeScript

package.json

@@ -149,7 +149,7 @@
     "react-native-pdf": "6.7.3",
     "react-native-performance": "^5.1.0",
     "react-native-permissions": "^3.9.3",
-    "react-native-picker-select": "git+https://github.com/Expensify/react-native-picker-select.git#7a407cd4174d9838a944c1c2e1cb4a9737ac69c5",
+    "react-native-picker-select": "git+https://github.com/Expensify/react-native-picker-select.git#42b334d0c4e71d225601f72828d3dedd0bc22212",
     "react-native-plaid-link-sdk": "10.8.0",
     "react-native-qrcode-svg": "^6.2.0",
     "react-native-quick-sqlite": "^8.0.0-beta.2",

src/App.js → src/App.tsx

@@ -1,5 +1,4 @@
 import {PortalProvider} from '@gorhom/portal';
-import PropTypes from 'prop-types';
 import React from 'react';
 import {LogBox} from 'react-native';
 import {GestureHandlerRootView} from 'react-native-gesture-handler';
@@ -32,14 +31,11 @@ import * as Session from './libs/actions/Session';
 import * as Environment from './libs/Environment/Environment';
 import InitialUrlContext from './libs/InitialUrlContext';
 import {ReportAttachmentsProvider} from './pages/home/report/ReportAttachmentsContext';
+import type {Route} from './ROUTES';
 
-const propTypes = {
-    /** Initial url that may be passed as deeplink from Hybrid App */
-    url: PropTypes.string,
-};
-
-const defaultProps = {
-    url: undefined,
+type AppProps = {
+    /** If we have an authToken this is true */
+    url?: Route;
 };
 
 // For easier debugging and development, when we are in web we expose Onyx to the window, so you can more easily set data into Onyx
@@ -57,7 +53,7 @@ LogBox.ignoreLogs([
 
 const fill = {flex: 1};
 
-function App({url}) {
+function App({url}: AppProps) {
     useDefaultDragAndDrop();
     OnyxUpdateManager();
     return (
@@ -88,6 +84,7 @@ function App({url}) {
                     <CustomStatusBarAndBackground />
                     <ErrorBoundary errorMessage="NewExpensify crash caught by error boundary">
                         <ColorSchemeWrapper>
+                            {/* @ts-expect-error TODO: Remove this once Expensify (https://github.com/Expensify/App/issues/25231) is migrated to TypeScript. */}
                             <Expensify />
                         </ColorSchemeWrapper>
                     </ErrorBoundary>
@@ -97,8 +94,6 @@ function App({url}) {
     );
 }
 
-App.propTypes = propTypes;
-App.defaultProps = defaultProps;
 App.displayName = 'App';
 
 export default App;

src/components/CustomStatusBarAndBackground/index.tsx

@@ -10,7 +10,7 @@ import updateStatusBarAppearance from './updateStatusBarAppearance';
 type CustomStatusBarAndBackgroundProps = {
     /** Whether the CustomStatusBar is nested within another CustomStatusBar.
      *  A nested CustomStatusBar will disable the "root" CustomStatusBar. */
-    isNested: boolean;
+    isNested?: boolean;
 };
 
 function CustomStatusBarAndBackground({isNested = false}: CustomStatusBarAndBackgroundProps) {

src/components/ThemeProvider.tsx

@@ -1,5 +1,3 @@
-/* eslint-disable react/jsx-props-no-spreading */
-import PropTypes from 'prop-types';
 import React, {useEffect, useMemo} from 'react';
 import useThemePreferenceWithStaticOverride from '@hooks/useThemePreferenceWithStaticOverride';
 import DomUtils from '@libs/DomUtils';
@@ -8,11 +6,6 @@ import themes from '@styles/theme';
 import ThemeContext from '@styles/theme/context/ThemeContext';
 import type {ThemePreferenceWithoutSystem} from '@styles/theme/types';
 
-const propTypes = {
-    /** Rendered child component */
-    children: PropTypes.node.isRequired,
-};
-
 type ThemeProviderProps = React.PropsWithChildren & {
     theme?: ThemePreferenceWithoutSystem;
 };
@@ -29,7 +22,6 @@ function ThemeProvider({children, theme: staticThemePreference}: ThemeProviderPr
     return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
 }
 
-ThemeProvider.propTypes = propTypes;
 ThemeProvider.displayName = 'ThemeProvider';
 
 export default ThemeProvider;

src/pages/home/report/ReportAttachmentsContext.js → src/pages/home/report/ReportAttachmentsContext.tsx

@@ -1,17 +1,20 @@
-import PropTypes from 'prop-types';
 import React, {useEffect, useMemo, useRef} from 'react';
 import useCurrentReportID from '@hooks/useCurrentReportID';
+import type ChildrenProps from '@src/types/utils/ChildrenProps';
 
-const ReportAttachmentsContext = React.createContext();
-
-const propTypes = {
-    /** Rendered child component */
-    children: PropTypes.node.isRequired,
+type ReportAttachmentsContextValue = {
+    isAttachmentHidden: (reportActionID: string) => boolean;
+    updateHiddenAttachments: (reportActionID: string, isHidden: boolean) => void;
 };
 
-function ReportAttachmentsProvider(props) {
+const ReportAttachmentsContext = React.createContext<ReportAttachmentsContextValue>({
+    isAttachmentHidden: () => false,
+    updateHiddenAttachments: () => {},
+});
+
+function ReportAttachmentsProvider({children}: ChildrenProps) {
     const currentReportID = useCurrentReportID();
-    const hiddenAttachments = useRef({});
+    const hiddenAttachments = useRef<Record<string, boolean>>({});
 
     useEffect(() => {
         // We only want to store the attachment visibility for the current report.
@@ -21,8 +24,8 @@ function ReportAttachmentsProvider(props) {
 
     const contextValue = useMemo(
         () => ({
-            isAttachmentHidden: (reportActionID) => hiddenAttachments.current[reportActionID],
-            updateHiddenAttachments: (reportActionID, value) => {
+            isAttachmentHidden: (reportActionID: string) => hiddenAttachments.current[reportActionID],
+            updateHiddenAttachments: (reportActionID: string, value: boolean) => {
                 hiddenAttachments.current = {
                     ...hiddenAttachments.current,
                     [reportActionID]: value,
@@ -32,10 +35,9 @@ function ReportAttachmentsProvider(props) {
         [],
     );
 
-    return <ReportAttachmentsContext.Provider value={contextValue}>{props.children}</ReportAttachmentsContext.Provider>;
+    return <ReportAttachmentsContext.Provider value={contextValue}>{children}</ReportAttachmentsContext.Provider>;
 }
 
-ReportAttachmentsProvider.propTypes = propTypes;
 ReportAttachmentsProvider.displayName = 'ReportAttachmentsProvider';
 
 export default ReportAttachmentsContext;

src/types/global.d.ts

@@ -27,9 +27,7 @@ declare module '*.lottie' {
     export default value;
 }
 
-// Global methods for Onyx key management for debugging purposes
 // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
 interface Window {
-    enableMemoryOnlyKeys: () => void;
-    disableMemoryOnlyKeys: () => void;
+    setSupportToken: (token: string, email: string, accountID: number) => void;
 }

src/types/modules/react-native-onyx.d.ts

@@ -1,3 +1,4 @@
+import type Onyx from 'react-native-onyx';
 import type {OnyxCollectionKey, OnyxKey, OnyxValues} from '@src/ONYXKEYS';
 
 declare module 'react-native-onyx' {
@@ -8,3 +9,13 @@ declare module 'react-native-onyx' {
         values: OnyxValues;
     }
 }
+
+declare global {
+    // Global methods for Onyx key management for debugging purposes
+    // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+    interface Window {
+        enableMemoryOnlyKeys: () => void;
+        disableMemoryOnlyKeys: () => void;
+        Onyx: typeof Onyx;
+    }
+}