From 3f5675ed187203855a257a88f8f87ff92c0aefce Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Tue, 19 Dec 2023 01:29:19 +0530 Subject: [PATCH 01/10] Replace HOC with hook We replace the withWindowDimensions HOC with useWindowDimensions hook. --- src/components/ReportActionItem/MoneyReportView.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/components/ReportActionItem/MoneyReportView.js b/src/components/ReportActionItem/MoneyReportView.js index c12659e94673..98ab5168763b 100644 --- a/src/components/ReportActionItem/MoneyReportView.js +++ b/src/components/ReportActionItem/MoneyReportView.js @@ -5,7 +5,7 @@ import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; import SpacerView from '@components/SpacerView'; import Text from '@components/Text'; -import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions'; +import useWindowDimensions from '@hooks/useWindowDimensions'; import useLocalize from '@hooks/useLocalize'; import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; @@ -22,8 +22,6 @@ const propTypes = { /** Whether we should display the horizontal rule below the component */ shouldShowHorizontalRule: PropTypes.bool.isRequired, - - ...windowDimensionsPropTypes, }; function MoneyReportView(props) { @@ -31,6 +29,7 @@ function MoneyReportView(props) { const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); const {translate} = useLocalize(); + const {isSmallScreenWidth} = useWindowDimensions(); const isSettled = ReportUtils.isSettled(props.report.reportID); const {totalDisplaySpend, nonReimbursableSpend, reimbursableSpend} = ReportUtils.getMoneyRequestSpendBreakdown(props.report); @@ -43,9 +42,9 @@ function MoneyReportView(props) { const subAmountTextStyles = [styles.taskTitleMenuItem, styles.alignSelfCenter, StyleUtils.getFontSizeStyle(variables.fontSizeh1), StyleUtils.getColorStyle(theme.textSupporting)]; return ( - + - + Date: Tue, 19 Dec 2023 02:13:41 +0530 Subject: [PATCH 02/10] Migrate component to TypeScript --- ...MoneyReportView.js => MoneyReportView.tsx} | 27 +++++++++---------- 1 file changed, 13 insertions(+), 14 deletions(-) rename src/components/ReportActionItem/{MoneyReportView.js => MoneyReportView.tsx} (87%) diff --git a/src/components/ReportActionItem/MoneyReportView.js b/src/components/ReportActionItem/MoneyReportView.tsx similarity index 87% rename from src/components/ReportActionItem/MoneyReportView.js rename to src/components/ReportActionItem/MoneyReportView.tsx index 98ab5168763b..1843a4d56601 100644 --- a/src/components/ReportActionItem/MoneyReportView.js +++ b/src/components/ReportActionItem/MoneyReportView.tsx @@ -1,4 +1,3 @@ -import PropTypes from 'prop-types'; import React from 'react'; import {View} from 'react-native'; import Icon from '@components/Icon'; @@ -13,31 +12,32 @@ import useThemeStyles from '@hooks/useThemeStyles'; import * as CurrencyUtils from '@libs/CurrencyUtils'; import * as ReportUtils from '@libs/ReportUtils'; import AnimatedEmptyStateBackground from '@pages/home/report/AnimatedEmptyStateBackground'; -import reportPropTypes from '@pages/reportPropTypes'; +import type {Report} from '@src/types/onyx'; import variables from '@styles/variables'; -const propTypes = { +type MoneyReportViewProps = { /** The report currently being looked at */ - report: reportPropTypes.isRequired, + report: Report, /** Whether we should display the horizontal rule below the component */ - shouldShowHorizontalRule: PropTypes.bool.isRequired, + shouldShowHorizontalRule: boolean, + }; -function MoneyReportView(props) { +function MoneyReportView({report, shouldShowHorizontalRule}: MoneyReportViewProps) { const theme = useTheme(); const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); const {translate} = useLocalize(); const {isSmallScreenWidth} = useWindowDimensions(); - const isSettled = ReportUtils.isSettled(props.report.reportID); + const isSettled = ReportUtils.isSettled(report.reportID); - const {totalDisplaySpend, nonReimbursableSpend, reimbursableSpend} = ReportUtils.getMoneyRequestSpendBreakdown(props.report); + const {totalDisplaySpend, nonReimbursableSpend, reimbursableSpend} = ReportUtils.getMoneyRequestSpendBreakdown(report); const shouldShowBreakdown = nonReimbursableSpend && reimbursableSpend; - const formattedTotalAmount = CurrencyUtils.convertToDisplayString(totalDisplaySpend, props.report.currency, ReportUtils.hasOnlyDistanceRequestTransactions(props.report.reportID)); - const formattedOutOfPocketAmount = CurrencyUtils.convertToDisplayString(reimbursableSpend, props.report.currency); - const formattedCompanySpendAmount = CurrencyUtils.convertToDisplayString(nonReimbursableSpend, props.report.currency); + const formattedTotalAmount = CurrencyUtils.convertToDisplayString(totalDisplaySpend, report.currency, ReportUtils.hasOnlyDistanceRequestTransactions(report.reportID)); + const formattedOutOfPocketAmount = CurrencyUtils.convertToDisplayString(reimbursableSpend, report.currency); + const formattedCompanySpendAmount = CurrencyUtils.convertToDisplayString(nonReimbursableSpend, report.currency); const subAmountTextStyles = [styles.taskTitleMenuItem, styles.alignSelfCenter, StyleUtils.getFontSizeStyle(variables.fontSizeh1), StyleUtils.getColorStyle(theme.textSupporting)]; @@ -112,15 +112,14 @@ function MoneyReportView(props) { ) : undefined} ); } -MoneyReportView.propTypes = propTypes; MoneyReportView.displayName = 'MoneyReportView'; export default MoneyReportView; From 458e5742b6a64b91c598c7abafbdf35d88316e8b Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Tue, 19 Dec 2023 03:26:11 +0530 Subject: [PATCH 03/10] Run prettier --- src/components/ReportActionItem/MoneyReportView.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/components/ReportActionItem/MoneyReportView.tsx b/src/components/ReportActionItem/MoneyReportView.tsx index 1843a4d56601..91fc1a66fc4c 100644 --- a/src/components/ReportActionItem/MoneyReportView.tsx +++ b/src/components/ReportActionItem/MoneyReportView.tsx @@ -4,24 +4,23 @@ import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; import SpacerView from '@components/SpacerView'; import Text from '@components/Text'; -import useWindowDimensions from '@hooks/useWindowDimensions'; import useLocalize from '@hooks/useLocalize'; import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; +import useWindowDimensions from '@hooks/useWindowDimensions'; import * as CurrencyUtils from '@libs/CurrencyUtils'; import * as ReportUtils from '@libs/ReportUtils'; import AnimatedEmptyStateBackground from '@pages/home/report/AnimatedEmptyStateBackground'; -import type {Report} from '@src/types/onyx'; import variables from '@styles/variables'; +import type {Report} from '@src/types/onyx'; type MoneyReportViewProps = { /** The report currently being looked at */ - report: Report, + report: Report; /** Whether we should display the horizontal rule below the component */ - shouldShowHorizontalRule: boolean, - + shouldShowHorizontalRule: boolean; }; function MoneyReportView({report, shouldShowHorizontalRule}: MoneyReportViewProps) { From 158558fa19a8525a33d3aa2939eca9aa8bbad431 Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi <64629613+neonbhai@users.noreply.github.com> Date: Tue, 19 Dec 2023 18:13:21 +0530 Subject: [PATCH 04/10] Add Type to subAmountTextStyles MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Błażej Kustra <46095609+blazejkustra@users.noreply.github.com> --- src/components/ReportActionItem/MoneyReportView.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/ReportActionItem/MoneyReportView.tsx b/src/components/ReportActionItem/MoneyReportView.tsx index 91fc1a66fc4c..2d1a90b7242d 100644 --- a/src/components/ReportActionItem/MoneyReportView.tsx +++ b/src/components/ReportActionItem/MoneyReportView.tsx @@ -38,7 +38,12 @@ function MoneyReportView({report, shouldShowHorizontalRule}: MoneyReportViewProp const formattedOutOfPocketAmount = CurrencyUtils.convertToDisplayString(reimbursableSpend, report.currency); const formattedCompanySpendAmount = CurrencyUtils.convertToDisplayString(nonReimbursableSpend, report.currency); - const subAmountTextStyles = [styles.taskTitleMenuItem, styles.alignSelfCenter, StyleUtils.getFontSizeStyle(variables.fontSizeh1), StyleUtils.getColorStyle(theme.textSupporting)]; + const subAmountTextStyles: StyleProp = [ + styles.taskTitleMenuItem, + styles.alignSelfCenter, + StyleUtils.getFontSizeStyle(variables.fontSizeh1), + StyleUtils.getColorStyle(theme.textSupporting), + ]; return ( From 87c04edfe6d0c169a7cb2504a9371571d5e5e3ed Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi <64629613+neonbhai@users.noreply.github.com> Date: Tue, 19 Dec 2023 18:18:47 +0530 Subject: [PATCH 05/10] Update style calculation logic MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Błażej Kustra <46095609+blazejkustra@users.noreply.github.com> --- src/components/ReportActionItem/MoneyReportView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ReportActionItem/MoneyReportView.tsx b/src/components/ReportActionItem/MoneyReportView.tsx index 2d1a90b7242d..faaa8dab5909 100644 --- a/src/components/ReportActionItem/MoneyReportView.tsx +++ b/src/components/ReportActionItem/MoneyReportView.tsx @@ -117,7 +117,7 @@ function MoneyReportView({report, shouldShowHorizontalRule}: MoneyReportViewProp ) : undefined} From 23c9ad06abe93feef070a000820bfbe2b3f4ad83 Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Tue, 19 Dec 2023 18:43:59 +0530 Subject: [PATCH 06/10] Add imports for StyleProp, TextStyle --- src/components/ReportActionItem/MoneyReportView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ReportActionItem/MoneyReportView.tsx b/src/components/ReportActionItem/MoneyReportView.tsx index faaa8dab5909..2304ead51b28 100644 --- a/src/components/ReportActionItem/MoneyReportView.tsx +++ b/src/components/ReportActionItem/MoneyReportView.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import {View} from 'react-native'; +import {View, StyleProp, TextStyle} from 'react-native'; import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; import SpacerView from '@components/SpacerView'; From 5868142994edbecee6e88db89185f2736eb57303 Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Tue, 19 Dec 2023 18:57:08 +0530 Subject: [PATCH 07/10] Replace tertiary operator --- src/components/ReportActionItem/MoneyReportView.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/ReportActionItem/MoneyReportView.tsx b/src/components/ReportActionItem/MoneyReportView.tsx index 2304ead51b28..358353982596 100644 --- a/src/components/ReportActionItem/MoneyReportView.tsx +++ b/src/components/ReportActionItem/MoneyReportView.tsx @@ -75,7 +75,7 @@ function MoneyReportView({report, shouldShowHorizontalRule}: MoneyReportViewProp - {shouldShowBreakdown ? ( + {shouldShowBreakdown && ( <> @@ -114,7 +114,7 @@ function MoneyReportView({report, shouldShowHorizontalRule}: MoneyReportViewProp - ) : undefined} + )} Date: Tue, 19 Dec 2023 19:00:22 +0530 Subject: [PATCH 08/10] Update getColorStyle return types --- src/styles/utils/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index 6ac5a04817b0..a2abae312e69 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -906,7 +906,7 @@ function getMenuItemTextContainerStyle(isSmallAvatarSubscriptMenu: boolean): Vie /** * Returns color style */ -function getColorStyle(color: string): ViewStyle | CSSProperties { +function getColorStyle(color: string): TextStyle & ViewStyle { return {color}; } From 727a65036b27640930538975f1adb9f8b566f017 Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Tue, 19 Dec 2023 19:11:15 +0530 Subject: [PATCH 09/10] Run prettier --- src/components/ReportActionItem/MoneyReportView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ReportActionItem/MoneyReportView.tsx b/src/components/ReportActionItem/MoneyReportView.tsx index 358353982596..42bf77b0dab5 100644 --- a/src/components/ReportActionItem/MoneyReportView.tsx +++ b/src/components/ReportActionItem/MoneyReportView.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import {View, StyleProp, TextStyle} from 'react-native'; +import {StyleProp, TextStyle, View} from 'react-native'; import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; import SpacerView from '@components/SpacerView'; From fab511043b4c0ca7666f2f509f9d1512207847af Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Wed, 20 Dec 2023 22:21:00 +0530 Subject: [PATCH 10/10] Add stricter type for conditional rendering This converts shouldShowBreakdown to boolean when rendering conditionally --- src/components/ReportActionItem/MoneyReportView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ReportActionItem/MoneyReportView.tsx b/src/components/ReportActionItem/MoneyReportView.tsx index 42bf77b0dab5..36daa037fd78 100644 --- a/src/components/ReportActionItem/MoneyReportView.tsx +++ b/src/components/ReportActionItem/MoneyReportView.tsx @@ -75,7 +75,7 @@ function MoneyReportView({report, shouldShowHorizontalRule}: MoneyReportViewProp - {shouldShowBreakdown && ( + {Boolean(shouldShowBreakdown) && ( <>