diff --git a/src/pages/wallet/WalletStatementPage.js b/src/pages/wallet/WalletStatementPage.js index 9b0828d1da57..cbd9b72e3299 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,67 +51,65 @@ 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(); } - } + // eslint-disable-next-line react-hooks/exhaustive-deps -- we want this effect to run only on mount + }, []); + + useEffect(() => { + moment.locale(props.preferredLocale); + }, [props.preferredLocale]); - 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); + }; + + 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; WalletStatementPage.defaultProps = defaultProps; +WalletStatementPage.displayName = 'WalletStatementPage'; export default compose( withLocalize,