From aeb95dd2b253b2e743e7b14e66d0c0a401934f18 Mon Sep 17 00:00:00 2001 From: bartektomczyk Date: Thu, 21 Sep 2023 13:49:37 +0200 Subject: [PATCH 1/5] reafctor: migrated WalletStatementModal to function component --- .../WalletStatementModal/index.native.js | 101 +++++++++--------- 1 file changed, 49 insertions(+), 52 deletions(-) diff --git a/src/components/WalletStatementModal/index.native.js b/src/components/WalletStatementModal/index.native.js index 590431274da5..85fefb474145 100644 --- a/src/components/WalletStatementModal/index.native.js +++ b/src/components/WalletStatementModal/index.native.js @@ -1,24 +1,22 @@ -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 {useNavigation} from '@react-navigation/native'; 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'; -class WalletStatementModal extends React.Component { - constructor(props) { - super(props); +const IOU_ROUTES = [ROUTES.IOU_REQUEST, ROUTES.IOU_SEND]; +const renderLoading = () => ; - 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); + const {navigate} = useNavigation(); /** * Handles in-app navigation for webview links @@ -26,54 +24,53 @@ class WalletStatementModal extends React.Component { * @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 !== 'STATEMENT_NAVIGATE' && type !== 'CONCIERGE_NAVIGATE')) { + return; + } + + if (type === 'CONCIERGE_NAVIGATE') { + webViewRef.current.stopLoading(); + Report.navigateToConciergeChat(); + } - if (type === 'CONCIERGE_NAVIGATE') { - this.webview.stopLoading(); - Report.navigateToConciergeChat(); - } + if (type === 'STATEMENT_NAVIGATE' && url) { + const iouRoute = _.find(IOU_ROUTES, (item) => url.includes(item)); - 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 (iouRoute) { + webViewRef.current.stopLoading(); + navigate(iouRoute); + } } - } - } + }, + [webViewRef, navigate], + ); - render() { - return ( - (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={() => } - onNavigationStateChange={this.navigate} - /> - ); - } + return ( + + ); } +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); From f01d1bee6e92a754ee8f5cec2027ba4b8c366d33 Mon Sep 17 00:00:00 2001 From: bartektomczyk Date: Fri, 22 Sep 2023 07:43:52 +0200 Subject: [PATCH 2/5] refactor: used Navigation instance instead of hook --- src/components/WalletStatementModal/index.native.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/WalletStatementModal/index.native.js b/src/components/WalletStatementModal/index.native.js index 85fefb474145..c050a7ba6557 100644 --- a/src/components/WalletStatementModal/index.native.js +++ b/src/components/WalletStatementModal/index.native.js @@ -3,12 +3,13 @@ import {WebView} from 'react-native-webview'; import lodashGet from 'lodash/get'; import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; -import {useNavigation} from '@react-navigation/native'; -import ONYXKEYS from '../../ONYXKEYS'; + 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'; const IOU_ROUTES = [ROUTES.IOU_REQUEST, ROUTES.IOU_SEND]; const renderLoading = () => ; @@ -16,7 +17,6 @@ const renderLoading = () => ; function WalletStatementModal({statementPageURL, session}) { const webViewRef = useRef(); const authToken = lodashGet(session, 'authToken', null); - const {navigate} = useNavigation(); /** * Handles in-app navigation for webview links @@ -40,11 +40,11 @@ function WalletStatementModal({statementPageURL, session}) { if (iouRoute) { webViewRef.current.stopLoading(); - navigate(iouRoute); + Navigation.navigate(iouRoute); } } }, - [webViewRef, navigate], + [webViewRef], ); return ( From 54e0f2099d97e658503b7b75376d55752d43a3aa Mon Sep 17 00:00:00 2001 From: bartektomczyk Date: Fri, 22 Sep 2023 08:02:22 +0200 Subject: [PATCH 3/5] refactor: added message type to the const object --- src/CONST.ts | 4 ++++ src/components/WalletStatementModal/index.js | 5 +++-- src/components/WalletStatementModal/index.native.js | 5 +++-- 3 files changed, 10 insertions(+), 4 deletions(-) diff --git a/src/CONST.ts b/src/CONST.ts index c6ae9cc5928d..8b29e0273071 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -982,6 +982,10 @@ const CONST = { GOLD: 'GOLD', SILVER: 'SILVER', }, + STATEMENT_WEB_MESSAGE_TYPE: { + STATEMENT: 'STATEMENT_NAVIGATE', + CONCIERGE: 'CONCIERGE_NAVIGATE', + }, }, PLAID: { diff --git a/src/components/WalletStatementModal/index.js b/src/components/WalletStatementModal/index.js index 84109217b18f..119d77d008b9 100644 --- a/src/components/WalletStatementModal/index.js +++ b/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); @@ -27,11 +28,11 @@ function WalletStatementModal({statementPageURL, session}) { return; } - if (event.data.type === 'CONCIERGE_NAVIGATE') { + if (event.data.type === CONST.WALLET.STATEMENT_WEB_MESSAGE_TYPE.CONCIERGE) { Report.navigateToConciergeChat(); } - if (event.data.type === 'STATEMENT_NAVIGATE' && event.data.url) { + if (event.data.type === CONST.WALLET.STATEMENT_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) { diff --git a/src/components/WalletStatementModal/index.native.js b/src/components/WalletStatementModal/index.native.js index c050a7ba6557..01ef7905f368 100644 --- a/src/components/WalletStatementModal/index.native.js +++ b/src/components/WalletStatementModal/index.native.js @@ -10,6 +10,7 @@ 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'; const IOU_ROUTES = [ROUTES.IOU_REQUEST, ROUTES.IOU_SEND]; const renderLoading = () => ; @@ -30,12 +31,12 @@ function WalletStatementModal({statementPageURL, session}) { return; } - if (type === 'CONCIERGE_NAVIGATE') { + if (type === CONST.WALLET.STATEMENT_WEB_MESSAGE_TYPE.CONCIERGE) { webViewRef.current.stopLoading(); Report.navigateToConciergeChat(); } - if (type === 'STATEMENT_NAVIGATE' && url) { + if (type === CONST.WALLET.STATEMENT_WEB_MESSAGE_TYPE.STATEMENT && url) { const iouRoute = _.find(IOU_ROUTES, (item) => url.includes(item)); if (iouRoute) { From 47a5d08816ad73e9d1bfb515d968a5bc844678e7 Mon Sep 17 00:00:00 2001 From: bartektomczyk Date: Fri, 22 Sep 2023 14:07:47 +0200 Subject: [PATCH 4/5] refactor: changed conts variable name --- src/CONST.ts | 2 +- src/components/WalletStatementModal/index.js | 6 +++--- src/components/WalletStatementModal/index.native.js | 6 +++--- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/CONST.ts b/src/CONST.ts index 8b29e0273071..c7b49c36ab7e 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -982,7 +982,7 @@ const CONST = { GOLD: 'GOLD', SILVER: 'SILVER', }, - STATEMENT_WEB_MESSAGE_TYPE: { + WEB_MESSAGE_TYPE: { STATEMENT: 'STATEMENT_NAVIGATE', CONCIERGE: 'CONCIERGE_NAVIGATE', }, diff --git a/src/components/WalletStatementModal/index.js b/src/components/WalletStatementModal/index.js index 119d77d008b9..b4d87bf4e0e4 100644 --- a/src/components/WalletStatementModal/index.js +++ b/src/components/WalletStatementModal/index.js @@ -24,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 === CONST.WALLET.STATEMENT_WEB_MESSAGE_TYPE.CONCIERGE) { + if (event.data.type === CONST.WALLET.WEB_MESSAGE_TYPE.CONCIERGE) { Report.navigateToConciergeChat(); } - if (event.data.type === CONST.WALLET.STATEMENT_WEB_MESSAGE_TYPE.STATEMENT && 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) { diff --git a/src/components/WalletStatementModal/index.native.js b/src/components/WalletStatementModal/index.native.js index 01ef7905f368..b1e190781890 100644 --- a/src/components/WalletStatementModal/index.native.js +++ b/src/components/WalletStatementModal/index.native.js @@ -27,16 +27,16 @@ function WalletStatementModal({statementPageURL, session}) { */ const handleNavigationStateChange = useCallback( ({type, url}) => { - if (!webViewRef.current || (type !== 'STATEMENT_NAVIGATE' && type !== 'CONCIERGE_NAVIGATE')) { + if (!webViewRef.current || (type !== CONST.WALLET.WEB_MESSAGE_TYPE.STATEMENT && type !== CONST.WALLET.WEB_MESSAGE_TYPE.CONCIERGE)) { return; } - if (type === CONST.WALLET.STATEMENT_WEB_MESSAGE_TYPE.CONCIERGE) { + if (type === CONST.WALLET.WEB_MESSAGE_TYPE.CONCIERGE) { webViewRef.current.stopLoading(); Report.navigateToConciergeChat(); } - if (type === CONST.WALLET.STATEMENT_WEB_MESSAGE_TYPE.STATEMENT && url) { + if (type === CONST.WALLET.WEB_MESSAGE_TYPE.STATEMENT && url) { const iouRoute = _.find(IOU_ROUTES, (item) => url.includes(item)); if (iouRoute) { From 378247dd34473904f2619690a610c96a9b09a577 Mon Sep 17 00:00:00 2001 From: bartektomczyk Date: Mon, 25 Sep 2023 13:01:37 +0200 Subject: [PATCH 5/5] refactor: remove not needed empty line --- src/components/WalletStatementModal/index.native.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/WalletStatementModal/index.native.js b/src/components/WalletStatementModal/index.native.js index b1e190781890..38d1f90af00d 100644 --- a/src/components/WalletStatementModal/index.native.js +++ b/src/components/WalletStatementModal/index.native.js @@ -3,7 +3,6 @@ import {WebView} from 'react-native-webview'; import lodashGet from 'lodash/get'; import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; - import {walletStatementPropTypes, walletStatementDefaultProps} from './WalletStatementModalPropTypes'; import FullScreenLoadingIndicator from '../FullscreenLoadingIndicator'; import * as Report from '../../libs/actions/Report';