From bc060f29512077fc96d665cb373d9a414733cb76 Mon Sep 17 00:00:00 2001 From: s-alves10 Date: Tue, 4 Jul 2023 00:21:30 -0500 Subject: [PATCH 1/4] refactor: WalletStatementPage to function component --- src/pages/wallet/WalletStatementPage.js | 79 +++++++++++-------------- 1 file changed, 36 insertions(+), 43 deletions(-) diff --git a/src/pages/wallet/WalletStatementPage.js b/src/pages/wallet/WalletStatementPage.js index 9b0828d1da57..4830b755b552 100644 --- a/src/pages/wallet/WalletStatementPage.js +++ b/src/pages/wallet/WalletStatementPage.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, {useEffect} from 'react'; import PropTypes from 'prop-types'; import lodashGet from 'lodash/get'; import {withOnyx} from 'react-native-onyx'; @@ -51,63 +51,56 @@ const defaultProps = { preferredLocale: CONST.LOCALES.DEFAULT, }; -class WalletStatementPage extends React.Component { - constructor(props) { - super(props); +function WalletStatementPage(props) { + const yearMonth = lodashGet(props.route.params, 'yearMonth', null); - this.processDownload = this.processDownload.bind(this); - this.yearMonth = lodashGet(this.props.route.params, 'yearMonth', null); - } - - componentDidMount() { + useEffect(() => { const currentYearMonth = moment().format('YYYYMM'); - if (!this.yearMonth || this.yearMonth.length !== 6 || this.yearMonth > currentYearMonth) { + if (!yearMonth || yearMonth.length !== 6 || yearMonth > currentYearMonth) { Navigation.dismissModal(); } - } + }, [yearMonth]); - processDownload(yearMonth) { - if (this.props.walletStatement.isGenerating) { + const processDownload = () => { + if (props.walletStatement.isGenerating) { return; } - if (this.props.walletStatement[yearMonth]) { + if (props.walletStatement[yearMonth]) { // We already have a file URL for this statement, so we can download it immediately const downloadFileName = `Expensify_Statement_${yearMonth}.pdf`; - const fileName = this.props.walletStatement[yearMonth]; + const fileName = props.walletStatement[yearMonth]; const pdfURL = `${CONFIG.EXPENSIFY.EXPENSIFY_URL}secure?secureType=pdfreport&filename=${fileName}&downloadName=${downloadFileName}`; fileDownload(pdfURL, downloadFileName); return; } - Growl.show(this.props.translate('statementPage.generatingPDF'), CONST.GROWL.SUCCESS, 3000); - User.generateStatementPDF(this.yearMonth); - } - - render() { - moment.locale(this.props.preferredLocale); - const year = this.yearMonth.substring(0, 4) || moment().year(); - const month = this.yearMonth.substring(4) || moment().month(); - const monthName = moment(month, 'M').format('MMMM'); - const title = `${monthName} ${year} statement`; - const url = `${CONFIG.EXPENSIFY.EXPENSIFY_URL}statement.php?period=${this.yearMonth}`; - - return ( - - this.processDownload(this.yearMonth)} - /> - - - - - ); - } + Growl.show(props.translate('statementPage.generatingPDF'), CONST.GROWL.SUCCESS, 3000); + User.generateStatementPDF(yearMonth); + }; + + moment.locale(props.preferredLocale); + const year = yearMonth.substring(0, 4) || moment().year(); + const month = yearMonth.substring(4) || moment().month(); + const monthName = moment(month, 'M').format('MMMM'); + const title = `${monthName} ${year} statement`; + const url = `${CONFIG.EXPENSIFY.EXPENSIFY_URL}statement.php?period=${yearMonth}`; + + return ( + + + + + + + ); } WalletStatementPage.propTypes = propTypes; From 5bbfb7c4d460316ed7f0740abb81a149ba9b9f92 Mon Sep 17 00:00:00 2001 From: s-alves10 Date: Wed, 5 Jul 2023 14:24:41 -0500 Subject: [PATCH 2/4] fix: add displayname, set locale in use-effect --- src/pages/wallet/WalletStatementPage.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/pages/wallet/WalletStatementPage.js b/src/pages/wallet/WalletStatementPage.js index 4830b755b552..76e6c8d9697f 100644 --- a/src/pages/wallet/WalletStatementPage.js +++ b/src/pages/wallet/WalletStatementPage.js @@ -61,6 +61,10 @@ function WalletStatementPage(props) { } }, [yearMonth]); + useEffect(() => { + moment.locale(props.preferredLocale); + }, [props.preferredLocale]) + const processDownload = () => { if (props.walletStatement.isGenerating) { return; @@ -79,7 +83,6 @@ function WalletStatementPage(props) { User.generateStatementPDF(yearMonth); }; - moment.locale(props.preferredLocale); const year = yearMonth.substring(0, 4) || moment().year(); const month = yearMonth.substring(4) || moment().month(); const monthName = moment(month, 'M').format('MMMM'); @@ -105,6 +108,7 @@ function WalletStatementPage(props) { WalletStatementPage.propTypes = propTypes; WalletStatementPage.defaultProps = defaultProps; +WalletStatementPage.displayName = 'WalletStatementPage'; export default compose( withLocalize, From 19b75ab5503eaa94fd9360e5b5539ed66d9b8083 Mon Sep 17 00:00:00 2001 From: s-alves10 Date: Wed, 5 Jul 2023 14:29:14 -0500 Subject: [PATCH 3/4] fix: prettier issue --- src/pages/wallet/WalletStatementPage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/wallet/WalletStatementPage.js b/src/pages/wallet/WalletStatementPage.js index 76e6c8d9697f..a9a852f0fa01 100644 --- a/src/pages/wallet/WalletStatementPage.js +++ b/src/pages/wallet/WalletStatementPage.js @@ -63,7 +63,7 @@ function WalletStatementPage(props) { useEffect(() => { moment.locale(props.preferredLocale); - }, [props.preferredLocale]) + }, [props.preferredLocale]); const processDownload = () => { if (props.walletStatement.isGenerating) { From 79d84f8528d10e4ea3d4ce47b92725bebe149416 Mon Sep 17 00:00:00 2001 From: s-alves10 Date: Fri, 21 Jul 2023 15:52:52 -0500 Subject: [PATCH 4/4] fix: remove dependency for run on mount --- src/pages/wallet/WalletStatementPage.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/pages/wallet/WalletStatementPage.js b/src/pages/wallet/WalletStatementPage.js index a9a852f0fa01..cbd9b72e3299 100644 --- a/src/pages/wallet/WalletStatementPage.js +++ b/src/pages/wallet/WalletStatementPage.js @@ -59,7 +59,8 @@ function WalletStatementPage(props) { if (!yearMonth || yearMonth.length !== 6 || yearMonth > currentYearMonth) { Navigation.dismissModal(); } - }, [yearMonth]); + // eslint-disable-next-line react-hooks/exhaustive-deps -- we want this effect to run only on mount + }, []); useEffect(() => { moment.locale(props.preferredLocale);