[Hold for payment 2024-10-04] [$250] Task – Assignee avatar is default for task creator when is assigned by user B

[IuliiaHerets]

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: 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): [email protected]
Issue reported by: Applause Internal Team

Action Performed:

1. Go to https://staging.new.expensify.com/

2. Log in as user A

3. Navigate to room chat where user B with custom avatar is a member

4. Create a task without assignee and stay in the room chat, not open task details

5. Log in as user B on another tab/device and open this task it the room

6. As user B assign task to me

7. 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
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6599496_1726024692821.Avatar.mp4

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

[melvin-bot]

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]

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

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

App/src/components/ReportActionItem/TaskPreview.tsx

Line 77 in fc33ac1

const [avatar] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {selector: (personalDetails) => personalDetails?.[taskAssigneeAccountID]?.avatar});

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]

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.
  

  App/src/components/ReportActionItem/TaskPreview.tsx

  Line 77 in 855b3ae

  const [avatar] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {selector: (personalDetails) => personalDetails?.[taskAssigneeAccountID]?.avatar});

  
  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;

App/src/components/ReportActionItem/TaskPreview.tsx

Line 77 in 855b3ae

const [avatar] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {selector: (personalDetails) => personalDetails?.[taskAssigneeAccountID]?.avatar});

Result

Screen.Recording.mov

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]

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

[melvin-bot]

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

[Kalydosos]

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

bug_48990_video.mp4

What alternative solutions did you explore? (Optional)

• we could define a new html tag show-avatar as this bug is related to [$250] [CVP] Replace the mention in the task preview with the assigned user's avatar #48409 if we wish to keep the "spirit" of rendering the tasks previews as html through react-native-render-html

[melvin-bot]

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

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>

[Kalydosos]

Contributor details
Your Expensify account email: [email protected]
Upwork Profile Link: https://www.upwork.com/freelancers/~0182b95dfd9db2cbea

[melvin-bot]

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

[mkhutornyi]

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

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

[melvin-bot]

📣 @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]

📣 @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 📖

[FitseTLT]

@sonialiap payment is due by tomorrow 👍

[sonialiap]

@FitseTLT Thanks for the heads up 😊

[sonialiap]

Payment summary:

• @FitseTLT $250 - paid in upwork ✔️
• @mkhutornyi $250 - paid in upwork ✔️

[sonialiap]

caught during regression testing, no need for new test https://expensify.testrail.io/index.php?/tests/view/4945911