[$250] Task – Assignee avatar is default for task creator when is assigned by user B

IuliiaHerets commented 1 week ago

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: v9.0.32-0 Reproducible in staging?: Y Reproducible in production?: Y If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/4945911 Email or phone of affected tester (no customers): applausetester+jp_e_category_2@applause.expensifail.com Issue reported by: Applause Internal Team

Action Performed:

Go to https://staging.new.expensify.com/
Log in as user A
Navigate to room chat where user B with custom avatar is a member
Create a task without assignee and stay in the room chat, not open task details
Log in as user B on another tab/device and open this task it the room
As user B assign task to me
Observe the room chat for user A (task creator)

Expected Result:

Task assignee avatar is custom avatar in the room chat

Actual Result:

Task assignee avatar is default in room chat. The same when create a task in a group chat and 1:1 chat

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

https://github.com/user-attachments/assets/c0fb533c-3e01-402d-ac98-7dfd590a18ca

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~021835623974546752724
Upwork Job ID: 1835623974546752724
Last Price Increase: 2024-09-16
Automatic offers:

mkhutornyi | Reviewer | 104031600
FitseTLT | Contributor | 104031601

Issue Owner

Current Issue Owner: @mkhutornyi

melvin-bot[bot] commented 1 week ago

Triggered auto assignment to @sonialiap (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

IuliiaHerets commented 1 week ago

@sonialiap 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

FitseTLT commented 1 week ago

Edited by proposal-police: This proposal was edited at 2024-09-11 13:13:15 UTC.

Proposal

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

Task – Assignee avatar is default for task creator when is assigned by user B

What is the root cause of that problem?

We are using selector to get the avatar here https://github.com/Expensify/App/blob/fc33ac1ac35248ecf888bb8d4e8e04b5e72cc56e/src/components/ReportActionItem/TaskPreview.tsx#L77 because the taskAssigneeAccountID didn't exist initially (0) when the selector was defined on the first render, after the task is assigned the selector will still fetch for the prev taskAssigneeAccountID 0 because selector will determined on the first render

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

We should instead use

const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
    const avatar = personalDetails?.[taskAssigneeAccountID]?.avatar;

What alternative solutions did you explore? (Optional)

ChavdaSachin commented 1 week ago

Proposal

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

default avatar loads instead task assignee avatar when other user selects asignee.

What is the root cause of that problem?

We are using selector method to get assignee avatar here. https://github.com/Expensify/App/blob/855b3aec7f1515c68df0e9db42a47cd0f44fccec/src/components/ReportActionItem/TaskPreview.tsx#L77 It seems useOnyx is not triggered during renders, could be useOnyx bug could be intentional functionality of useOnyx hook.
So, it displays the default avatar which was fetched when there was no assignee. (I tried console logging inside useOnyx and verified it's not triggered between renders.)

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

Instead of directly fetching avatar with useOnyx we could instead use usePersonalDetails hook to fetch personalDetails and then fetch avatar from personalDetails and use FallbackAvatar along.
```
const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT;
const avatar = personalDetails?.[taskAssigneeAccountID]?.avatar || FallbackAvatar;
```
https://github.com/Expensify/App/blob/855b3aec7f1515c68df0e9db42a47cd0f44fccec/src/components/ReportActionItem/TaskPreview.tsx#L77

Result

https://github.com/user-attachments/assets/b33745f0-c4b9-4f49-98c8-571ae3e2244b

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

melvin-bot[bot] commented 2 days ago

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

melvin-bot[bot] commented 2 days ago

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

Kalydosos commented 1 day ago

Proposal

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

A task assignee custom avatar displays as default avatar in room/group/1:1 chat

What is the root cause of that problem?

the use of useOnyx with a selector and hooked on the key ONYXKEYS.PERSONAL_DETAILS_LIST is the issue. When a task is unassigned, the assignee account ID is 0 and the selector at its first run will retrieve an avatar corresponding to the default avatar

"0": { "accountID": 0, "avatar": "https://.../avatars/default-avatar_1.png", "firstName": "", "lastName": "" }

When the task is self assigned by B, the selector dont rerun because useOnyx with a selector will only update the avatar value only if the key’s data changes, which does not happen. So the avatar is not rerendered to display the custom avatar based on the assignee account ID.

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

const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT; const assigneeAvatar = taskAssigneeAccountID > 0 ? personalDetails[taskAssigneeAccountID]?.avatar:Expensicons.FallbackAvatar; const htmlForTaskPreview =<comment>${taskTitle}</comment>;

and then

{taskAssigneeAccountID > 0 && ( <Avatar containerStyles={[styles.mr2, styles.alignSelfCenter, isTaskCompleted ? styles.opacitySemiTransparent : undefined]} source={assigneeAvatar} size={CONST.AVATAR_SIZE.SMALL} avatarID={taskAssigneeAccountID} type={CONST.ICON_TYPE_AVATAR} /> )}

RESULT

https://github.com/user-attachments/assets/3214dcff-d126-4413-a082-e7652e52b244

What alternative solutions did you explore? (Optional)

we could define a new html tag show-avatar as this bug is related to https://github.com/Expensify/App/issues/48409 if we wish to keep the "spirit" of rendering the tasks previews as html through react-native-render-html

melvin-bot[bot] commented 1 day ago

📣 @Kalydosos! 📣 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:

Make sure you've read and understood the contributing guidelines.
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.
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.
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>
```

Kalydosos commented 1 day ago

Contributor details Your Expensify account email: rnel2@hotmail.com Upwork Profile Link: https://www.upwork.com/freelancers/~0182b95dfd9db2cbea

melvin-bot[bot] commented 1 day ago

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

mkhutornyi commented 10 hours ago

@FitseTLT's proposal looks good to me. usePersonalDetails is better but this is something that can be addressed in PR stage. 🎀👀🎀 C+ reviewed

melvin-bot[bot] commented 10 hours ago

Triggered auto assignment to @francoisl, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

melvin-bot[bot] commented 4 hours ago

📣 @mkhutornyi 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link Upwork job

melvin-bot[bot] commented 4 hours ago

📣 @FitseTLT 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link Upwork job Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻 Keep in mind: Code of Conduct | Contributing 📖

Expensify / App