From ba1431078b136a72a7aee7789fb160b2e5df24c9 Mon Sep 17 00:00:00 2001 From: Abhas Kumar Date: Wed, 5 Jul 2023 07:25:52 +0530 Subject: [PATCH 01/12] migrate class to function component --- .../reimburse/WorkspaceReimburseView.js | 247 +++++++++--------- 1 file changed, 125 insertions(+), 122 deletions(-) diff --git a/src/pages/workspace/reimburse/WorkspaceReimburseView.js b/src/pages/workspace/reimburse/WorkspaceReimburseView.js index 9005374826b3..d30bb45bdb31 100644 --- a/src/pages/workspace/reimburse/WorkspaceReimburseView.js +++ b/src/pages/workspace/reimburse/WorkspaceReimburseView.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, {useState, useEffect, useCallback} from 'react'; import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import PropTypes from 'prop-types'; @@ -19,6 +19,7 @@ import * as Policy from '../../../libs/actions/Policy'; import CONST from '../../../CONST'; import ROUTES from '../../../ROUTES'; import ONYXKEYS from '../../../ONYXKEYS'; +import usePrevious from '../../../hooks/usePrevious'; import * as ReimbursementAccountProps from '../../ReimbursementAccount/reimbursementAccountPropTypes'; import {withNetwork} from '../../../components/OnyxProvider'; import networkPropTypes from '../../../components/networkPropTypes'; @@ -64,140 +65,142 @@ const defaultProps = { reimbursementAccount: ReimbursementAccountProps.reimbursementAccountDefaultProps, }; -class WorkspaceReimburseView extends React.Component { - constructor(props) { - super(props); - this.state = { - currentRatePerUnit: this.getCurrentRatePerUnitLabel(), - }; - } - - componentDidMount() { - this.fetchData(); - } - - componentDidUpdate(prevProps) { - if (prevProps.policy.customUnits !== this.props.policy.customUnits || prevProps.preferredLocale !== this.props.preferredLocale) { - this.setState({currentRatePerUnit: this.getCurrentRatePerUnitLabel()}); - } - - const reconnecting = prevProps.network.isOffline && !this.props.network.isOffline; - if (!reconnecting) { - return; - } +function WorkspaceReimburseView(props) { + const [currentRatePerUnit, setCurrentRatePerUnit] = useState(''); + const prevIsOffline = usePrevious(props.network.isOffline); + const viewAllReceiptsUrl = `expenses?policyIDList=${props.policy.id}&billableReimbursable=reimbursable&submitterEmail=%2B%2B`; + const distanceCustomUnit = _.find(lodashGet(props.policy, 'customUnits', {}), (unit) => unit.name === 'Distance'); + const distanceCustomRate = _.find(lodashGet(props.distanceCustomUnit, 'rates', {}), (rate) => rate.name === 'Default Rate'); + + const getNumericValue = useCallback( + (value) => { + const propsToLocaleDigit = props.toLocaleDigit; + const numValue = parseFloat(value.toString().replace(propsToLocaleDigit('.'), '.')); + if (Number.isNaN(numValue)) { + return NaN; + } + return numValue.toFixed(3); + }, + [props.toLocaleDigit], + ); + + const getRateDisplayValue = useCallback( + (value) => { + const propsToLocaleDigit = props.toLocaleDigit; + const numValue = getNumericValue(value); + if (Number.isNaN(numValue)) { + return ''; + } + return numValue.toString().replace('.', propsToLocaleDigit('.')).substring(0, value.length); + }, + [getNumericValue, props.toLocaleDigit], + ); - this.fetchData(); - } + const getRateLabel = useCallback((customUnitRate) => getRateDisplayValue(lodashGet(customUnitRate, 'rate', 0) / CONST.POLICY.CUSTOM_UNIT_RATE_BASE_OFFSET), [getRateDisplayValue]); - getCurrentRatePerUnitLabel() { - const distanceCustomUnit = _.find(lodashGet(this.props, 'policy.customUnits', {}), (unit) => unit.name === 'Distance'); - const customUnitRate = _.find(lodashGet(distanceCustomUnit, 'rates', {}), (rate) => rate.name === 'Default Rate'); - const currentUnit = this.getUnitLabel(lodashGet(distanceCustomUnit, 'attributes.unit', 'mi')); - const currentRate = this.getRateLabel(customUnitRate); - const perWord = this.props.translate('common.per'); + const getUnitLabel = useCallback( + (value) => { + const propsTranslate = props.translate; + return propsTranslate(`common.${value}`); + }, + [props.translate], + ); + + const getCurrentRatePerUnitLabel = useCallback(() => { + const propsTranslate = props.translate; + const customUnitRate = _.find(distanceCustomUnit && distanceCustomUnit.rates, (rate) => rate && rate.name === 'Default Rate'); + const currentUnit = getUnitLabel((distanceCustomUnit && distanceCustomUnit.attributes && distanceCustomUnit.attributes.unit) || 'mi'); + const currentRate = getRateLabel(customUnitRate); + const perWord = propsTranslate('common.per'); return `${currentRate} ${perWord} ${currentUnit}`; - } - - getRateLabel(customUnitRate) { - return this.getRateDisplayValue(lodashGet(customUnitRate, 'rate', 0) / CONST.POLICY.CUSTOM_UNIT_RATE_BASE_OFFSET); - } - - getUnitLabel(value) { - return this.props.translate(`common.${value}`); - } - - getRateDisplayValue(value) { - const numValue = this.getNumericValue(value); - if (Number.isNaN(numValue)) { - return ''; - } - return numValue.toString().replace('.', this.props.toLocaleDigit('.')).substring(0, value.length); - } - - getNumericValue(value) { - const numValue = parseFloat(value.toString().replace(this.props.toLocaleDigit('.'), '.')); - if (Number.isNaN(numValue)) { - return NaN; - } - return numValue.toFixed(3); - } + }, [props.translate, distanceCustomUnit, getUnitLabel, getRateLabel]); - fetchData() { + const fetchData = useCallback(() => { // Instead of setting the reimbursement account loading within the optimistic data of the API command, use a separate action so that the Onyx value is updated right away. // openWorkspaceReimburseView uses API.read which will not make the request until all WRITE requests in the sequential queue have finished responding, so there would be a delay in // updating Onyx with the optimistic data. + const propsPolicyId = props.policy.id; BankAccounts.setReimbursementAccountLoading(true); - Policy.openWorkspaceReimburseView(this.props.policy.id); - } - - render() { - const viewAllReceiptsUrl = `expenses?policyIDList=${this.props.policy.id}&billableReimbursable=reimbursable&submitterEmail=%2B%2B`; - const distanceCustomUnit = _.find(lodashGet(this.props, 'policy.customUnits', {}), (unit) => unit.name === 'Distance'); - const distanceCustomRate = _.find(lodashGet(distanceCustomUnit, 'rates', {}), (rate) => rate.name === 'Default Rate'); - return ( - <> -
Link.openOldDotLink(viewAllReceiptsUrl), - icon: Expensicons.Receipt, - shouldShowRightIcon: true, - iconRight: Expensicons.NewWindow, - wrapperStyle: [styles.cardMenuItem], - link: () => Link.buildOldDotURL(viewAllReceiptsUrl), - }, - ]} - > - - - {this.props.translate('workspace.reimburse.captureNoVBACopyBeforeEmail')} - - {this.props.translate('workspace.reimburse.captureNoVBACopyAfterEmail')} - - -
- -
- - {this.props.translate('workspace.reimburse.trackDistanceCopy')} - - - Navigation.navigate(ROUTES.getWorkspaceRateAndUnitRoute(this.props.policy.id))} - wrapperStyle={[styles.mhn5, styles.wAuto]} - brickRoadIndicator={(lodashGet(distanceCustomUnit, 'errors') || lodashGet(distanceCustomRate, 'errors')) && CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR} + Policy.openWorkspaceReimburseView(propsPolicyId); + }, [props.policy.id]); + + useEffect(() => { + fetchData(); + }, [fetchData]); + + useEffect(() => { + setCurrentRatePerUnit(getCurrentRatePerUnitLabel()); + const isReconnecting = prevIsOffline && !props.network.isOffline; + if (!isReconnecting) { + return; + } + fetchData(); + }, [props.policy.customUnits, props.preferredLocale, props.network.isOffline, prevIsOffline, getCurrentRatePerUnitLabel, fetchData]); + + return ( + <> +
Link.openOldDotLink(viewAllReceiptsUrl), + icon: Expensicons.Receipt, + shouldShowRightIcon: true, + iconRight: Expensicons.NewWindow, + wrapperStyle: [styles.cardMenuItem], + link: () => Link.buildOldDotURL(viewAllReceiptsUrl), + }, + ]} + > + + + {props.translate('workspace.reimburse.captureNoVBACopyBeforeEmail')} + - -
- - - - ); - } + {props.translate('workspace.reimburse.captureNoVBACopyAfterEmail')} + + +
+ +
+ + {props.translate('workspace.reimburse.trackDistanceCopy')} + + + Navigation.navigate(ROUTES.getWorkspaceRateAndUnitRoute(props.policy.id))} + wrapperStyle={[styles.mhn5, styles.wAuto]} + brickRoadIndicator={(lodashGet(distanceCustomUnit, 'errors') || lodashGet(distanceCustomRate, 'errors')) && CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR} + /> + +
+ + + + ); } WorkspaceReimburseView.defaultProps = defaultProps; WorkspaceReimburseView.propTypes = propTypes; +WorkspaceReimburseView.displayName = 'WorkspaceReimburseView'; export default compose( withLocalize, From ab6f3e26ecc8bcdb41ed2ef685bdd60ba3581e75 Mon Sep 17 00:00:00 2001 From: Abhas Kumar Date: Sun, 9 Jul 2023 23:04:11 +0530 Subject: [PATCH 02/12] fix double fetch while mounting --- src/pages/workspace/reimburse/WorkspaceReimburseView.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/pages/workspace/reimburse/WorkspaceReimburseView.js b/src/pages/workspace/reimburse/WorkspaceReimburseView.js index d30bb45bdb31..6d94e495352a 100644 --- a/src/pages/workspace/reimburse/WorkspaceReimburseView.js +++ b/src/pages/workspace/reimburse/WorkspaceReimburseView.js @@ -124,10 +124,6 @@ function WorkspaceReimburseView(props) { Policy.openWorkspaceReimburseView(propsPolicyId); }, [props.policy.id]); - useEffect(() => { - fetchData(); - }, [fetchData]); - useEffect(() => { setCurrentRatePerUnit(getCurrentRatePerUnitLabel()); const isReconnecting = prevIsOffline && !props.network.isOffline; From e9683e0887be648fddbb3c8fd6b8a0e2defd037b Mon Sep 17 00:00:00 2001 From: Abhas Kumar Date: Sun, 9 Jul 2023 23:14:22 +0530 Subject: [PATCH 03/12] replace reconnecting check with just state change to online check --- src/pages/workspace/reimburse/WorkspaceReimburseView.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/pages/workspace/reimburse/WorkspaceReimburseView.js b/src/pages/workspace/reimburse/WorkspaceReimburseView.js index 6d94e495352a..8d9cf6e26619 100644 --- a/src/pages/workspace/reimburse/WorkspaceReimburseView.js +++ b/src/pages/workspace/reimburse/WorkspaceReimburseView.js @@ -67,7 +67,6 @@ const defaultProps = { function WorkspaceReimburseView(props) { const [currentRatePerUnit, setCurrentRatePerUnit] = useState(''); - const prevIsOffline = usePrevious(props.network.isOffline); const viewAllReceiptsUrl = `expenses?policyIDList=${props.policy.id}&billableReimbursable=reimbursable&submitterEmail=%2B%2B`; const distanceCustomUnit = _.find(lodashGet(props.policy, 'customUnits', {}), (unit) => unit.name === 'Distance'); const distanceCustomRate = _.find(lodashGet(props.distanceCustomUnit, 'rates', {}), (rate) => rate.name === 'Default Rate'); @@ -126,8 +125,7 @@ function WorkspaceReimburseView(props) { useEffect(() => { setCurrentRatePerUnit(getCurrentRatePerUnitLabel()); - const isReconnecting = prevIsOffline && !props.network.isOffline; - if (!isReconnecting) { + if (props.network.isOffline) { return; } fetchData(); From 282cf932f9dd70c4ba4f96727f73925bbe649a6e Mon Sep 17 00:00:00 2001 From: Abhas Kumar Date: Sun, 9 Jul 2023 23:39:55 +0530 Subject: [PATCH 04/12] cleanup due to previous removal --- src/pages/workspace/reimburse/WorkspaceReimburseView.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/pages/workspace/reimburse/WorkspaceReimburseView.js b/src/pages/workspace/reimburse/WorkspaceReimburseView.js index 8d9cf6e26619..62a1acf6d941 100644 --- a/src/pages/workspace/reimburse/WorkspaceReimburseView.js +++ b/src/pages/workspace/reimburse/WorkspaceReimburseView.js @@ -19,7 +19,6 @@ import * as Policy from '../../../libs/actions/Policy'; import CONST from '../../../CONST'; import ROUTES from '../../../ROUTES'; import ONYXKEYS from '../../../ONYXKEYS'; -import usePrevious from '../../../hooks/usePrevious'; import * as ReimbursementAccountProps from '../../ReimbursementAccount/reimbursementAccountPropTypes'; import {withNetwork} from '../../../components/OnyxProvider'; import networkPropTypes from '../../../components/networkPropTypes'; @@ -129,7 +128,7 @@ function WorkspaceReimburseView(props) { return; } fetchData(); - }, [props.policy.customUnits, props.preferredLocale, props.network.isOffline, prevIsOffline, getCurrentRatePerUnitLabel, fetchData]); + }, [props.policy.customUnits, props.preferredLocale, props.network.isOffline, getCurrentRatePerUnitLabel, fetchData]); return ( <> From c2b6708ae0b5299fd26c0f223ece9629b3c6b396 Mon Sep 17 00:00:00 2001 From: Abhas Kumar Date: Tue, 11 Jul 2023 01:29:38 +0530 Subject: [PATCH 05/12] destruct outside hooks --- .../reimburse/WorkspaceReimburseView.js | 23 ++++++++----------- 1 file changed, 10 insertions(+), 13 deletions(-) diff --git a/src/pages/workspace/reimburse/WorkspaceReimburseView.js b/src/pages/workspace/reimburse/WorkspaceReimburseView.js index 62a1acf6d941..2c471769d164 100644 --- a/src/pages/workspace/reimburse/WorkspaceReimburseView.js +++ b/src/pages/workspace/reimburse/WorkspaceReimburseView.js @@ -69,49 +69,46 @@ function WorkspaceReimburseView(props) { const viewAllReceiptsUrl = `expenses?policyIDList=${props.policy.id}&billableReimbursable=reimbursable&submitterEmail=%2B%2B`; const distanceCustomUnit = _.find(lodashGet(props.policy, 'customUnits', {}), (unit) => unit.name === 'Distance'); const distanceCustomRate = _.find(lodashGet(props.distanceCustomUnit, 'rates', {}), (rate) => rate.name === 'Default Rate'); + const {translate, toLocaleDigit} = props; const getNumericValue = useCallback( (value) => { - const propsToLocaleDigit = props.toLocaleDigit; - const numValue = parseFloat(value.toString().replace(propsToLocaleDigit('.'), '.')); + const numValue = parseFloat(value.toString().replace(toLocaleDigit('.'), '.')); if (Number.isNaN(numValue)) { return NaN; } return numValue.toFixed(3); }, - [props.toLocaleDigit], + [toLocaleDigit], ); const getRateDisplayValue = useCallback( (value) => { - const propsToLocaleDigit = props.toLocaleDigit; const numValue = getNumericValue(value); if (Number.isNaN(numValue)) { return ''; } - return numValue.toString().replace('.', propsToLocaleDigit('.')).substring(0, value.length); + return numValue.toString().replace('.', toLocaleDigit('.')).substring(0, value.length); }, - [getNumericValue, props.toLocaleDigit], + [getNumericValue, toLocaleDigit], ); const getRateLabel = useCallback((customUnitRate) => getRateDisplayValue(lodashGet(customUnitRate, 'rate', 0) / CONST.POLICY.CUSTOM_UNIT_RATE_BASE_OFFSET), [getRateDisplayValue]); const getUnitLabel = useCallback( (value) => { - const propsTranslate = props.translate; - return propsTranslate(`common.${value}`); + translate(`common.${value}`); }, - [props.translate], + [translate], ); const getCurrentRatePerUnitLabel = useCallback(() => { - const propsTranslate = props.translate; const customUnitRate = _.find(distanceCustomUnit && distanceCustomUnit.rates, (rate) => rate && rate.name === 'Default Rate'); const currentUnit = getUnitLabel((distanceCustomUnit && distanceCustomUnit.attributes && distanceCustomUnit.attributes.unit) || 'mi'); const currentRate = getRateLabel(customUnitRate); - const perWord = propsTranslate('common.per'); + const perWord = translate('common.per'); return `${currentRate} ${perWord} ${currentUnit}`; - }, [props.translate, distanceCustomUnit, getUnitLabel, getRateLabel]); + }, [translate, distanceCustomUnit, getUnitLabel, getRateLabel]); const fetchData = useCallback(() => { // Instead of setting the reimbursement account loading within the optimistic data of the API command, use a separate action so that the Onyx value is updated right away. @@ -128,7 +125,7 @@ function WorkspaceReimburseView(props) { return; } fetchData(); - }, [props.policy.customUnits, props.preferredLocale, props.network.isOffline, getCurrentRatePerUnitLabel, fetchData]); + }, [props.policy.customUnits, props.network.isOffline, getCurrentRatePerUnitLabel, fetchData]); return ( <> From 0e41b38193537a98471e45fa4d7d084101f03071 Mon Sep 17 00:00:00 2001 From: Abhas Kumar <48285331+KrAbhas@users.noreply.github.com> Date: Wed, 12 Jul 2023 18:12:40 +0530 Subject: [PATCH 06/12] make getRateLabel more readable Co-authored-by: Luthfi --- src/pages/workspace/reimburse/WorkspaceReimburseView.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/pages/workspace/reimburse/WorkspaceReimburseView.js b/src/pages/workspace/reimburse/WorkspaceReimburseView.js index 2c471769d164..2ad88e4f7925 100644 --- a/src/pages/workspace/reimburse/WorkspaceReimburseView.js +++ b/src/pages/workspace/reimburse/WorkspaceReimburseView.js @@ -93,7 +93,10 @@ function WorkspaceReimburseView(props) { [getNumericValue, toLocaleDigit], ); - const getRateLabel = useCallback((customUnitRate) => getRateDisplayValue(lodashGet(customUnitRate, 'rate', 0) / CONST.POLICY.CUSTOM_UNIT_RATE_BASE_OFFSET), [getRateDisplayValue]); +const getRateLabel = useCallback( + (customUnitRate) => getRateDisplayValue(lodashGet(customUnitRate, 'rate', 0) / CONST.POLICY.CUSTOM_UNIT_RATE_BASE_OFFSET), + [getRateDisplayValue], + ); const getUnitLabel = useCallback( (value) => { From 5b127a6636559f83165ea19c86d4d2202d989dbf Mon Sep 17 00:00:00 2001 From: Abhas Kumar Date: Thu, 13 Jul 2023 10:26:04 +0530 Subject: [PATCH 07/12] fix fetch on translate and unit change --- .../reimburse/WorkspaceReimburseView.js | 31 ++++++++++--------- 1 file changed, 17 insertions(+), 14 deletions(-) diff --git a/src/pages/workspace/reimburse/WorkspaceReimburseView.js b/src/pages/workspace/reimburse/WorkspaceReimburseView.js index 2ad88e4f7925..5175e1fcb384 100644 --- a/src/pages/workspace/reimburse/WorkspaceReimburseView.js +++ b/src/pages/workspace/reimburse/WorkspaceReimburseView.js @@ -94,7 +94,8 @@ function WorkspaceReimburseView(props) { ); const getRateLabel = useCallback( - (customUnitRate) => getRateDisplayValue(lodashGet(customUnitRate, 'rate', 0) / CONST.POLICY.CUSTOM_UNIT_RATE_BASE_OFFSET), + (customUnitRate) => getRateDisplayValue(lodashGet(customUnitRate, 'rate', 0) / + CONST.POLICY.CUSTOM_UNIT_RATE_BASE_OFFSET), [getRateDisplayValue], ); @@ -107,7 +108,7 @@ const getRateLabel = useCallback( const getCurrentRatePerUnitLabel = useCallback(() => { const customUnitRate = _.find(distanceCustomUnit && distanceCustomUnit.rates, (rate) => rate && rate.name === 'Default Rate'); - const currentUnit = getUnitLabel((distanceCustomUnit && distanceCustomUnit.attributes && distanceCustomUnit.attributes.unit) || 'mi'); + const currentUnit = getUnitLabel(lodashGet(distanceCustomUnit, 'attributes.unit', 'mi')); const currentRate = getRateLabel(customUnitRate); const perWord = translate('common.per'); return `${currentRate} ${perWord} ${currentUnit}`; @@ -117,27 +118,29 @@ const getRateLabel = useCallback( // Instead of setting the reimbursement account loading within the optimistic data of the API command, use a separate action so that the Onyx value is updated right away. // openWorkspaceReimburseView uses API.read which will not make the request until all WRITE requests in the sequential queue have finished responding, so there would be a delay in // updating Onyx with the optimistic data. - const propsPolicyId = props.policy.id; BankAccounts.setReimbursementAccountLoading(true); - Policy.openWorkspaceReimburseView(propsPolicyId); + Policy.openWorkspaceReimburseView(props.policy.id); }, [props.policy.id]); useEffect(() => { - setCurrentRatePerUnit(getCurrentRatePerUnitLabel()); if (props.network.isOffline) { return; } fetchData(); - }, [props.policy.customUnits, props.network.isOffline, getCurrentRatePerUnitLabel, fetchData]); + }, [props.network.isOffline, fetchData]); + + useEffect(() => { + setCurrentRatePerUnit(getCurrentRatePerUnitLabel()); + }, [props.policy.customUnits, getCurrentRatePerUnitLabel]) return ( <>
Link.openOldDotLink(viewAllReceiptsUrl), icon: Expensicons.Receipt, shouldShowRightIcon: true, @@ -149,22 +152,22 @@ const getRateLabel = useCallback( > - {props.translate('workspace.reimburse.captureNoVBACopyBeforeEmail')} + {translate('workspace.reimburse.captureNoVBACopyBeforeEmail')} - {props.translate('workspace.reimburse.captureNoVBACopyAfterEmail')} + {translate('workspace.reimburse.captureNoVBACopyAfterEmail')}
- {props.translate('workspace.reimburse.trackDistanceCopy')} + {translate('workspace.reimburse.trackDistanceCopy')} Navigation.navigate(ROUTES.getWorkspaceRateAndUnitRoute(props.policy.id))} wrapperStyle={[styles.mhn5, styles.wAuto]} @@ -185,7 +188,7 @@ const getRateLabel = useCallback( policy={props.policy} reimbursementAccount={props.reimbursementAccount} network={props.network} - translate={props.translate} + translate={translate} /> ); From 723e7fa872b189eb328a626d7fd38a31d2e770c9 Mon Sep 17 00:00:00 2001 From: Abhas Kumar Date: Thu, 13 Jul 2023 10:32:05 +0530 Subject: [PATCH 08/12] return translate in getUnitLabel directly --- src/pages/workspace/reimburse/WorkspaceReimburseView.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/pages/workspace/reimburse/WorkspaceReimburseView.js b/src/pages/workspace/reimburse/WorkspaceReimburseView.js index 5175e1fcb384..8381ed663ff4 100644 --- a/src/pages/workspace/reimburse/WorkspaceReimburseView.js +++ b/src/pages/workspace/reimburse/WorkspaceReimburseView.js @@ -100,9 +100,7 @@ const getRateLabel = useCallback( ); const getUnitLabel = useCallback( - (value) => { - translate(`common.${value}`); - }, + (value) => translate(`common.${value}`), [translate], ); From e7779aa1b4369e69d0d60147ad80139ee819f305 Mon Sep 17 00:00:00 2001 From: Abhas Kumar <48285331+KrAbhas@users.noreply.github.com> Date: Thu, 13 Jul 2023 21:52:36 +0530 Subject: [PATCH 09/12] use lodash to find customUnitRate Co-authored-by: Luthfi --- src/pages/workspace/reimburse/WorkspaceReimburseView.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/workspace/reimburse/WorkspaceReimburseView.js b/src/pages/workspace/reimburse/WorkspaceReimburseView.js index 8381ed663ff4..106f062d2f66 100644 --- a/src/pages/workspace/reimburse/WorkspaceReimburseView.js +++ b/src/pages/workspace/reimburse/WorkspaceReimburseView.js @@ -105,7 +105,7 @@ const getRateLabel = useCallback( ); const getCurrentRatePerUnitLabel = useCallback(() => { - const customUnitRate = _.find(distanceCustomUnit && distanceCustomUnit.rates, (rate) => rate && rate.name === 'Default Rate'); + const customUnitRate = _.find(lodashGet(distanceCustomUnit, 'rates', '{}'), (rate) => rate && rate.name === 'Default Rate'); const currentUnit = getUnitLabel(lodashGet(distanceCustomUnit, 'attributes.unit', 'mi')); const currentRate = getRateLabel(customUnitRate); const perWord = translate('common.per'); From 20b87dc7e340b8d4ac26536644a64297bfc20b32 Mon Sep 17 00:00:00 2001 From: Abhas Kumar <48285331+KrAbhas@users.noreply.github.com> Date: Thu, 13 Jul 2023 21:53:17 +0530 Subject: [PATCH 10/12] cleanup providing better indentation Co-authored-by: Luthfi --- src/pages/workspace/reimburse/WorkspaceReimburseView.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/workspace/reimburse/WorkspaceReimburseView.js b/src/pages/workspace/reimburse/WorkspaceReimburseView.js index 106f062d2f66..064bd1c51722 100644 --- a/src/pages/workspace/reimburse/WorkspaceReimburseView.js +++ b/src/pages/workspace/reimburse/WorkspaceReimburseView.js @@ -93,7 +93,7 @@ function WorkspaceReimburseView(props) { [getNumericValue, toLocaleDigit], ); -const getRateLabel = useCallback( + const getRateLabel = useCallback( (customUnitRate) => getRateDisplayValue(lodashGet(customUnitRate, 'rate', 0) / CONST.POLICY.CUSTOM_UNIT_RATE_BASE_OFFSET), [getRateDisplayValue], From e05d34ced762bc06e8755e1213de9390922ed4e7 Mon Sep 17 00:00:00 2001 From: Abhas Kumar Date: Tue, 18 Jul 2023 01:17:17 +0530 Subject: [PATCH 11/12] take distanceCustomUnit from variable and resolve merge conflict --- src/pages/workspace/reimburse/WorkspaceReimburseView.js | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/src/pages/workspace/reimburse/WorkspaceReimburseView.js b/src/pages/workspace/reimburse/WorkspaceReimburseView.js index 064bd1c51722..fe0053038787 100644 --- a/src/pages/workspace/reimburse/WorkspaceReimburseView.js +++ b/src/pages/workspace/reimburse/WorkspaceReimburseView.js @@ -68,7 +68,7 @@ function WorkspaceReimburseView(props) { const [currentRatePerUnit, setCurrentRatePerUnit] = useState(''); const viewAllReceiptsUrl = `expenses?policyIDList=${props.policy.id}&billableReimbursable=reimbursable&submitterEmail=%2B%2B`; const distanceCustomUnit = _.find(lodashGet(props.policy, 'customUnits', {}), (unit) => unit.name === 'Distance'); - const distanceCustomRate = _.find(lodashGet(props.distanceCustomUnit, 'rates', {}), (rate) => rate.name === 'Default Rate'); + const distanceCustomRate = _.find(lodashGet(distanceCustomUnit, 'rates', {}), (rate) => rate.name === 'Default Rate'); const {translate, toLocaleDigit} = props; const getNumericValue = useCallback( @@ -99,10 +99,7 @@ function WorkspaceReimburseView(props) { [getRateDisplayValue], ); - const getUnitLabel = useCallback( - (value) => translate(`common.${value}`), - [translate], - ); + const getUnitLabel = useCallback((value) => translate(`common.${value}`), [translate]); const getCurrentRatePerUnitLabel = useCallback(() => { const customUnitRate = _.find(lodashGet(distanceCustomUnit, 'rates', '{}'), (rate) => rate && rate.name === 'Default Rate'); @@ -129,7 +126,7 @@ function WorkspaceReimburseView(props) { useEffect(() => { setCurrentRatePerUnit(getCurrentRatePerUnitLabel()); - }, [props.policy.customUnits, getCurrentRatePerUnitLabel]) + }, [props.policy.customUnits, getCurrentRatePerUnitLabel]); return ( <> From 36cf4bffccfec09f8a8bb289906b5131df34bf22 Mon Sep 17 00:00:00 2001 From: Abhas Kumar Date: Tue, 18 Jul 2023 01:20:56 +0530 Subject: [PATCH 12/12] run prettier --- src/pages/workspace/reimburse/WorkspaceReimburseView.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/pages/workspace/reimburse/WorkspaceReimburseView.js b/src/pages/workspace/reimburse/WorkspaceReimburseView.js index fe0053038787..a3ade4f6d96b 100644 --- a/src/pages/workspace/reimburse/WorkspaceReimburseView.js +++ b/src/pages/workspace/reimburse/WorkspaceReimburseView.js @@ -93,11 +93,7 @@ function WorkspaceReimburseView(props) { [getNumericValue, toLocaleDigit], ); - const getRateLabel = useCallback( - (customUnitRate) => getRateDisplayValue(lodashGet(customUnitRate, 'rate', 0) / - CONST.POLICY.CUSTOM_UNIT_RATE_BASE_OFFSET), - [getRateDisplayValue], - ); + const getRateLabel = useCallback((customUnitRate) => getRateDisplayValue(lodashGet(customUnitRate, 'rate', 0) / CONST.POLICY.CUSTOM_UNIT_RATE_BASE_OFFSET), [getRateDisplayValue]); const getUnitLabel = useCallback((value) => translate(`common.${value}`), [translate]);