Merge pull request #26064 from software-mansion-labs/maciejdobosz/exp…

…-171-250-migrate-indexjs-to-function-component Rewrite WalletStatementModal to functional component
Expensify · Sep 1, 2023 · 9b48540 · 9b48540
2 parents 567c8c6 + 3a76d56
commit 9b48540
Showing 1 changed file with 32 additions and 40 deletions.
diff --git a/src/components/WalletStatementModal/index.js b/src/components/WalletStatementModal/index.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState} from 'react';
 import {withOnyx} from 'react-native-onyx';
 import lodashGet from 'lodash/get';
 import {View} from 'react-native';
@@ -13,63 +13,55 @@ import ROUTES from '../../ROUTES';
 import Navigation from '../../libs/Navigation/Navigation';
 import * as Report from '../../libs/actions/Report';
 
-class WalletStatementModal extends React.Component {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            isLoading: true,
-        };
-    }
+function WalletStatementModal({statementPageURL, session}) {
+    const [isLoading, setIsLoading] = useState(true);
+    const authToken = lodashGet(session, 'authToken', null);
 
     /**
      * Handles in-app navigation for iframe links
      *
-     * @param {MessageEvent} e
+     * @param {MessageEvent} event
      */
-    navigate(e) {
-        if (!e.data || !e.data.type || (e.data.type !== 'STATEMENT_NAVIGATE' && e.data.type !== 'CONCIERGE_NAVIGATE')) {
+    const navigate = (event) => {
+        if (!event.data || !event.data.type || (event.data.type !== 'STATEMENT_NAVIGATE' && event.data.type !== 'CONCIERGE_NAVIGATE')) {
             return;
         }
 
-        if (e.data.type === 'CONCIERGE_NAVIGATE') {
+        if (event.data.type === 'CONCIERGE_NAVIGATE') {
             Report.navigateToConciergeChat();
         }
 
-        if (e.data.type === 'STATEMENT_NAVIGATE' && e.data.url) {
+        if (event.data.type === 'STATEMENT_NAVIGATE' && event.data.url) {
             const iouRoutes = [ROUTES.IOU_REQUEST, ROUTES.IOU_SEND, ROUTES.IOU_BILL];
-            const navigateToIOURoute = _.find(iouRoutes, (iouRoute) => e.data.url.includes(iouRoute));
+            const navigateToIOURoute = _.find(iouRoutes, (iouRoute) => event.data.url.includes(iouRoute));
             if (navigateToIOURoute) {
                 Navigation.navigate(navigateToIOURoute);
             }
         }
-    }
+    };
 
-    render() {
-        const authToken = lodashGet(this.props, 'session.authToken', null);
-        return (
-            <>
-                {this.state.isLoading && <FullScreenLoadingIndicator />}
-                <View style={[styles.flex1]}>
-                    <iframe
-                        src={`${this.props.statementPageURL}&authToken=${authToken}`}
-                        title="Statements"
-                        height="100%"
-                        width="100%"
-                        seamless="seamless"
-                        frameBorder="0"
-                        onLoad={() => {
-                            this.setState({isLoading: false});
+    return (
+        <>
+            {isLoading && <FullScreenLoadingIndicator />}
+            <View style={[styles.flex1]}>
+                <iframe
+                    src={`${statementPageURL}&authToken=${authToken}`}
+                    title="Statements"
+                    height="100%"
+                    width="100%"
+                    seamless="seamless"
+                    frameBorder="0"
+                    onLoad={() => {
+                        setIsLoading(false);
 
-                            // We listen to a message sent from the iframe to the parent component when a link is clicked.
-                            // This lets us handle navigation in the app, outside of the iframe.
-                            window.onmessage = (e) => this.navigate(e);
-                        }}
-                    />
-                </View>
-            </>
-        );
-    }
+                        // We listen to a message sent from the iframe to the parent component when a link is clicked.
+                        // This lets us handle navigation in the app, outside of the iframe.
+                        window.onmessage = navigate;
+                    }}
+                />
+            </View>
+        </>
+    );
 }
 
 WalletStatementModal.propTypes = walletStatementPropTypes;