[HOLD for payment 2024-05-06] [$250] Quick action - Group chat name and avatar does not update unless the page is refreshed

[izarutskaya]

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.63-5
Reproducible in staging?: Y
Reproducible in production?: No, new feature
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: Applause-Internal team

Action Performed:

1. Go to staging.new.expensify.com
2. Go to FAB > Start chat.
3. Create a group chat.
4. Split expense in the group chat.
5. Click on the chat header.
6. Go to Settings > Name.
7. Change the group chat name.
8. Also change the group chat avatar.
9. Click FAB.
10. Hover over the group chat avatar.

Expected Result:

The group chat under Quick action in FAB will update to show the latest avatar and name.

Actual Result:

The group chat under Quick action in FAB does not show the latest avatar and name (in the tooltip) unless the page is refreshed.

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

Bug6454364_1713485468784.20240419_080236.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0158c8e7015a29644e
• Upwork Job ID: 1783268294358458368
• Last Price Increase: 2024-04-24
• Automatic offers:
• shubham1206agra | Reviewer | 0
• bernhardoj | Contributor | 0

[melvin-bot]

Triggered auto assignment to @madmax330 (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[melvin-bot]

Triggered auto assignment to @isabelastisser (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.

[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.

[izarutskaya]

@isabelastisser 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.

[izarutskaya]

We think this issue might be related to the #collect project.

[ZhenjaHorbach]

Proposal

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

Quick action - Group chat name and avatar does not update unless the page is refreshed

What is the root cause of that problem?

The main problem with issue is that we can' get actual ActionReport because we use useMemo
As a result, we are unable to update the data

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

To fix this issue we can refactor this component and use allReports directly to always have actual information from report

const quickActionReport: OnyxEntry<OnyxTypes.Report> = useMemo(
    () => (quickAction ? allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${quickAction.chatReportID}`] : null),
    [allReports, quickAction],
);

App/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx

Line 150 in bec1c8e

const quickActionReport: OnyxEntry<OnyxTypes.Report> = useMemo(() => (quickAction ? ReportUtils.getReport(quickAction.chatReportID) : null), [quickAction]);

For optimisation we can use selector just like we do for allPolicies on this screen

App/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx

Lines 73 to 81 in bec1c8e

	const policySelector = (policy: OnyxEntry<OnyxTypes.Policy>): PolicySelector =>
	(policy && {
	type: policy.type,
	role: policy.role,
	isPolicyExpenseChatEnabled: policy.isPolicyExpenseChatEnabled,
	pendingAction: policy.pendingAction,
	avatar: policy.avatar,
	name: policy.name,
	}) as PolicySelector;

What alternative solutions did you explore? (Optional)

As alternative we don't have to use useMemo