[HOLD for payment 2022-07-15] [$250] Web - Request money - Five most recent chats aren't shown correctly

[kbecciv]

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

---

Action Performed:

Pre-Condition: Have a couple/several chats already open with other accounts

1. Access http://staging.new.expensify.com
2. Log in to a high traffic account
3. Click on the green "Plus" icon on the right side of chat history
4. Click on "Request Money"
5. Enter any amount in Big Number Pad (BNP) and any currency (For example: 1 Real)
6. Click green "Next" button

Expected Result:

The user expects to see five most recent chats appear under the Recents header (Excluding group chats and concierge chat)

Actual Result:

The user sees five chats in this section, however they are not the five most recent chats. There is one chat that should not be placed within this list

Workaround:

Unknown

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: 1.1.44.1

Reproducible in staging?: Yes

Reproducible in production?: Yes

Email or phone of affected tester: applausetester+ebezerra@applause.expensifail.com

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

https://user-images.githubusercontent.com/93399543/158920581-9767c787-aed1-4e4e-89ff-00372749e044.mp4

https://user-images.githubusercontent.com/93399543/158920663-5375bb46-2fba-4e73-8bdd-3ee0d82f319e.mp4

Expensify/Expensify Issue URL:

Issue reported by: Applause

Slack conversation:

View all open jobs on GitHub

[melvin-bot[bot]]

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

[melvin-bot[bot]]

Triggered auto assignment to @dylanexpensify (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[dylanexpensify]

Internal: https://www.upwork.com/ab/applicants/1505963684490752000/job-details External: https://www.upwork.com/jobs/~01916b2d3a4c68ba01

[melvin-bot[bot]]

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

[MelvinBot]

📣 @parasharrajat You have been assigned to this job by @melvin-bot[bot]! Please apply to this job in Upwork 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 📖

[melvin-bot[bot]]

Current assignee @roryabraham is eligible for the Exported assigner, not assigning anyone new.

[metehanozyurt]

Proposal

Cause

IOUParticipantsRequest component calls getNewChatOptions from OptionsListUtils, and it calls getOptions function which sorts contacts by lastVisitedTimestamp by default.

Solution

We should pass sortByLastMessageTimestamp parameter through these functions:

• getNewChatOptions
• getSearchOptions (This will change order of the new chat search order also, if this is wanted)
• getOptions (Already takes sortByLastMessageTimestamp as a parameter)

To do this we should take sortByLastMessageTimestamp as a parameter and pass it to the getOptions in the following functions in OptionsListUtils:

function getSearchOptions(  
    reports,  
    personalDetails,  
    searchValue = '',  
    betas,  
    sortByLastMessageTimestamp = false,  
) {  
    return getOptions(reports, personalDetails, 0, {  
        betas,  
        searchValue: searchValue.trim(),  
        includeRecentReports: true,  
        includeMultipleParticipantReports: true,  
        maxRecentReportsToShow: 0, // Unlimited  
  prioritizePinnedReports: false,  
        prioritizeDefaultRoomsInSearch: false,  
        sortByReportTypeInSearch: true,  
        showChatPreviewLine: true,  
        showReportsWithNoComments: true,  
        includePersonalDetails: true,  
        sortByLastMessageTimestamp: !!sortByLastMessageTimestamp,  
        forcePolicyNamePreview: true,  
        prioritizeIOUDebts: false,  
    });  
}

// ...

function getNewChatOptions(  
    reports,  
    personalDetails,  
    betas = [],  
    searchValue = '',  
    selectedOptions = [],  
    excludeLogins = [],  
    sortByLastMessageTimestamp = false,  
) {  
    return getOptions(reports, personalDetails, 0, {  
        betas,  
        searchValue: searchValue.trim(),  
        selectedOptions,  
        excludeDefaultRooms: true,  
        includeRecentReports: true,  
        includePersonalDetails: true,  
        maxRecentReportsToShow: 5,  
        excludeLogins,  
        sortByLastMessageTimestamp,  
    });  
}

We should update OptionsListUtils.getNewChatOptions function call with the new parameter in the constructor of IOUParticipantsRequest component:

constructor(props) {  
    super(props);  

    this.addSingleParticipant = this.addSingleParticipant.bind(this);  

    const {  
        recentReports,  
        personalDetails,  
        userToInvite,  
    } = OptionsListUtils.getNewChatOptions(  
        props.reports,  
        props.personalDetails,  
        props.betas,  
        '',  
        [],  
        CONST.EXPENSIFY_EMAILS,  
        true, // New parameter
    );  

    this.state = {  
        recentReports,  
        personalDetails,  
        userToInvite,  
        searchValue: '',  
    };  
}

Before ;

https://user-images.githubusercontent.com/6093207/160303729-c14ee68a-ed8d-4a43-b116-8d35732ae693.mp4

After Fix issue ;

https://user-images.githubusercontent.com/6093207/160303743-3ce8f40c-03f3-4691-944b-0055a13a8bff.mp4

[parasharrajat]

@metehanozyurt's proposal looks good to me.

cc: @roryabraham

Rory, Do we need the same behavior everywhere where we are showing newChat Contacts?

If so, we will not have to add another param to OptionsListUtils.getNewChatOptions. It will just modify the call to getOptions in the above proposal.

:ribbon: :eyes: :ribbon: C+ reviewed

[roryabraham]

@metehanozyurt's proposal looks good, but I am unwilling to approve any proposal or PR that touches OptionsListUtils without also creating unit tests to cover the change.

@metehanozyurt If you agree to also create unit tests, 👍 this message and I will assign you the job.

[parasharrajat]

Oh, yeah. I was thinking the same just forgot to ask here.

[dylanexpensify]

Checking in, seems we will have someone for the job @parasharrajat? Just checking in case we need to double the price

[parasharrajat]

No need to double. we are good here.

[metehanozyurt]

Hi @parasharrajat and @roryabraham. I add some tests to OptionsListUtilsTest. Hope you like it.

I'm sorry for being late. I wrote before, but I was very nervous because the results I wanted did not come out. Then I noticed that the 'lastMessageTimestamp' values ​​were entered the same value in test file. Then i check the other results too. I wrote test for 'getSearchOptions' and 'getNewChatOptions' functions.

here edited OptionsListUtilsTest file

https://github.com/metehanozyurt/testFile/blob/main/OptionsListUtilsTest.js

I know this issue title about 'Request money' issue but when it will fixed 'Split Money' , 'New Chat' and 'New Group' isues can came up again.

When we change this file (IOUParticipantsRequest), other files will sort differently. IOUParticipantsSplit, NewChatPage,

i can set the parameter if you want.

before ;

https://user-images.githubusercontent.com/6093207/161388237-31a0f0d1-ed5f-46d9-b8e1-797a5fb66c91.mp4

after

https://user-images.githubusercontent.com/6093207/161388479-1bc184a1-fd89-484e-9a0c-02480fe41a04.mp4

[dylanexpensify]

@parasharrajat still good with where we are here on price?

[parasharrajat]

@dylanexpensify If we are good to hire the selected proposal then I don't think a price increase is needed.

[parasharrajat]

@metehanozyurt I didn't understand this post https://github.com/Expensify/App/issues/8220#issuecomment-1086657856. Could you please try to rephrase it?

Are you trying to say that, your proposed solution does not have desired results?

[metehanozyurt]

No my proposal can fix the problem @parasharrajat. I wanted to say some other pages need to change too for sorting about recent chats. I can do it when i fix the issue if you like no problem for me. I just wanted to avoid possible new issues ❤ .

[parasharrajat]

Ok. Thanks for the clarification. Let's wait for Rory's comment. If you need to change other parts of code/pages unrelated to this issue as increased scope, we might issue a bonus for doing that.

[roryabraham]

@metehanozyurt I think your proposal looks good, and I agree the other pages (IOUParticipantsSplit, NewChatPage, etc...) should also sort by timestamp. I did not review the unit tests, but we can always adjust unit tests in the PR. We want them to be thorough but also readable.

I would be happy to issue a $250 bonus for the increased scope, so long as unit tests thoroughly cover all new and old cases.

[MelvinBot]

📣 @metehanozyurt You have been assigned to this job by @roryabraham! Please apply to this job in Upwork 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 📖

[parasharrajat]

I am not sure of how the results are sorted under the recent and contacts section on the various pages of the app.

Can someone confirm the sort order of the following pages? cc: @Expensify/engineering

1. New Chat. (recent and Contacts)
2. New Group. (recent and Contacts)
3. Search Page.
4. Workspace Invite Member page.
5. Request Money Participant page.
6. Send Money Participant page.

[parasharrajat]

https://expensify.slack.com/archives/C01GTK53T8Q/p1649783308226609

[metehanozyurt]

Thank you @parasharrajat if pass true params Search Page works fine. I'm confused because Workspace Invite Member page not using resent chats and not using reports too.

I'm working on sorting in alphabetical order solution on Contacts 2 days. I read your message and slack channel 🙏 .

[parasharrajat]

So Others seem to agree on the following order.

1. Contacts - sorted by alphabetical order
2. Recent - sorted by recently used

For pages like search page, workspace invite, request money, and send money Sorted by recently used

@metehanozyurt Let me know if you have any questions. Otherwise, please update the PR to follow the above order.

[metehanozyurt]

Thank you so much all your help @parasharrajat 🙏 . I have come to the end of the study according to the new updates. I will check the tests and make a new commit .

[parasharrajat]

Thank you.

Hint: You can always create helper methods in OptionListUtils if you want to get options for a different configuration from the rest of the pages.

[metehanozyurt]

I just made my new commit @parasharrajat . I will extending test cases. I will shoot videos for all platforms now for all cases. Thank you again 🙏 .

I edit test steps and make web video. I will continue but I think some problem on servers I report this situation on slack channel.

[dylanexpensify]

any update here @metehanozyurt

[metehanozyurt]

I made the PR. I'm waiting for my PR to be reviewed or update requests now. Thank you 🙏

[dylanexpensify]

I'm heading on parental leave so reassigning! Thank you to whoever gets assigned this! ❤️

[melvin-bot[bot]]

Triggered auto assignment to @NicMendonca (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[metehanozyurt]

Congratulations @dylanexpensify ❤ . I wish your baby a happy, peaceful and healthy life ✨🎂🎉🎶 .

[NicMendonca]

PR in review

[mvtglobally]

Issue not reproducible during KI retests. (First week)

[NicMendonca]

Latest PR update here

[NicMendonca]

PR still open

[NicMendonca]

^^ same update

[roryabraham]

PR was just merged today

[mvtglobally]

Issue not reproducible during KI retests. (Second week)

[NicMendonca]

Going ooo to re-assigning

[melvin-bot[bot]]

Triggered auto assignment to @JmillsExpensify (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[NicMendonca]

deployed to staging, so will be ready for payment soon

[JmillsExpensify]

Great thanks! I'll handle the payment once we clear the regression period.

[JmillsExpensify]

This issue might be affected by the late production deploy. PR still isn't showing we're in the regression period.

[melvin-bot[bot]]

The solution for this issue has been :rocket: deployed to production :rocket: in version 1.1.79-17 and is now subject to a 7-day regression period :calendar:. Here is the list of pull requests that resolve this issue:

• https://github.com/Expensify/App/pull/8549

If no regressions arise, payment will be issued on 2022-07-15. :confetti_ball:

[mvtglobally]

Issue not reproducible during KI retests. (Third week)

[JmillsExpensify]

Almost through the regression period following the production deploy last week.

[roryabraham]

Looks like we're just awaiting payment here

[mvtglobally]

Issue not reproducible during KI retests. (4th week)

[JmillsExpensify]

@roryabraham yes indeed. I just took a look at the Upwork, and we actually still need to hire contributors. I'm going to jump in and send offers now, such that when I'm up tomorrow contracts will be accepted and I can issue payments.