Merge pull request #31832 from VickyStash/ts-migration/walletStatemen…

…tModal-component [TS migration] Migrate 'WalletStatementModal' component to TypeScript
Expensify · Nov 30, 2023 · be28950 · be28950
2 parents 6a95f03 + 64c6c6b
commit be28950
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 59 deletions.
diff --git a/src/components/WalletStatementModal/WalletStatementModalPropTypes.js b/src/components/WalletStatementModal/WalletStatementModalPropTypes.js
diff --git a/...ents/WalletStatementModal/index.native.js → ...nts/WalletStatementModal/index.native.tsx b/...ents/WalletStatementModal/index.native.js → ...nts/WalletStatementModal/index.native.tsx
@@ -1,31 +1,31 @@
-import lodashGet from 'lodash/get';
 import React, {useCallback, useRef} from 'react';
 import {withOnyx} from 'react-native-onyx';
-import {WebView} from 'react-native-webview';
-import _ from 'underscore';
+import {WebView, WebViewNavigation} from 'react-native-webview';
+import {ValueOf} from 'type-fest';
 import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import Navigation from '@libs/Navigation/Navigation';
 import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import {walletStatementDefaultProps, walletStatementPropTypes} from './WalletStatementModalPropTypes';
+import type {WalletStatementOnyxProps, WalletStatementProps} from './types';
+
+type WebViewMessageType = ValueOf<typeof CONST.WALLET.WEB_MESSAGE_TYPE>;
+
+type WebViewNavigationEvent = WebViewNavigation & {type?: WebViewMessageType};
 
 const IOU_ROUTES = [ROUTES.IOU_REQUEST, ROUTES.IOU_SEND];
 const renderLoading = () => <FullScreenLoadingIndicator />;
 
-function WalletStatementModal({statementPageURL, session}) {
-    const webViewRef = useRef();
-    const authToken = lodashGet(session, 'authToken', null);
+function WalletStatementModal({statementPageURL, session}: WalletStatementProps) {
+    const webViewRef = useRef<WebView>(null);
+    const authToken = session?.authToken ?? null;
 
     /**
      * Handles in-app navigation for webview links
-     *
-     * @param {String} params.type
-     * @param {String} params.url
      */
     const handleNavigationStateChange = useCallback(
-        ({type, url}) => {
+        ({type, url}: WebViewNavigationEvent) => {
             if (!webViewRef.current || (type !== CONST.WALLET.WEB_MESSAGE_TYPE.STATEMENT && type !== CONST.WALLET.WEB_MESSAGE_TYPE.CONCIERGE)) {
                 return;
             }
@@ -36,7 +36,7 @@ function WalletStatementModal({statementPageURL, session}) {
             }
 
             if (type === CONST.WALLET.WEB_MESSAGE_TYPE.STATEMENT && url) {
-                const iouRoute = _.find(IOU_ROUTES, (item) => url.includes(item));
+                const iouRoute = IOU_ROUTES.find((item) => url.includes(item));
 
                 if (iouRoute) {
                     webViewRef.current.stopLoading();
@@ -66,10 +66,8 @@ function WalletStatementModal({statementPageURL, session}) {
 }
 
 WalletStatementModal.displayName = 'WalletStatementModal';
-WalletStatementModal.propTypes = walletStatementPropTypes;
-WalletStatementModal.defaultProps = walletStatementDefaultProps;
 
-export default withOnyx({
+export default withOnyx<WalletStatementProps, WalletStatementOnyxProps>({
     session: {
         key: ONYXKEYS.SESSION,
     },

diff --git a/src/components/WalletStatementModal/index.js → ...components/WalletStatementModal/index.tsx b/src/components/WalletStatementModal/index.js → ...components/WalletStatementModal/index.tsx
@@ -1,31 +1,25 @@
-import lodashGet from 'lodash/get';
 import React, {useState} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
-import _ from 'underscore';
 import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
-import withLocalize from '@components/withLocalize';
-import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import {walletStatementDefaultProps, walletStatementPropTypes} from './WalletStatementModalPropTypes';
+import type {WalletStatementOnyxProps, WalletStatementProps} from './types';
 
-function WalletStatementModal({statementPageURL, session}) {
+function WalletStatementModal({statementPageURL, session}: WalletStatementProps) {
     const styles = useThemeStyles();
     const [isLoading, setIsLoading] = useState(true);
-    const authToken = lodashGet(session, 'authToken', null);
+    const authToken = session?.authToken ?? null;
 
     /**
      * Handles in-app navigation for iframe links
-     *
-     * @param {MessageEvent} event
      */
-    const navigate = (event) => {
-        if (!event.data || !event.data.type || (event.data.type !== CONST.WALLET.WEB_MESSAGE_TYPE.STATEMENT && event.data.type !== CONST.WALLET.WEB_MESSAGE_TYPE.CONCIERGE)) {
+    const navigate = (event: MessageEvent) => {
+        if (!event.data?.type || (event.data.type !== CONST.WALLET.WEB_MESSAGE_TYPE.STATEMENT && event.data.type !== CONST.WALLET.WEB_MESSAGE_TYPE.CONCIERGE)) {
             return;
         }
 
@@ -35,7 +29,7 @@ function WalletStatementModal({statementPageURL, session}) {
 
         if (event.data.type === CONST.WALLET.WEB_MESSAGE_TYPE.STATEMENT && event.data.url) {
             const iouRoutes = [ROUTES.IOU_REQUEST, ROUTES.IOU_SEND];
-            const navigateToIOURoute = _.find(iouRoutes, (iouRoute) => event.data.url.includes(iouRoute));
+            const navigateToIOURoute = iouRoutes.find((iouRoute) => event.data.url.includes(iouRoute));
             if (navigateToIOURoute) {
                 Navigation.navigate(navigateToIOURoute);
             }
@@ -51,7 +45,7 @@ function WalletStatementModal({statementPageURL, session}) {
                     title="Statements"
                     height="100%"
                     width="100%"
-                    seamless="seamless"
+                    seamless
                     frameBorder="0"
                     onLoad={() => {
                         setIsLoading(false);
@@ -66,15 +60,10 @@ function WalletStatementModal({statementPageURL, session}) {
     );
 }
 
-WalletStatementModal.propTypes = walletStatementPropTypes;
-WalletStatementModal.defaultProps = walletStatementDefaultProps;
 WalletStatementModal.displayName = 'WalletStatementModal';
 
-export default compose(
-    withLocalize,
-    withOnyx({
-        session: {
-            key: ONYXKEYS.SESSION,
-        },
-    }),
-)(WalletStatementModal);
+export default withOnyx<WalletStatementProps, WalletStatementOnyxProps>({
+    session: {
+        key: ONYXKEYS.SESSION,
+    },
+})(WalletStatementModal);
diff --git a/src/components/WalletStatementModal/types.ts b/src/components/WalletStatementModal/types.ts
@@ -0,0 +1,14 @@
+import {OnyxEntry} from 'react-native-onyx/lib/types';
+import type {Session} from '@src/types/onyx';
+
+type WalletStatementOnyxProps = {
+    /** Session info for the currently logged in user. */
+    session: OnyxEntry<Session>;
+};
+
+type WalletStatementProps = WalletStatementOnyxProps & {
+    /** URL for oldDot (expensify.com) statements page to display */
+    statementPageURL: string;
+};
+
+export type {WalletStatementProps, WalletStatementOnyxProps};