From 8728cf37e9c24adc6b0ec45c3e78729083509d0a Mon Sep 17 00:00:00 2001 From: Viktoryia Kliushun Date: Tue, 21 Nov 2023 17:11:50 +0100 Subject: [PATCH 1/3] [TS migration] Migrate 'ArchivedReportFooter.js' component --- src/components/ArchivedReportFooter.js | 105 ------------------------ src/components/ArchivedReportFooter.tsx | 81 ++++++++++++++++++ src/types/onyx/OriginalMessage.ts | 2 + 3 files changed, 83 insertions(+), 105 deletions(-) delete mode 100644 src/components/ArchivedReportFooter.js create mode 100644 src/components/ArchivedReportFooter.tsx diff --git a/src/components/ArchivedReportFooter.js b/src/components/ArchivedReportFooter.js deleted file mode 100644 index b1fac827d273..000000000000 --- a/src/components/ArchivedReportFooter.js +++ /dev/null @@ -1,105 +0,0 @@ -import _ from 'lodash'; -import lodashGet from 'lodash/get'; -import PropTypes from 'prop-types'; -import React from 'react'; -import {withOnyx} from 'react-native-onyx'; -import compose from '@libs/compose'; -import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; -import * as ReportActionsUtils from '@libs/ReportActionsUtils'; -import * as ReportUtils from '@libs/ReportUtils'; -import personalDetailsPropType from '@pages/personalDetailsPropType'; -import reportPropTypes from '@pages/reportPropTypes'; -import useThemeStyles from '@styles/useThemeStyles'; -import CONST from '@src/CONST'; -import ONYXKEYS from '@src/ONYXKEYS'; -import Banner from './Banner'; -import withLocalize, {withLocalizePropTypes} from './withLocalize'; - -const propTypes = { - /** The reason this report was archived */ - reportClosedAction: PropTypes.shape({ - /** Message attached to the report closed action */ - originalMessage: PropTypes.shape({ - /** The reason the report was closed */ - reason: PropTypes.string.isRequired, - - /** (For accountMerged reason only), the accountID of the previous owner of this report. */ - oldAccountID: PropTypes.number, - - /** (For accountMerged reason only), the accountID of the account the previous owner was merged into */ - newAccountID: PropTypes.number, - }).isRequired, - }), - - /** The archived report */ - report: reportPropTypes.isRequired, - - /** Personal details of all users */ - personalDetails: PropTypes.objectOf(personalDetailsPropType), - - ...withLocalizePropTypes, -}; - -const defaultProps = { - reportClosedAction: { - originalMessage: { - reason: CONST.REPORT.ARCHIVE_REASON.DEFAULT, - }, - }, - personalDetails: {}, -}; - -function ArchivedReportFooter(props) { - const styles = useThemeStyles(); - const archiveReason = lodashGet(props.reportClosedAction, 'originalMessage.reason', CONST.REPORT.ARCHIVE_REASON.DEFAULT); - let displayName = PersonalDetailsUtils.getDisplayNameOrDefault(props.personalDetails, [props.report.ownerAccountID, 'displayName']); - - let oldDisplayName; - if (archiveReason === CONST.REPORT.ARCHIVE_REASON.ACCOUNT_MERGED) { - const newAccountID = props.reportClosedAction.originalMessage.newAccountID; - const oldAccountID = props.reportClosedAction.originalMessage.oldAccountID; - displayName = PersonalDetailsUtils.getDisplayNameOrDefault(props.personalDetails, [newAccountID, 'displayName']); - oldDisplayName = PersonalDetailsUtils.getDisplayNameOrDefault(props.personalDetails, [oldAccountID, 'displayName']); - } - - const shouldRenderHTML = archiveReason !== CONST.REPORT.ARCHIVE_REASON.DEFAULT; - - let policyName = ReportUtils.getPolicyName(props.report); - - if (shouldRenderHTML) { - oldDisplayName = _.escape(oldDisplayName); - displayName = _.escape(displayName); - policyName = _.escape(policyName); - } - - return ( - ${displayName}`, - oldDisplayName: `${oldDisplayName}`, - policyName: `${policyName}`, - })} - shouldRenderHTML={shouldRenderHTML} - shouldShowIcon - /> - ); -} - -ArchivedReportFooter.propTypes = propTypes; -ArchivedReportFooter.defaultProps = defaultProps; -ArchivedReportFooter.displayName = 'ArchivedReportFooter'; - -export default compose( - withLocalize, - withOnyx({ - personalDetails: { - key: ONYXKEYS.PERSONAL_DETAILS_LIST, - }, - reportClosedAction: { - key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report.reportID}`, - canEvict: false, - selector: ReportActionsUtils.getLastClosedReportAction, - }, - }), -)(ArchivedReportFooter); diff --git a/src/components/ArchivedReportFooter.tsx b/src/components/ArchivedReportFooter.tsx new file mode 100644 index 000000000000..e8551fdbbf83 --- /dev/null +++ b/src/components/ArchivedReportFooter.tsx @@ -0,0 +1,81 @@ +import lodashEscape from 'lodash/escape'; +import React from 'react'; +import {OnyxEntry, withOnyx} from 'react-native-onyx'; +import useLocalize from '@hooks/useLocalize'; +import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; +import * as ReportActionsUtils from '@libs/ReportActionsUtils'; +import * as ReportUtils from '@libs/ReportUtils'; +import useThemeStyles from '@styles/useThemeStyles'; +import CONST from '@src/CONST'; +import ONYXKEYS from '@src/ONYXKEYS'; +import type {PersonalDetails, Report, ReportAction} from '@src/types/onyx'; +import Banner from './Banner'; + +type ArchivedReportFooterOnyxProps = { + /** The reason this report was archived */ + reportClosedAction: OnyxEntry; + + /** Personal details of all users */ + personalDetails: OnyxEntry>; +}; + +type ArchivedReportFooterProps = ArchivedReportFooterOnyxProps & { + /** The archived report */ + report: Report; +}; + +function ArchivedReportFooter({report, reportClosedAction = null, personalDetails = {}}: ArchivedReportFooterProps) { + const styles = useThemeStyles(); + const {translate} = useLocalize(); + const originalMessage = reportClosedAction?.actionName === CONST.REPORT.ACTIONS.TYPE.CLOSED ? reportClosedAction.originalMessage : null; + const archiveReason = originalMessage?.reason ?? CONST.REPORT.ARCHIVE_REASON.DEFAULT; + let displayName = PersonalDetailsUtils.getDisplayNameOrDefault(personalDetails, [report.ownerAccountID, 'displayName']); + + let oldDisplayName; + if (archiveReason === CONST.REPORT.ARCHIVE_REASON.ACCOUNT_MERGED) { + const newAccountID = originalMessage?.newAccountID; + const oldAccountID = originalMessage?.oldAccountID; + displayName = PersonalDetailsUtils.getDisplayNameOrDefault(personalDetails, [newAccountID, 'displayName']); + oldDisplayName = PersonalDetailsUtils.getDisplayNameOrDefault(personalDetails, [oldAccountID, 'displayName']); + } + + const shouldRenderHTML = archiveReason !== CONST.REPORT.ARCHIVE_REASON.DEFAULT; + + let policyName = ReportUtils.getPolicyName(report); + + if (shouldRenderHTML) { + oldDisplayName = lodashEscape(oldDisplayName); + displayName = lodashEscape(displayName); + policyName = lodashEscape(policyName); + } + + const text = shouldRenderHTML + ? translate(`reportArchiveReasons.${archiveReason}`, { + displayName: `${displayName}`, + oldDisplayName: `${oldDisplayName}`, + policyName: `${policyName}`, + }) + : translate(`reportArchiveReasons.${archiveReason}`); + + return ( + + ); +} + +ArchivedReportFooter.displayName = 'ArchivedReportFooter'; + +export default withOnyx({ + personalDetails: { + key: ONYXKEYS.PERSONAL_DETAILS_LIST, + }, + reportClosedAction: { + key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report.reportID}`, + canEvict: false, + selector: ReportActionsUtils.getLastClosedReportAction, + }, +})(ArchivedReportFooter); diff --git a/src/types/onyx/OriginalMessage.ts b/src/types/onyx/OriginalMessage.ts index b5e4b25a6508..ce7f79320835 100644 --- a/src/types/onyx/OriginalMessage.ts +++ b/src/types/onyx/OriginalMessage.ts @@ -93,6 +93,8 @@ type OriginalMessageClosed = { policyName: string; reason: ValueOf; lastModified?: string; + newAccountID?: number; + oldAccountID?: number; }; }; From 92e457ad7c32e8dda556e156dbf0146f7873cb32 Mon Sep 17 00:00:00 2001 From: Viktoryia Kliushun Date: Wed, 22 Nov 2023 11:45:14 +0100 Subject: [PATCH 2/3] Minor code improvement --- src/components/ArchivedReportFooter.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/ArchivedReportFooter.tsx b/src/components/ArchivedReportFooter.tsx index e8551fdbbf83..f351e7f9a749 100644 --- a/src/components/ArchivedReportFooter.tsx +++ b/src/components/ArchivedReportFooter.tsx @@ -27,6 +27,7 @@ type ArchivedReportFooterProps = ArchivedReportFooterOnyxProps & { function ArchivedReportFooter({report, reportClosedAction = null, personalDetails = {}}: ArchivedReportFooterProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); + const originalMessage = reportClosedAction?.actionName === CONST.REPORT.ACTIONS.TYPE.CLOSED ? reportClosedAction.originalMessage : null; const archiveReason = originalMessage?.reason ?? CONST.REPORT.ARCHIVE_REASON.DEFAULT; let displayName = PersonalDetailsUtils.getDisplayNameOrDefault(personalDetails, [report.ownerAccountID, 'displayName']); From eb19a2f4a537179206336622375b6a5dfa75e756 Mon Sep 17 00:00:00 2001 From: Viktoryia Kliushun Date: Fri, 24 Nov 2023 17:01:50 +0100 Subject: [PATCH 3/3] Add missed type --- src/components/ArchivedReportFooter.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/ArchivedReportFooter.tsx b/src/components/ArchivedReportFooter.tsx index f351e7f9a749..3187bf3604e8 100644 --- a/src/components/ArchivedReportFooter.tsx +++ b/src/components/ArchivedReportFooter.tsx @@ -24,7 +24,7 @@ type ArchivedReportFooterProps = ArchivedReportFooterOnyxProps & { report: Report; }; -function ArchivedReportFooter({report, reportClosedAction = null, personalDetails = {}}: ArchivedReportFooterProps) { +function ArchivedReportFooter({report, reportClosedAction, personalDetails = {}}: ArchivedReportFooterProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); @@ -32,7 +32,7 @@ function ArchivedReportFooter({report, reportClosedAction = null, personalDetail const archiveReason = originalMessage?.reason ?? CONST.REPORT.ARCHIVE_REASON.DEFAULT; let displayName = PersonalDetailsUtils.getDisplayNameOrDefault(personalDetails, [report.ownerAccountID, 'displayName']); - let oldDisplayName; + let oldDisplayName: string | undefined; if (archiveReason === CONST.REPORT.ARCHIVE_REASON.ACCOUNT_MERGED) { const newAccountID = originalMessage?.newAccountID; const oldAccountID = originalMessage?.oldAccountID;