From d96c04666fd575489a09fc904397b132a355c26b Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Tue, 12 Dec 2023 12:46:56 +0100 Subject: [PATCH 1/6] migrate EReceiptThumbnail to TypeScript --- ...eiptThumbnail.js => EReceiptThumbnail.tsx} | 68 +++++++++++-------- 1 file changed, 41 insertions(+), 27 deletions(-) rename src/components/{EReceiptThumbnail.js => EReceiptThumbnail.tsx} (68%) diff --git a/src/components/EReceiptThumbnail.js b/src/components/EReceiptThumbnail.tsx similarity index 68% rename from src/components/EReceiptThumbnail.js rename to src/components/EReceiptThumbnail.tsx index 1f719862412b..6397157dd364 100644 --- a/src/components/EReceiptThumbnail.js +++ b/src/components/EReceiptThumbnail.tsx @@ -1,31 +1,31 @@ -import PropTypes from 'prop-types'; import React, {useMemo, useState} from 'react'; -import {View} from 'react-native'; -import {withOnyx} from 'react-native-onyx'; +import {LayoutChangeEvent, View} from 'react-native'; +import {OnyxEntry, withOnyx} from 'react-native-onyx'; import * as ReportUtils from '@libs/ReportUtils'; import useStyleUtils from '@styles/useStyleUtils'; import useThemeStyles from '@styles/useThemeStyles'; import variables from '@styles/variables'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; +import {Transaction} from '@src/types/onyx'; import Icon from './Icon'; import * as eReceiptBGs from './Icon/EReceiptBGs'; import * as Expensicons from './Icon/Expensicons'; import * as MCCIcons from './Icon/MCCIcons'; import Image from './Image'; -import transactionPropTypes from './transactionPropTypes'; - -const propTypes = { - /* TransactionID of the transaction this EReceipt corresponds to */ - // eslint-disable-next-line react/no-unused-prop-types - transactionID: PropTypes.string.isRequired, +type EReceiptThumbnailOnyxProps = { /* Onyx Props */ - transaction: transactionPropTypes, + transaction?: OnyxEntry; }; -const defaultProps = { - transaction: {}, +type EReceiptThumbnailProps = EReceiptThumbnailOnyxProps & { + /* TransactionID of the transaction this EReceipt corresponds to */ + // eslint-disable-next-line react/no-unused-prop-types + transactionID: string; + + // /* Onyx Props */ + // transaction?: Transaction, }; const backgroundImages = { @@ -37,30 +37,47 @@ const backgroundImages = { [CONST.ERECEIPT_COLORS.PINK]: eReceiptBGs.EReceiptBG_Pink, }; -function EReceiptThumbnail({transaction}) { +function EReceiptThumbnail({transaction}: EReceiptThumbnailProps) { const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); - // Get receipt colorway, or default to Yellow. - const {backgroundColor: primaryColor, color: secondaryColor} = StyleUtils.getEReceiptColorStyles(StyleUtils.getEReceiptColorCode(transaction)); const [containerWidth, setContainerWidth] = useState(0); const [containerHeight, setContainerHeight] = useState(0); - const onContainerLayout = (event) => { + const backgroundImage = useMemo(() => { + if (!transaction) { + return; + } + + return backgroundImages[StyleUtils.getEReceiptColorCode(transaction)]; + }, [StyleUtils, transaction]); + + if (!transaction) { + return; + } + + // Get receipt colorway, or default to Yellow. + // const {backgroundColor: primaryColor, color: secondaryColor} = StyleUtils.getEReceiptColorStyles(StyleUtils.getEReceiptColorCode(transaction)); + const colorStyles = StyleUtils.getEReceiptColorStyles(StyleUtils.getEReceiptColorCode(transaction)); + const primaryColor = colorStyles?.backgroundColor; + const secondaryColor = colorStyles?.color; + + const onContainerLayout = (event: LayoutChangeEvent) => { const {width, height} = event.nativeEvent.layout; setContainerWidth(width); setContainerHeight(height); }; - const {mccGroup: transactionMCCGroup} = ReportUtils.getTransactionDetails(transaction); - const MCCIcon = MCCIcons[`${transactionMCCGroup}`]; + const transactionDetails = ReportUtils.getTransactionDetails(transaction); + const transactionMCCGroup = transactionDetails?.mccGroup; + const MCCIcon = transactionMCCGroup ? MCCIcons[`${transactionMCCGroup}`] : undefined; const isSmall = containerWidth && containerWidth < variables.eReceiptThumbnailSmallBreakpoint; const isMedium = containerWidth && containerWidth < variables.eReceiptThumbnailMediumBreakpoint; - let receiptIconWidth = variables.eReceiptIconWidth; - let receiptIconHeight = variables.eReceiptIconHeight; - let receiptMCCSize = variables.eReceiptMCCHeightWidth; + let receiptIconWidth: number = variables.eReceiptIconWidth; + let receiptIconHeight: number = variables.eReceiptIconHeight; + let receiptMCCSize: number = variables.eReceiptMCCHeightWidth; if (isSmall) { receiptIconWidth = variables.eReceiptIconWidthSmall; @@ -72,13 +89,11 @@ function EReceiptThumbnail({transaction}) { receiptMCCSize = variables.eReceiptMCCHeightWidthMedium; } - const backgroundImage = useMemo(() => backgroundImages[StyleUtils.getEReceiptColorCode(transaction)], [StyleUtils, transaction]); - return ( ({ transaction: { key: ({transactionID}) => `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, + selector: (transaction: OnyxEntry) => transaction, }, })(EReceiptThumbnail); From 5845c36f9d26fac3c8b5e6e8e5bd01c113d4cf5f Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Tue, 12 Dec 2023 15:21:53 +0100 Subject: [PATCH 2/6] apply minor improvements --- src/components/EReceiptThumbnail.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/EReceiptThumbnail.tsx b/src/components/EReceiptThumbnail.tsx index 6397157dd364..0c3a75f4953f 100644 --- a/src/components/EReceiptThumbnail.tsx +++ b/src/components/EReceiptThumbnail.tsx @@ -16,16 +16,13 @@ import Image from './Image'; type EReceiptThumbnailOnyxProps = { /* Onyx Props */ - transaction?: OnyxEntry; + transaction: OnyxEntry; }; type EReceiptThumbnailProps = EReceiptThumbnailOnyxProps & { /* TransactionID of the transaction this EReceipt corresponds to */ // eslint-disable-next-line react/no-unused-prop-types transactionID: string; - - // /* Onyx Props */ - // transaction?: Transaction, }; const backgroundImages = { From 730d681d15b6ea2a78c7568b1adbce972ec720a7 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Tue, 12 Dec 2023 16:09:37 +0100 Subject: [PATCH 3/6] apply suggested changes --- src/components/EReceiptThumbnail.tsx | 13 ++++--------- src/styles/utils/index.ts | 4 ++-- 2 files changed, 6 insertions(+), 11 deletions(-) diff --git a/src/components/EReceiptThumbnail.tsx b/src/components/EReceiptThumbnail.tsx index 0c3a75f4953f..897180b1eaae 100644 --- a/src/components/EReceiptThumbnail.tsx +++ b/src/components/EReceiptThumbnail.tsx @@ -7,7 +7,7 @@ import useThemeStyles from '@styles/useThemeStyles'; import variables from '@styles/variables'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; -import {Transaction} from '@src/types/onyx'; +import type {Transaction} from '@src/types/onyx'; import Icon from './Icon'; import * as eReceiptBGs from './Icon/EReceiptBGs'; import * as Expensicons from './Icon/Expensicons'; @@ -15,12 +15,13 @@ import * as MCCIcons from './Icon/MCCIcons'; import Image from './Image'; type EReceiptThumbnailOnyxProps = { - /* Onyx Props */ transaction: OnyxEntry; }; type EReceiptThumbnailProps = EReceiptThumbnailOnyxProps & { - /* TransactionID of the transaction this EReceipt corresponds to */ + /** TransactionID of the transaction this EReceipt corresponds to + * It's used by withOnyx HOC + */ // eslint-disable-next-line react/no-unused-prop-types transactionID: string; }; @@ -49,12 +50,7 @@ function EReceiptThumbnail({transaction}: EReceiptThumbnailProps) { return backgroundImages[StyleUtils.getEReceiptColorCode(transaction)]; }, [StyleUtils, transaction]); - if (!transaction) { - return; - } - // Get receipt colorway, or default to Yellow. - // const {backgroundColor: primaryColor, color: secondaryColor} = StyleUtils.getEReceiptColorStyles(StyleUtils.getEReceiptColorCode(transaction)); const colorStyles = StyleUtils.getEReceiptColorStyles(StyleUtils.getEReceiptColorCode(transaction)); const primaryColor = colorStyles?.backgroundColor; const secondaryColor = colorStyles?.color; @@ -130,6 +126,5 @@ EReceiptThumbnail.displayName = 'EReceiptThumbnail'; export default withOnyx({ transaction: { key: ({transactionID}) => `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, - selector: (transaction: OnyxEntry) => transaction, }, })(EReceiptThumbnail); diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index 8d52c8de200a..07d08b31eae3 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -298,9 +298,9 @@ function getDefaultWorkspaceAvatarColor(workspaceName: string): ViewStyle { /** * Helper method to return eReceipt color code */ -function getEReceiptColorCode(transaction: Transaction): EReceiptColorName { +function getEReceiptColorCode(transaction: Transaction | null): EReceiptColorName { // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing - const transactionID = transaction.parentTransactionID || transaction.transactionID || ''; + const transactionID = transaction?.parentTransactionID || transaction?.transactionID || ''; const colorHash = UserUtils.hashText(transactionID.trim(), eReceiptColors.length); From 12aa175c61969922b74ebe81f43b13b8eff50491 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Wed, 13 Dec 2023 10:26:12 +0100 Subject: [PATCH 4/6] apply suggested changes --- src/components/EReceiptThumbnail.tsx | 8 +------- src/styles/utils/index.ts | 3 ++- 2 files changed, 3 insertions(+), 8 deletions(-) diff --git a/src/components/EReceiptThumbnail.tsx b/src/components/EReceiptThumbnail.tsx index 897180b1eaae..9a85a5e30a44 100644 --- a/src/components/EReceiptThumbnail.tsx +++ b/src/components/EReceiptThumbnail.tsx @@ -42,13 +42,7 @@ function EReceiptThumbnail({transaction}: EReceiptThumbnailProps) { const [containerWidth, setContainerWidth] = useState(0); const [containerHeight, setContainerHeight] = useState(0); - const backgroundImage = useMemo(() => { - if (!transaction) { - return; - } - - return backgroundImages[StyleUtils.getEReceiptColorCode(transaction)]; - }, [StyleUtils, transaction]); + const backgroundImage = useMemo(() => backgroundImages[StyleUtils.getEReceiptColorCode(transaction)], [StyleUtils, transaction]); // Get receipt colorway, or default to Yellow. const colorStyles = StyleUtils.getEReceiptColorStyles(StyleUtils.getEReceiptColorCode(transaction)); diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index 07d08b31eae3..04af034432e1 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -1,5 +1,6 @@ import {CSSProperties} from 'react'; import {Animated, DimensionValue, ImageStyle, PressableStateCallbackType, StyleProp, TextStyle, ViewStyle} from 'react-native'; +import {OnyxEntry} from 'react-native-onyx'; import {EdgeInsets} from 'react-native-safe-area-context'; import {ValueOf} from 'type-fest'; import * as Browser from '@libs/Browser'; @@ -298,7 +299,7 @@ function getDefaultWorkspaceAvatarColor(workspaceName: string): ViewStyle { /** * Helper method to return eReceipt color code */ -function getEReceiptColorCode(transaction: Transaction | null): EReceiptColorName { +function getEReceiptColorCode(transaction: OnyxEntry): EReceiptColorName { // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing const transactionID = transaction?.parentTransactionID || transaction?.transactionID || ''; From 496407780622b75a0c6557629fb452211ea16526 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Tue, 2 Jan 2024 09:06:48 +0100 Subject: [PATCH 5/6] apply suggested changes --- src/components/EReceiptThumbnail.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/EReceiptThumbnail.tsx b/src/components/EReceiptThumbnail.tsx index 7065a5edeb44..aae29a7204fb 100644 --- a/src/components/EReceiptThumbnail.tsx +++ b/src/components/EReceiptThumbnail.tsx @@ -19,9 +19,7 @@ type EReceiptThumbnailOnyxProps = { }; type EReceiptThumbnailProps = EReceiptThumbnailOnyxProps & { - /** TransactionID of the transaction this EReceipt corresponds to - * It's used by withOnyx HOC - */ + /** TransactionID of the transaction this EReceipt corresponds to. It's used by withOnyx HOC */ // eslint-disable-next-line react/no-unused-prop-types transactionID: string; }; @@ -44,7 +42,6 @@ function EReceiptThumbnail({transaction}: EReceiptThumbnailProps) { const backgroundImage = useMemo(() => backgroundImages[StyleUtils.getEReceiptColorCode(transaction)], [StyleUtils, transaction]); - // Get receipt colorway, or default to Yellow. const colorStyles = StyleUtils.getEReceiptColorStyles(StyleUtils.getEReceiptColorCode(transaction)); const primaryColor = colorStyles?.backgroundColor; const secondaryColor = colorStyles?.color; From 3f67d6528d28c8d8bd31d1c5142faa8e0bae3b69 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Tue, 9 Jan 2024 08:58:19 +0100 Subject: [PATCH 6/6] fix linting --- src/components/EReceiptThumbnail.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/EReceiptThumbnail.tsx b/src/components/EReceiptThumbnail.tsx index aae29a7204fb..5976200975cd 100644 --- a/src/components/EReceiptThumbnail.tsx +++ b/src/components/EReceiptThumbnail.tsx @@ -1,6 +1,8 @@ import React, {useMemo, useState} from 'react'; -import {LayoutChangeEvent, View} from 'react-native'; -import {OnyxEntry, withOnyx} from 'react-native-onyx'; +import type {LayoutChangeEvent} from 'react-native'; +import {View} from 'react-native'; +import type {OnyxEntry} from 'react-native-onyx'; +import {withOnyx} from 'react-native-onyx'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; import * as ReportUtils from '@libs/ReportUtils';