From 6ee139cef99830362aabf76b2760f3cb4e89a858 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Tue, 15 Mar 2022 13:45:20 -0600 Subject: [PATCH 01/10] convert WalletStatementModal mobile to class component --- .../WalletStatementModal/index.native.js | 39 +++++++++++-------- 1 file changed, 23 insertions(+), 16 deletions(-) diff --git a/src/components/WalletStatementModal/index.native.js b/src/components/WalletStatementModal/index.native.js index 42784e4b2671..6f3bebe38691 100644 --- a/src/components/WalletStatementModal/index.native.js +++ b/src/components/WalletStatementModal/index.native.js @@ -8,22 +8,29 @@ import compose from '../../libs/compose'; import {walletStatementPropTypes, walletStatementDefaultProps} from './WalletStatementModalPropTypes'; import FullScreenLoadingIndicator from '../FullscreenLoadingIndicator'; -const WalletStatementModal = (props) => { - const authToken = lodashGet(props, 'session.authToken', null); - return ( - } - /> - ); +class WalletStatementModal extends React.Component { + constructor(props) { + super(props); + + this.authToken = lodashGet(props, 'session.authToken', null); + } + + render() { + return ( + } + /> + ); + } }; WalletStatementModal.propTypes = walletStatementPropTypes; From a51f059fa33f810a513141dd78ddab8709b43ebe Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Tue, 15 Mar 2022 14:00:21 -0600 Subject: [PATCH 02/10] add webview ref and onNavigationStateChange handler --- .../WalletStatementModal/index.native.js | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/src/components/WalletStatementModal/index.native.js b/src/components/WalletStatementModal/index.native.js index 6f3bebe38691..fba0f373433f 100644 --- a/src/components/WalletStatementModal/index.native.js +++ b/src/components/WalletStatementModal/index.native.js @@ -7,6 +7,8 @@ import ONYXKEYS from '../../ONYXKEYS'; import compose from '../../libs/compose'; import {walletStatementPropTypes, walletStatementDefaultProps} from './WalletStatementModalPropTypes'; import FullScreenLoadingIndicator from '../FullscreenLoadingIndicator'; +import Navigation from '../../libs/Navigation/Navigation'; +import ROUTES from '../../ROUTES'; class WalletStatementModal extends React.Component { constructor(props) { @@ -18,6 +20,7 @@ class WalletStatementModal extends React.Component { render() { return ( this.webview = node} originWhitelist={['https://*']} source={{ uri: this.props.statementPageURL, @@ -28,6 +31,23 @@ class WalletStatementModal extends React.Component { incognito // 'incognito' prop required for Android, issue here https://github.com/react-native-webview/react-native-webview/issues/1352 startInLoadingState renderLoading={() => } + onNavigationStateChange={({url}) => { + if (!this.webview || !url) { + return; + } + if (url.includes(ROUTES.IOU_REQUEST)) { + this.webview.stopLoading(); + Navigation.navigate(ROUTES.IOU_REQUEST); + } + if (url.includes(ROUTES.IOU_SEND)) { + this.webview.stopLoading(); + Navigation.navigate(ROUTES.IOU_SEND); + } + if (url.includes(ROUTES.IOU_BILL)) { + this.webview.stopLoading(); + Navigation.navigate(ROUTES.IOU_BILL); + } + }} /> ); } From f6a5a815ece476c79edd30fc6a4341062663740f Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Tue, 15 Mar 2022 14:27:08 -0600 Subject: [PATCH 03/10] refactor navigate function --- .../WalletStatementModal/index.native.js | 32 +++++++++---------- 1 file changed, 15 insertions(+), 17 deletions(-) diff --git a/src/components/WalletStatementModal/index.native.js b/src/components/WalletStatementModal/index.native.js index fba0f373433f..822921fc2963 100644 --- a/src/components/WalletStatementModal/index.native.js +++ b/src/components/WalletStatementModal/index.native.js @@ -2,6 +2,7 @@ import React 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'; @@ -15,6 +16,19 @@ class WalletStatementModal extends React.Component { super(props); this.authToken = lodashGet(props, 'session.authToken', null); + this.navigate = this.navigate.bind(this); + } + + navigate({url}) { + if (!this.webview || !url) { + return; + } + const iouRoutes = [ROUTES.IOU_REQUEST, ROUTES.IOU_SEND, ROUTES.IOU_BILL]; + const navigateToIOURoute = _.find(iouRoutes, iouRoute => url.includes(iouRoute)); + if (navigateToIOURoute) { + this.webview.stopLoading(); + Navigation.navigate(navigateToIOURoute); + } } render() { @@ -31,23 +45,7 @@ class WalletStatementModal extends React.Component { incognito // 'incognito' prop required for Android, issue here https://github.com/react-native-webview/react-native-webview/issues/1352 startInLoadingState renderLoading={() => } - onNavigationStateChange={({url}) => { - if (!this.webview || !url) { - return; - } - if (url.includes(ROUTES.IOU_REQUEST)) { - this.webview.stopLoading(); - Navigation.navigate(ROUTES.IOU_REQUEST); - } - if (url.includes(ROUTES.IOU_SEND)) { - this.webview.stopLoading(); - Navigation.navigate(ROUTES.IOU_SEND); - } - if (url.includes(ROUTES.IOU_BILL)) { - this.webview.stopLoading(); - Navigation.navigate(ROUTES.IOU_BILL); - } - }} + onNavigationStateChange={this.navigate} /> ); } From ca991af209d56370ae2a8acf67f838796f106f4a Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Tue, 15 Mar 2022 15:42:10 -0600 Subject: [PATCH 04/10] listen to iframe events --- src/components/WalletStatementModal/index.js | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/src/components/WalletStatementModal/index.js b/src/components/WalletStatementModal/index.js index 31783da04e89..33e3f18708ff 100644 --- a/src/components/WalletStatementModal/index.js +++ b/src/components/WalletStatementModal/index.js @@ -2,12 +2,15 @@ import React from 'react'; import {withOnyx} from 'react-native-onyx'; import lodashGet from 'lodash/get'; import {View} from 'react-native'; +import _ from 'underscore'; import compose from '../../libs/compose'; import withLocalize from '../withLocalize'; import ONYXKEYS from '../../ONYXKEYS'; import {walletStatementPropTypes, walletStatementDefaultProps} from './WalletStatementModalPropTypes'; import styles from '../../styles/styles'; import FullScreenLoadingIndicator from '../FullscreenLoadingIndicator'; +import ROUTES from '../../ROUTES'; +import Navigation from '../../libs/Navigation/Navigation'; class WalletStatementModal extends React.Component { constructor(props) { @@ -18,6 +21,17 @@ class WalletStatementModal extends React.Component { }; } + navigate(url) { + if (!url) { + return; + } + const iouRoutes = [ROUTES.IOU_REQUEST, ROUTES.IOU_SEND, ROUTES.IOU_BILL]; + const navigateToIOURoute = _.find(iouRoutes, iouRoute => url.includes(iouRoute)); + if (navigateToIOURoute) { + Navigation.navigate(navigateToIOURoute); + } + } + render() { const authToken = lodashGet(this.props, 'session.authToken', null); return ( @@ -33,7 +47,10 @@ class WalletStatementModal extends React.Component { width="100%" seamless="seamless" frameBorder="0" - onLoad={() => this.setState({isLoading: false})} + onLoad={() => { + this.setState({isLoading: false}); + window.onmessage = e => this.navigate(e.data); + }} /> From 60377919a3b54af27147a37e8bb7d6cc5942ede0 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Tue, 15 Mar 2022 15:49:06 -0600 Subject: [PATCH 05/10] add comment --- src/components/WalletStatementModal/index.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/WalletStatementModal/index.js b/src/components/WalletStatementModal/index.js index 33e3f18708ff..4612f48c4e64 100644 --- a/src/components/WalletStatementModal/index.js +++ b/src/components/WalletStatementModal/index.js @@ -49,6 +49,9 @@ class WalletStatementModal extends React.Component { frameBorder="0" onLoad={() => { this.setState({isLoading: 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.data); }} /> From 910232a7655157e38836da176570dbc9d783db86 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Tue, 15 Mar 2022 15:52:54 -0600 Subject: [PATCH 06/10] add jsdocs --- src/components/WalletStatementModal/index.js | 5 +++++ src/components/WalletStatementModal/index.native.js | 6 ++++++ 2 files changed, 11 insertions(+) diff --git a/src/components/WalletStatementModal/index.js b/src/components/WalletStatementModal/index.js index 4612f48c4e64..bcff39477c7a 100644 --- a/src/components/WalletStatementModal/index.js +++ b/src/components/WalletStatementModal/index.js @@ -21,6 +21,11 @@ class WalletStatementModal extends React.Component { }; } + /** + * Handles in-app navigation for iframe links + * + * @param {String} url + */ navigate(url) { if (!url) { return; diff --git a/src/components/WalletStatementModal/index.native.js b/src/components/WalletStatementModal/index.native.js index 822921fc2963..8ce089734313 100644 --- a/src/components/WalletStatementModal/index.native.js +++ b/src/components/WalletStatementModal/index.native.js @@ -19,6 +19,12 @@ class WalletStatementModal extends React.Component { this.navigate = this.navigate.bind(this); } + /** + * Handles in-app navigation for webview links + * + * @param {Object} params + * @param {String} params.url + */ navigate({url}) { if (!this.webview || !url) { return; From bde60722f66869ff7b0e1aa3da1a1fa64daff0bd Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Tue, 15 Mar 2022 16:21:03 -0600 Subject: [PATCH 07/10] fix lint --- src/components/WalletStatementModal/index.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/WalletStatementModal/index.native.js b/src/components/WalletStatementModal/index.native.js index 8ce089734313..01feae5fa021 100644 --- a/src/components/WalletStatementModal/index.native.js +++ b/src/components/WalletStatementModal/index.native.js @@ -55,7 +55,7 @@ class WalletStatementModal extends React.Component { /> ); } -}; +} WalletStatementModal.propTypes = walletStatementPropTypes; WalletStatementModal.defaultProps = walletStatementDefaultProps; From c1a53f22ddd4ccd6a238c277da9ab2f3bf1c21bc Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Wed, 16 Mar 2022 14:12:06 -0600 Subject: [PATCH 08/10] check url data type --- src/components/WalletStatementModal/index.js | 2 +- src/components/WalletStatementModal/index.native.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/WalletStatementModal/index.js b/src/components/WalletStatementModal/index.js index bcff39477c7a..7dc439aa47f4 100644 --- a/src/components/WalletStatementModal/index.js +++ b/src/components/WalletStatementModal/index.js @@ -27,7 +27,7 @@ class WalletStatementModal extends React.Component { * @param {String} url */ navigate(url) { - if (!url) { + if (!url || typeof url !== 'string') { return; } const iouRoutes = [ROUTES.IOU_REQUEST, ROUTES.IOU_SEND, ROUTES.IOU_BILL]; diff --git a/src/components/WalletStatementModal/index.native.js b/src/components/WalletStatementModal/index.native.js index 01feae5fa021..b43ac9122e86 100644 --- a/src/components/WalletStatementModal/index.native.js +++ b/src/components/WalletStatementModal/index.native.js @@ -26,7 +26,7 @@ class WalletStatementModal extends React.Component { * @param {String} params.url */ navigate({url}) { - if (!this.webview || !url) { + if (!this.webview || !url || typeof url !== 'string') { return; } const iouRoutes = [ROUTES.IOU_REQUEST, ROUTES.IOU_SEND, ROUTES.IOU_BILL]; From c7a310de630e99e9f9fe8c05ddd58229065a3cc1 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Wed, 16 Mar 2022 16:35:38 -0600 Subject: [PATCH 09/10] add message type --- src/components/WalletStatementModal/index.js | 10 +++++----- src/components/WalletStatementModal/index.native.js | 2 +- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/WalletStatementModal/index.js b/src/components/WalletStatementModal/index.js index 7dc439aa47f4..e9d11d610f7e 100644 --- a/src/components/WalletStatementModal/index.js +++ b/src/components/WalletStatementModal/index.js @@ -24,14 +24,14 @@ class WalletStatementModal extends React.Component { /** * Handles in-app navigation for iframe links * - * @param {String} url + * @param {MessageEvent} e */ - navigate(url) { - if (!url || typeof url !== 'string') { + navigate(e) { + if (!e.data || e.data.type !== 'STATEMENT_NAVIGATE' || !e.data.url ) { return; } const iouRoutes = [ROUTES.IOU_REQUEST, ROUTES.IOU_SEND, ROUTES.IOU_BILL]; - const navigateToIOURoute = _.find(iouRoutes, iouRoute => url.includes(iouRoute)); + const navigateToIOURoute = _.find(iouRoutes, iouRoute => e.data.url.includes(iouRoute)); if (navigateToIOURoute) { Navigation.navigate(navigateToIOURoute); } @@ -57,7 +57,7 @@ class WalletStatementModal extends React.Component { // 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.data); + window.onmessage = e => this.navigate(e); }} /> diff --git a/src/components/WalletStatementModal/index.native.js b/src/components/WalletStatementModal/index.native.js index b43ac9122e86..01feae5fa021 100644 --- a/src/components/WalletStatementModal/index.native.js +++ b/src/components/WalletStatementModal/index.native.js @@ -26,7 +26,7 @@ class WalletStatementModal extends React.Component { * @param {String} params.url */ navigate({url}) { - if (!this.webview || !url || typeof url !== 'string') { + if (!this.webview || !url) { return; } const iouRoutes = [ROUTES.IOU_REQUEST, ROUTES.IOU_SEND, ROUTES.IOU_BILL]; From 54d6caf3c8f8b13b4ea4bf7323458a7344f9a2c7 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Wed, 16 Mar 2022 16:36:08 -0600 Subject: [PATCH 10/10] fix lint --- 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 e9d11d610f7e..655ef2421e29 100644 --- a/src/components/WalletStatementModal/index.js +++ b/src/components/WalletStatementModal/index.js @@ -27,7 +27,7 @@ class WalletStatementModal extends React.Component { * @param {MessageEvent} e */ navigate(e) { - if (!e.data || e.data.type !== 'STATEMENT_NAVIGATE' || !e.data.url ) { + if (!e.data || e.data.type !== 'STATEMENT_NAVIGATE' || !e.data.url) { return; } const iouRoutes = [ROUTES.IOU_REQUEST, ROUTES.IOU_SEND, ROUTES.IOU_BILL];