From bc80ac10f05bf167f0d7a91d195deed1c5fb705a Mon Sep 17 00:00:00 2001 From: Fitsum Abebe Date: Thu, 28 Dec 2023 15:45:47 +0300 Subject: [PATCH 1/4] migrated DistanceEReceipt to typescript --- ...stanceEReceipt.js => DistanceEReceipt.tsx} | 49 ++++++++----------- 1 file changed, 21 insertions(+), 28 deletions(-) rename src/components/{DistanceEReceipt.js => DistanceEReceipt.tsx} (77%) diff --git a/src/components/DistanceEReceipt.js b/src/components/DistanceEReceipt.tsx similarity index 77% rename from src/components/DistanceEReceipt.js rename to src/components/DistanceEReceipt.tsx index 0241eea44063..c9976988dab5 100644 --- a/src/components/DistanceEReceipt.js +++ b/src/components/DistanceEReceipt.tsx @@ -1,52 +1,47 @@ -import lodashGet from 'lodash/get'; +import _ from 'lodash'; import React, {useMemo} from 'react'; import {ScrollView, View} from 'react-native'; -import _ from 'underscore'; import EReceiptBackground from '@assets/images/eReceipt_background.svg'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; -import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import * as CurrencyUtils from '@libs/CurrencyUtils'; import * as ReceiptUtils from '@libs/ReceiptUtils'; import * as ReportUtils from '@libs/ReportUtils'; import * as TransactionUtils from '@libs/TransactionUtils'; import tryResolveUrlFromApiRoot from '@libs/tryResolveUrlFromApiRoot'; +import {TranslationPaths} from '@src/languages/types'; +import {Transaction} from '@src/types/onyx'; +import {WaypointCollection} from '@src/types/onyx/Transaction'; import Icon from './Icon'; import * as Expensicons from './Icon/Expensicons'; import ImageSVG from './ImageSVG'; import PendingMapView from './MapView/PendingMapView'; import Text from './Text'; import ThumbnailImage from './ThumbnailImage'; -import transactionPropTypes from './transactionPropTypes'; -const propTypes = { +type DistanceEReceiptProps = { /** The transaction for the distance request */ - transaction: transactionPropTypes, + transaction: Transaction; }; -const defaultProps = { - transaction: {}, -}; - -function DistanceEReceipt({transaction}) { - const theme = useTheme(); +function DistanceEReceipt({transaction}: DistanceEReceiptProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); const {isOffline} = useNetwork(); - const {thumbnail} = TransactionUtils.hasReceipt(transaction) ? ReceiptUtils.getThumbnailAndImageURIs(transaction) : {}; - const {amount: transactionAmount, currency: transactionCurrency, merchant: transactionMerchant, created: transactionDate} = ReportUtils.getTransactionDetails(transaction); + const {thumbnail = ''} = TransactionUtils.hasReceipt(transaction) ? ReceiptUtils.getThumbnailAndImageURIs(transaction) : {}; + const {amount: transactionAmount, currency: transactionCurrency, merchant: transactionMerchant, created: transactionDate} = ReportUtils.getTransactionDetails(transaction) ?? {}; const formattedTransactionAmount = transactionAmount ? CurrencyUtils.convertToDisplayString(transactionAmount, transactionCurrency) : translate('common.tbd'); - const thumbnailSource = tryResolveUrlFromApiRoot(thumbnail || ''); - const waypoints = lodashGet(transaction, 'comment.waypoints', {}); - const sortedWaypoints = useMemo( + const thumbnailSource = tryResolveUrlFromApiRoot((thumbnail as string) || ''); + const waypoints = useMemo(() => transaction?.comment?.waypoints ?? {}, [transaction?.comment?.waypoints]); + const sortedWaypoints = useMemo( () => // The waypoint keys are sometimes out of order _.chain(waypoints) .keys() .sort((keyA, keyB) => TransactionUtils.getWaypointIndex(keyA) - TransactionUtils.getWaypointIndex(keyB)) .map((key) => ({[key]: waypoints[key]})) - .reduce((result, obj) => (obj ? _.assign(result, obj) : result), {}) + .reduce((result, obj) => (obj ? Object.assign(result, obj) : result), {}) .value(), [waypoints], ); @@ -64,7 +59,7 @@ function DistanceEReceipt({transaction}) { /> - {isOffline || !thumbnailSource ? ( + {isOffline === true || !thumbnailSource ? ( ) : ( {transactionMerchant} - {_.map(sortedWaypoints, (waypoint, key) => { + {Object.entries(sortedWaypoints).map(([key, waypoint]) => { const index = TransactionUtils.getWaypointIndex(key); let descriptionKey = 'distance.waypointDescription.'; if (index === 0) { descriptionKey += 'start'; - } else if (index === _.size(waypoints) - 1) { + } else if (index === Object.keys(waypoints).length - 1) { descriptionKey += 'finish'; } else { descriptionKey += 'stop'; @@ -95,9 +90,9 @@ function DistanceEReceipt({transaction}) { style={styles.gap1} key={key} > - {translate(descriptionKey)} - {waypoint.name && {waypoint.name}} - {waypoint.address && {waypoint.address}} + {translate(descriptionKey as TranslationPaths)} + {waypoint?.name && {waypoint.name}} + {waypoint?.address && {waypoint.address}} ); })} @@ -110,7 +105,6 @@ function DistanceEReceipt({transaction}) { @@ -122,7 +116,6 @@ function DistanceEReceipt({transaction}) { ); } -export default DistanceEReceipt; DistanceEReceipt.displayName = 'DistanceEReceipt'; -DistanceEReceipt.propTypes = propTypes; -DistanceEReceipt.defaultProps = defaultProps; + +export default DistanceEReceipt; From 689c22710e9a8f0457014630c8919ef344bacb0d Mon Sep 17 00:00:00 2001 From: Fitsum Abebe Date: Sun, 31 Dec 2023 20:49:06 +0300 Subject: [PATCH 2/4] removed lodash functions --- src/components/DistanceEReceipt.tsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/components/DistanceEReceipt.tsx b/src/components/DistanceEReceipt.tsx index c9976988dab5..9a90bf13493d 100644 --- a/src/components/DistanceEReceipt.tsx +++ b/src/components/DistanceEReceipt.tsx @@ -1,4 +1,3 @@ -import _ from 'lodash'; import React, {useMemo} from 'react'; import {ScrollView, View} from 'react-native'; import EReceiptBackground from '@assets/images/eReceipt_background.svg'; @@ -37,12 +36,10 @@ function DistanceEReceipt({transaction}: DistanceEReceiptProps) { const sortedWaypoints = useMemo( () => // The waypoint keys are sometimes out of order - _.chain(waypoints) - .keys() + Object.keys(waypoints) .sort((keyA, keyB) => TransactionUtils.getWaypointIndex(keyA) - TransactionUtils.getWaypointIndex(keyB)) .map((key) => ({[key]: waypoints[key]})) - .reduce((result, obj) => (obj ? Object.assign(result, obj) : result), {}) - .value(), + .reduce((result, obj) => (obj ? Object.assign(result, obj) : result), {}), [waypoints], ); return ( From a799adfd577da0a8117cebdb402e675de2bd3625 Mon Sep 17 00:00:00 2001 From: Fitsum Abebe Date: Wed, 3 Jan 2024 22:30:07 +0300 Subject: [PATCH 3/4] fixed based on comments --- src/components/DistanceEReceipt.tsx | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/src/components/DistanceEReceipt.tsx b/src/components/DistanceEReceipt.tsx index 9a90bf13493d..e82dcaa2792b 100644 --- a/src/components/DistanceEReceipt.tsx +++ b/src/components/DistanceEReceipt.tsx @@ -28,7 +28,7 @@ function DistanceEReceipt({transaction}: DistanceEReceiptProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); const {isOffline} = useNetwork(); - const {thumbnail = ''} = TransactionUtils.hasReceipt(transaction) ? ReceiptUtils.getThumbnailAndImageURIs(transaction) : {}; + const thumbnail = TransactionUtils.hasReceipt(transaction) ? ReceiptUtils.getThumbnailAndImageURIs(transaction).thumbnail : null; const {amount: transactionAmount, currency: transactionCurrency, merchant: transactionMerchant, created: transactionDate} = ReportUtils.getTransactionDetails(transaction) ?? {}; const formattedTransactionAmount = transactionAmount ? CurrencyUtils.convertToDisplayString(transactionAmount, transactionCurrency) : translate('common.tbd'); const thumbnailSource = tryResolveUrlFromApiRoot((thumbnail as string) || ''); @@ -56,7 +56,7 @@ function DistanceEReceipt({transaction}: DistanceEReceiptProps) { /> - {isOffline === true || !thumbnailSource ? ( + {!!isOffline || !thumbnailSource ? ( ) : ( {Object.entries(sortedWaypoints).map(([key, waypoint]) => { const index = TransactionUtils.getWaypointIndex(key); - let descriptionKey = 'distance.waypointDescription.'; + let descriptionKey: TranslationPaths = 'distance.waypointDescription.stop'; if (index === 0) { - descriptionKey += 'start'; + descriptionKey = 'distance.waypointDescription.start'; } else if (index === Object.keys(waypoints).length - 1) { - descriptionKey += 'finish'; - } else { - descriptionKey += 'stop'; + descriptionKey = 'distance.waypointDescription.finish'; } + return ( - {translate(descriptionKey as TranslationPaths)} - {waypoint?.name && {waypoint.name}} - {waypoint?.address && {waypoint.address}} + {translate(descriptionKey)} + {!!waypoint?.name && {waypoint.name}} + {!!waypoint?.address && {waypoint.address}} ); })} From 7cc41cedf0dbe06c82d6730e66242b2aaa927117 Mon Sep 17 00:00:00 2001 From: Fitsum Abebe Date: Sun, 21 Jan 2024 00:04:16 +0300 Subject: [PATCH 4/4] fix type import --- src/components/DistanceEReceipt.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/DistanceEReceipt.tsx b/src/components/DistanceEReceipt.tsx index e82dcaa2792b..f556296e806f 100644 --- a/src/components/DistanceEReceipt.tsx +++ b/src/components/DistanceEReceipt.tsx @@ -9,9 +9,9 @@ import * as ReceiptUtils from '@libs/ReceiptUtils'; import * as ReportUtils from '@libs/ReportUtils'; import * as TransactionUtils from '@libs/TransactionUtils'; import tryResolveUrlFromApiRoot from '@libs/tryResolveUrlFromApiRoot'; -import {TranslationPaths} from '@src/languages/types'; -import {Transaction} from '@src/types/onyx'; -import {WaypointCollection} from '@src/types/onyx/Transaction'; +import type {TranslationPaths} from '@src/languages/types'; +import type {Transaction} from '@src/types/onyx'; +import type {WaypointCollection} from '@src/types/onyx/Transaction'; import Icon from './Icon'; import * as Expensicons from './Icon/Expensicons'; import ImageSVG from './ImageSVG';