[$500] Workspace - WS profile image revert to previous avatar everytime on uploading a new avatar

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 1.4.57-2 Reproducible in staging?: Y Reproducible in production?: Y If this was caught during regression testing, add the test name, ID and link from TestRail: N/A Email or phone of affected tester (no customers): [email protected] Issue reported by: Applause - Internal Team

Action Performed:

1. Launch New Expensify app & login
2. Go to settings >> Workspaces >> select any WS with no profile image
3. Select Profile
4. Tap on the avatar icon >> Upload photo >> Choose image & save
5. Repeat step 4 few times uploading new image everytime

Expected Result:

WS profile image should display the correct saved avatar & not revert to previous image everytime on uploading new avatar

Actual Result:

WS profile image revert to previous avatar everytime on uploading a new avatar Issue happens in both online & offline modes

Workaround:

Unknown

Platforms:

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

• [x] Android: Native
• [ ] Android: mWeb Chrome
• [ ] iOS: Native
• [ ] iOS: mWeb Safari
• [ ] MacOS: Chrome / Safari
• [ ] MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

https://github.com/Expensify/App/assets/78819774/9597021b-4940-4f20-aa0f-5c981e9489bb

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01fc1549a219183fea
• Upwork Job ID: 1773417569304784896
• Last Price Increase: 2024-03-28

[melvin-bot[bot]]

Triggered auto assignment to @puneetlath (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[lanitochka17]

@puneetlath FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[melvin-bot[bot]]

Job added to Upwork: https://www.upwork.com/jobs/~01fc1549a219183fea

[melvin-bot[bot]]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @s77rt (External)

[Valo21]

Proposal

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

There is a persistent reversion of the profile image to a previous avatar every time a new avatar is uploaded.

What is the root cause of that problem?

It is a common issue of react native when catching images. In the AvatarWithImagePicker component the source url is being cached by react native so it will load a previous version of it after it is uploaded. https://github.com/Expensify/App/blob/5a8cb7fb94eeb16cfad5407dd9495be1f0a921b9/src/components/AvatarWithImagePicker.tsx#L318-L331

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

The url of the image should be modified adding query params to break the caching so it will load the new version after is uploaded

[melvin-bot[bot]]

📣 @Valo21! 📣 Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork. Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details. Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[Valo21]

Contributor details Your Expensify account email: [email protected] Upwork Profile Link: https://www.upwork.com/freelancers/~01e421ea2282a582ee?mp_source=share

[melvin-bot[bot]]

⚠️ Missing/invalid email or upwork profile link. Please make sure you add both your Expensify email and Upwork profile link in the format specified.

[s77rt]

I'm not able to reproduce but I'm seeing a different bug where the image is not cut properly

https://github.com/Expensify/App/assets/16493223/f45cdd30-dbf7-4f1b-809f-7152eed03102

[s77rt]

@Valo21 Thanks for the proposal. Were you able to reproduce the bug? And is the same bug present throughout the app e.g. on the profile page?

[Valo21]

@s77rt Yeah, i tried on the app from the play store, i have problems installing the dependencies to run the repository locally. The bug was the same from the video and i didn't have any problems cropping the image. I didn't see the bug in other pages. Anyways its a little tricky because it happens sometimes and others don't, so it is possible that is happening in other images, it happend to me time ago while i was practicing with react native.

[s77rt]

@Valo21 Can you elaborate on how we will add the query param to new images without breaking the cache functionality?

[Valo21]

@s77rt the query param could be added in the source attribute of <Avatar/> inside the AvatarWithImagePicker component. So the image will be refreshed every time that component loads. It is only adding a random string as a query param like using Date.now() so react will recognize it as a diferent version of the image. It could be applied only to components that are gonna be updated like in this case. Also instead of using the query param, the image cache could be cleared before the image is uploaded. I think there is a function for something like that: https://github.com/Expensify/App/blob/14ff9445d22bd92d0645abd456ac805cedc06c28/src/libs/actions/Policy.ts#L1495-L1503 I'm not sure about this anyways, correct me if i am wrong.

[s77rt]

@Valo21 That will break the cache functionality i.e. we will always download the image even if it didn't change

[s77rt]

@Valo21 The function you linked is unrelated to cache

[melvin-bot[bot]]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[s77rt]

Still looking for proposals

[melvin-bot[bot]]

@puneetlath, @s77rt Whoops! This issue is 2 days overdue. Let's get this updated quick!

[s77rt]

Still looking for proposals...

[melvin-bot[bot]]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[melvin-bot[bot]]

@puneetlath @s77rt this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[s77rt]

Discussed 1:1 with @puneetlath We will apply a backend fix fixing the DeleteWorkspaceAvatar command (the response is missing to clear the avatar field) That alone could fix the issue

[s77rt]

Not overdue ^

[melvin-bot[bot]]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[melvin-bot[bot]]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[melvin-bot[bot]]

@puneetlath @s77rt this issue is now 4 weeks old, please consider:

• Finding a contributor to fix the bug
• Closing the issue if BZ has been unable to add the issue to a VIP or Wave project
• If you have any questions, don't hesitate to start a discussion in #expensify-open-source

Thanks!

[s77rt]

@puneetlath Did you get a chance to look into the BE fix?

[puneetlath]

I haven't had a chance yet. It's on my list, but lots of higher priority stuff ahead of it.

[melvin-bot[bot]]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[melvin-bot[bot]]

Current assignee @s77rt is eligible for the Internal assigner, not assigning anyone new.