[HOLD for payment 2024-01-17] Profile - Something went wrong error when trying to open a room/profile picture

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 1.4.22-0
Reproducible in staging?: Y
Reproducible in production?: N
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:

Action Performed:

1. Open Expensify app or navigate to staging.new.expensify.com
2. Go to any room or profile details page
3. Open room or profile picture

Expected Result:

The app should not crash when attempting to open a profile or room picture

Actual Result:

The app crashes when attempting to open a profile or room picture
Uh-oh, something went wrong!
If the problem persists, reach out to concierge@expensify.com

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6332745_1704422110090.Crash_-_Desktop_app.mp4

logs.txt

View all open jobs on GitHub

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[melvin-bot]

Triggered auto assignment to @Gonals (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[situchan]

Regression from #33586

[abzokhattab]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Something went wrong error when trying to open a room/profile picture

What is the root cause of that problem?

This issue appears to be a regression introduced by the changes in PR #33403. The specific problem is rooted in the useEffect, which updates the source state whenever props.source changes.

App/src/components/AttachmentModal.js

Lines 361 to 363 in 7ae1ec7

	useEffect(() => {
	setSource(props.source);
	}, [props.source]);

The crux of the issue lies in the way setSource handles its input. When the default avatar is used, props.source is a function. In such cases, setSource, when receiving a function, treats it as a functional update rather than a direct assignment. A functional update takes the previous state as an argument and expects a return value to be the new state, leading to executing the default avatar function instead of assigning it to the source state.

Here's a print of the props.source and the source you can notice the difference :

What changes do you think we should make in order to solve the problem?

we need to change this

        setSource(props.source);

to

setSource(() => props.source);

and of course we can do the same in other places that update the source

[dukenv0307]

Proposal

Please re-state the problem that we are trying to solve in this issue.

The app crashes when attempting to open a profile or room picture
Uh-oh, something went wrong!
If the problem persists, reach out to concierge@expensify.com

What is the root cause of that problem?

Coming from this PR #33586, we priority the source state here

App/src/components/AttachmentModal.js

Line 369 in 7ae1ec7

const sourceForAttachmentView = source || props.source;

And we set the source state wrong here

App/src/components/AttachmentModal.js

Line 129 in 7ae1ec7

const [source, setSource] = useState(props.source);

And here by assigning a function to a state. So it execute this function instead of assign the current function

App/src/components/AttachmentModal.js

Line 362 in 7ae1ec7

setSource(props.source);

What changes do you think we should make in order to solve the problem?

We should update here to const [source, setSource] = useState(() => props.source)

App/src/components/AttachmentModal.js

Line 129 in 7ae1ec7

const [source, setSource] = useState(props.source);

And here to setSource(() => props.source)

App/src/components/AttachmentModal.js

Line 362 in 7ae1ec7

setSource(props.source);

What alternative solutions did you explore? (Optional)

NA