refactor: migrated WalletStatementModal to function component

src/CONST.ts

@@ -982,6 +982,10 @@ const CONST = {
             GOLD: 'GOLD',
             SILVER: 'SILVER',
         },
+        WEB_MESSAGE_TYPE: {
+            STATEMENT: 'STATEMENT_NAVIGATE',
+            CONCIERGE: 'CONCIERGE_NAVIGATE',
+        },
     },
 
     PLAID: {

src/components/WalletStatementModal/index.js

@@ -12,6 +12,7 @@ import FullScreenLoadingIndicator from '../FullscreenLoadingIndicator';
 import ROUTES from '../../ROUTES';
 import Navigation from '../../libs/Navigation/Navigation';
 import * as Report from '../../libs/actions/Report';
+import CONST from '../../CONST';
 
 function WalletStatementModal({statementPageURL, session}) {
     const [isLoading, setIsLoading] = useState(true);
@@ -23,15 +24,15 @@ function WalletStatementModal({statementPageURL, session}) {
      * @param {MessageEvent} event
      */
     const navigate = (event) => {
-        if (!event.data || !event.data.type || (event.data.type !== 'STATEMENT_NAVIGATE' && event.data.type !== 'CONCIERGE_NAVIGATE')) {
+        if (!event.data || !event.data.type || (event.data.type !== CONST.WALLET.WEB_MESSAGE_TYPE.STATEMENT && event.data.type !== CONST.WALLET.WEB_MESSAGE_TYPE.CONCIERGE)) {
             return;
         }
 
-        if (event.data.type === 'CONCIERGE_NAVIGATE') {
+        if (event.data.type === CONST.WALLET.WEB_MESSAGE_TYPE.CONCIERGE) {
             Report.navigateToConciergeChat();
         }
 
-        if (event.data.type === 'STATEMENT_NAVIGATE' && event.data.url) {
+        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));
             if (navigateToIOURoute) {

src/components/WalletStatementModal/index.native.js

@@ -1,79 +1,76 @@
-import React from 'react';
+import React, {useCallback, useRef} from 'react';
 import {WebView} from 'react-native-webview';
 import lodashGet from 'lodash/get';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
-import withLocalize from '../withLocalize';
-import ONYXKEYS from '../../ONYXKEYS';
-import compose from '../../libs/compose';
 import {walletStatementPropTypes, walletStatementDefaultProps} from './WalletStatementModalPropTypes';
 import FullScreenLoadingIndicator from '../FullscreenLoadingIndicator';
 import * as Report from '../../libs/actions/Report';
 import Navigation from '../../libs/Navigation/Navigation';
 import ROUTES from '../../ROUTES';
+import ONYXKEYS from '../../ONYXKEYS';
+import CONST from '../../CONST';
 
-class WalletStatementModal extends React.Component {
-    constructor(props) {
-        super(props);
+const IOU_ROUTES = [ROUTES.IOU_REQUEST, ROUTES.IOU_SEND];
+const renderLoading = () => <FullScreenLoadingIndicator />;
 
-        this.authToken = lodashGet(props, 'session.authToken', null);
-        this.navigate = this.navigate.bind(this);
-    }
+function WalletStatementModal({statementPageURL, session}) {
+    const webViewRef = useRef();
+    const authToken = lodashGet(session, 'authToken', null);
 
     /**
      * Handles in-app navigation for webview links
      *
      * @param {String} params.type
      * @param {String} params.url
      */
-    navigate({type, url}) {
-        if (!this.webview || (type !== 'STATEMENT_NAVIGATE' && type !== 'CONCIERGE_NAVIGATE')) {
-            return;
-        }
+    const handleNavigationStateChange = useCallback(
+        ({type, url}) => {
+            if (!webViewRef.current || (type !== CONST.WALLET.WEB_MESSAGE_TYPE.STATEMENT && type !== CONST.WALLET.WEB_MESSAGE_TYPE.CONCIERGE)) {
+                return;
+            }
 
-        if (type === 'CONCIERGE_NAVIGATE') {
-            this.webview.stopLoading();
-            Report.navigateToConciergeChat();
-        }
+            if (type === CONST.WALLET.WEB_MESSAGE_TYPE.CONCIERGE) {
+                webViewRef.current.stopLoading();
+                Report.navigateToConciergeChat();
+            }
 
-        if (type === 'STATEMENT_NAVIGATE' && url) {
-            const iouRoutes = [ROUTES.IOU_REQUEST, ROUTES.IOU_SEND];
-            const navigateToIOURoute = _.find(iouRoutes, (iouRoute) => url.includes(iouRoute));
-            if (navigateToIOURoute) {
-                this.webview.stopLoading();
-                Navigation.navigate(navigateToIOURoute);
+            if (type === CONST.WALLET.WEB_MESSAGE_TYPE.STATEMENT && url) {
+                const iouRoute = _.find(IOU_ROUTES, (item) => url.includes(item));
+
+                if (iouRoute) {
+                    webViewRef.current.stopLoading();
+                    Navigation.navigate(iouRoute);
+                }
             }
-        }
-    }
+        },
+        [webViewRef],
+    );
 
-    render() {
-        return (
-            <WebView
-                ref={(node) => (this.webview = node)}
-                originWhitelist={['https://*']}
-                source={{
-                    uri: this.props.statementPageURL,
-                    headers: {
-                        Cookie: `authToken=${this.authToken}`,
-                    },
-                }}
-                incognito // 'incognito' prop required for Android, issue here https://github.com/react-native-webview/react-native-webview/issues/1352
-                startInLoadingState
-                renderLoading={() => <FullScreenLoadingIndicator />}
-                onNavigationStateChange={this.navigate}
-            />
-        );
-    }
+    return (
+        <WebView
+            ref={webViewRef}
+            originWhitelist={['https://*']}
+            source={{
+                uri: statementPageURL,
+                headers: {
+                    Cookie: `authToken=${authToken}`,
+                },
+            }}
+            incognito // 'incognito' prop required for Android, issue here https://github.com/react-native-webview/react-native-webview/issues/1352
+            startInLoadingState
+            renderLoading={renderLoading}
+            onNavigationStateChange={handleNavigationStateChange}
+        />
+    );
 }
 
+WalletStatementModal.displayName = 'WalletStatementModal';
 WalletStatementModal.propTypes = walletStatementPropTypes;
 WalletStatementModal.defaultProps = walletStatementDefaultProps;
 
-export default compose(
-    withLocalize,
-    withOnyx({
-        session: {
-            key: ONYXKEYS.SESSION,
-        },
-    }),
-)(WalletStatementModal);
+export default withOnyx({
+    session: {
+        key: ONYXKEYS.SESSION,
+    },
+})(WalletStatementModal);