Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[CP Staging] Fix crash upon Request Preview open #26611

Merged
merged 9 commits into from
Sep 4, 2023
Merged

[CP Staging] Fix crash upon Request Preview open #26611

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
d34bae4
uri type case check
pradeepmdk Sep 3, 2023
775ecc3
allow local image
pradeepmdk Sep 3, 2023
f337d11
fix the lint issue
pradeepmdk Sep 3, 2023
2605b0a
prettier fix
pradeepmdk Sep 3, 2023
b983476
update the condition
pradeepmdk Sep 3, 2023
fdff8ee
update preitter
pradeepmdk Sep 3, 2023
b7728d4
Update src/components/ReportActionItem/ReportActionItemImage.js
pradeepmdk Sep 3, 2023
ad1608d
update props
pradeepmdk Sep 3, 2023
13dd7b1
filename check
pradeepmdk Sep 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/Image/imagePropTypes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const imagePropTypes = {
source: PropTypes.oneOfType([
PropTypes.number,
PropTypes.shape({
uri: PropTypes.string.isRequired,
uri: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
Copy link
Contributor

@Pujan92 Pujan92 Sep 3, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

isn't the uri should be always string https://reactnative.dev/docs/image#imagesource(I mean aren't we pass a direct number if required instead of wrapping in a object and assigning it to the uri)?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That was done initially but that would have required us managing the different value everywhere Image is used so I thought why don't we handle this inside Image.

Now you don't have to handle differences between platfroms for local resources. Just use {uri: localpath /resoource ID} .

Do you have any suggestions?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TBH I don't have any suggestions yet, I just found URI is a string in all places for React doc. Also strange that we are using the same pattern earlier and didn't face this issue for android. I will update in case I find something.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This will break source prop in other places also.
Please look into this urgently.
cc @parasharrajat

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You should rather modify the ReceiptUtils.getThumbnailAndImageURIs function ig.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this image passes to ReportActionItemImage

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh, I see. The resolution of this problem is more straightforward than anticipated.
@pradeepmdk @parasharrajat Allow me to fix this in #26452

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ya because #26452 you are splitting the sourcePropTypes here. so we need to update to allow numbers on native.js.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

IMO, it is not a bug deal. Image is a custom component and it is always better to keep the same prop format. I would prefer if we were just able to use {uri: anything} on all platforms. Less confusing.

I was going to suggest limiting the prop format to this only but that requires a bigger refactor which is unrelated to both problems we are solving(this & #26452). In short, no passing of direct require reference.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@parasharrajat I also prefer this.

// eslint-disable-next-line react/forbid-prop-types
headers: PropTypes.object,
}),
Expand Down
5 changes: 4 additions & 1 deletion src/components/Image/index.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,10 @@ function Image(props) {
const {source, isAuthTokenRequired, session, ...rest} = props;

let imageSource = source;
if (typeof source !== 'number' && isAuthTokenRequired) {
if (source && source.uri && typeof source.uri === 'number') {
pradeepmdk marked this conversation as resolved.
Show resolved Hide resolved
imageSource = source.uri;
Copy link
Contributor

@hayata-suenaga hayata-suenaga Sep 3, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@parasharrajat

could you test other Image components used in App to make sure this doesn't break other parts of App? 🙇 🙇 🙇

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, for sure.

}
if (typeof imageSource !== 'number' && isAuthTokenRequired) {
const authToken = lodashGet(props, 'session.encryptedAuthToken', null);
imageSource = {
...source,
Expand Down
2 changes: 1 addition & 1 deletion src/components/ReportActionItem/MoneyRequestPreview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -223,7 +223,7 @@ function MoneyRequestPreview(props) {
<View style={[styles.moneyRequestPreviewBox, isScanning ? styles.reportPreviewBoxHoverBorder : undefined, ...props.containerStyles]}>
{hasReceipt && (
<ReportActionItemImages
images={[ReceiptUtils.getThumbnailAndImageURIs(props.transaction.receipt.source, props.transaction.filename)]}
images={[ReceiptUtils.getThumbnailAndImageURIs(props.transaction.receipt.source, props.transaction.filename || '')]}
isHovered={isScanning}
/>
)}
Expand Down
4 changes: 2 additions & 2 deletions src/components/ReportActionItem/ReportActionItemImage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@ const propTypes = {
/** thumbnail URI for the image */
thumbnail: PropTypes.string,

/** URI for the image */
image: PropTypes.string.isRequired,
/** URI for the image or local numeric reference for the image */
image: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,

/** whether or not to enable the image preview modal */
enablePreviewModal: PropTypes.bool,
Expand Down
2 changes: 1 addition & 1 deletion src/components/ReportActionItem/ReportPreview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -179,7 +179,7 @@ function ReportPreview(props) {
<View style={[styles.reportPreviewBox, props.isHovered || isScanning ? styles.reportPreviewBoxHoverBorder : undefined]}>
{hasReceipts && (
<ReportActionItemImages
images={_.map(lastThreeTransactionsWithReceipts, ({receipt, filename}) => ReceiptUtils.getThumbnailAndImageURIs(receipt.source, filename))}
images={_.map(lastThreeTransactionsWithReceipts, ({receipt, filename}) => ReceiptUtils.getThumbnailAndImageURIs(receipt.source, filename || ''))}
size={3}
total={transactionsWithReceipts.length}
isHovered={props.isHovered || isScanning}
Expand Down