From 822f431b2311b284fb9982c6871560dfbc7ba1a2 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 28 Aug 2023 10:59:30 +0200
Subject: [PATCH 1/4] Rewrite to functional component

---
 src/components/WalletStatementModal/index.js | 60 +++++++++-----------
 1 file changed, 26 insertions(+), 34 deletions(-)

diff --git a/src/components/WalletStatementModal/index.js b/src/components/WalletStatementModal/index.js
index cd6ce783acc1..601f5cc90aa7 100644
--- 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,21 +13,16 @@ 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
      */
-    navigate(e) {
+    const navigate = (e) => {
         if (!e.data || !e.data.type || (e.data.type !== 'STATEMENT_NAVIGATE' && e.data.type !== 'CONCIERGE_NAVIGATE')) {
             return;
         }
@@ -45,31 +40,28 @@ class WalletStatementModal extends React.Component {
         }
     }
 
-    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 = (e) => navigate(e);
+                    }}
+                />
+            </View>
+        </>
+    );
 }
 
 WalletStatementModal.propTypes = walletStatementPropTypes;

From 24d09d2b36bd6b74563c1a645d2d88b00867a438 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 28 Aug 2023 12:16:45 +0200
Subject: [PATCH 2/4] Semicolon

---
 src/components/WalletStatementModal/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/WalletStatementModal/index.js b/src/components/WalletStatementModal/index.js
index 601f5cc90aa7..fa44c7500a7e 100644
--- a/src/components/WalletStatementModal/index.js
+++ b/src/components/WalletStatementModal/index.js
@@ -38,7 +38,7 @@ function WalletStatementModal({statementPageURL, session}) {
                 Navigation.navigate(navigateToIOURoute);
             }
         }
-    }
+    };
 
     return (
         <>

From c99b94eb512d7c10c2f78054bbf8b6ee8cb7965c Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Tue, 29 Aug 2023 11:44:09 +0200
Subject: [PATCH 3/4] Rename e to event

---
 src/components/WalletStatementModal/index.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/WalletStatementModal/index.js b/src/components/WalletStatementModal/index.js
index fa44c7500a7e..854d813e5eaa 100644
--- a/src/components/WalletStatementModal/index.js
+++ b/src/components/WalletStatementModal/index.js
@@ -20,20 +20,20 @@ function WalletStatementModal({statementPageURL, session}) {
     /**
      * Handles in-app navigation for iframe links
      *
-     * @param {MessageEvent} e
+     * @param {MessageEvent} event
      */
-    const 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);
             }

From 3a76d56dc3ccc8677a84fcb721f1303e1226cd84 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Tue, 29 Aug 2023 11:45:03 +0200
Subject: [PATCH 4/4] Use more implicit function execution syntax

---
 src/components/WalletStatementModal/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/WalletStatementModal/index.js b/src/components/WalletStatementModal/index.js
index 854d813e5eaa..8d7d000ad72d 100644
--- a/src/components/WalletStatementModal/index.js
+++ b/src/components/WalletStatementModal/index.js
@@ -56,7 +56,7 @@ function WalletStatementModal({statementPageURL, session}) {
 
                         // 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) => navigate(e);
+                        window.onmessage = navigate;
                     }}
                 />
             </View>