Fix: Request money - Five most recent chats aren't shown correctly #8549

metehanozyurt · 2022-04-07T22:22:14Z

Details

getNewChatOptions and getSearchOptions functions changed for passing sortByLastMessageTimestamp parameter. NewChatPage.js , OUParticipantsRequest.js , IOUParticipantsSplit.js files changed. "New chat" , "New group" , "Send money" , "Request money" , "Split bill" pages recents chat areas fixed.

Fixed Issues

$ #8220

Tests

Open Expensify App.
Click left side chat area randomly
Click plus button and click "Request money". Fill number area then click "next"
Request money page Recents section should be ordered last message time ,Contacts section should be sorted by alphabetical order
Click plus button and click "New chat".
New chat page Recents section should be ordered last message time ,Contacts section should be sorted by alphabetical order
Click plus button and click "Send money". Fill number area then click "next"
Send money page Recents section should be ordered last message time ,Contacts section should be sorted by alphabetical order
Click plus button and click "Split bill". Fill number area then click "next"
Split bill page Recents section should be ordered last message time ,Contacts section should be sorted by alphabetical order
Click plus button and click "New group".
New group page Recents section should be ordered last message time ,Contacts section should be sorted by alphabetical order
Click profile button, Click workspaces, click manage members, click invite button. verify persons not sorted by alphabetical order

example reproduce issue video before fix:

20220408_003702.mp4

test video:

20220408_003925.1.mp4

Verify that no errors appear in the JS console

PR Review Checklist

Contributor (PR Author) Checklist

PR Reviewer Checklist

QA Steps

Open Expensify App.
Click left side chat area randomly
Click plus button and click "Request money". Fill number area then click "next"
Request money page Recents section should be ordered last message time ,Contacts section should be sorted by alphabetical order
Click plus button and click "New chat".
New chat page Recents section should be ordered last message time ,Contacts section should be sorted by alphabetical order
Click plus button and click "Send money". Fill number area then click "next"
Send money page Recents section should be ordered last message time ,Contacts section should be sorted by alphabetical order
Click plus button and click "Split bill". Fill number area then click "next"
Split bill page Recents section should be ordered last message time ,Contacts section should be sorted by alphabetical order
Click plus button and click "New group".
New group page Recents section should be ordered last message time ,Contacts section should be sorted by alphabetical order
Click profile button, Click workspaces, click manage members, click invite button. verify persons not sorted by alphabetical order

Screenshots

Web

five-recent-Web-Screen-Recording-2022-06-12-at-13.04.21.mp4

Mobile Web

five-recent-ios-web-Screen-Recording-2022-06-12-at-13.27.27.mp4

five-recent-android-web-Screen-Recording-2022-06-12-at-13.37.41.mp4

Desktop

five-recent-desktop-Screen-Recording-2022-06-12-at-13.20.30.mp4

iOS

five-recent-ios-native-Screen-Recording-2022-06-12-at-13.24.52.mp4

Android

five-recent-android-native-Screen-Recording-2022-06-12-at-13.33.16.mp4

…p now.

marcaaron · 2022-04-08T00:01:49Z

Just leaving a quick comment, but I think it would be easier to default sortByLastMessageTimestamp to true for getNewChatOptions() and then specifically pass false for the "workspace members" usages if we want those not to be sorted.

parasharrajat

We don't have to pass the config options from the callable location. The whole purpose of creating getNewChatOptions, getSearchOptions functions was to encapsulate the configuration and use it as it is.

Secondly, it seems every function is setting that option to true. SO set it to true by default value and then should be enough. Then explicitly set it false where needed.

metehanozyurt · 2022-04-09T08:26:39Z

Thank you so much @parasharrajat , @marcaaron . I will immediately update commit and test file for changes 🙏.

parasharrajat · 2022-04-11T09:45:38Z

Need to confirm the sort order for various pages. Thanks for the patience.

parasharrajat · 2022-04-25T11:41:37Z

@metehanozyurt Could you please merge the main so that I can test it?

metehanozyurt · 2022-04-25T17:38:53Z

Now I merged the conflict problem solved. So Sorry for falling behind the main.

parasharrajat · 2022-04-27T15:59:40Z

I will review this in some time.

parasharrajat

let me know when ready so that I can test.

parasharrajat · 2022-04-29T15:16:45Z

src/pages/SearchPage.js

@@ -65,6 +65,7 @@ class SearchPage extends Component {
            props.personalDetails,
            '',
            props.betas,
+            true,


As pointed earlier, we should not expose the config option outside. Instead of doing this create another wrapper method like OptionsListUtils#getSearchOptions which sets this flag to true and then use that method.

After new updates all places using functions started sending true by default (getSearchOptions & getNewChatOptions). Now we dont need wrapper method. Because If I write a new function, the old one will not be used this time. I'm making the changes now as you said. I'm removing the parameter pass support. Thank you.
After this i will update PR videos immediately.

Sorry, But I didn't understand. Could you please rephrase this?

getSearchOptions function only used on SearchPage. That's why I fixed the mistake I made by getting extra config. if i wrote another function the old function would be un used.

parasharrajat · 2022-04-29T15:19:13Z

tests/unit/OptionsListUtilsTest.js

@@ -295,12 +295,44 @@ describe('OptionsListUtils', () => {
        expect(results.recentReports[0].text).toBe('The Flash');
    });

-    it('getNewChatOptions()', () => {
+    it('getSearchOptions() with message timeStampOrder', () => {


When you will do the above change, here new test will be created for each function including that new function.

I will update OptionsListUtilsTest test and removing condition timeStampOrder (true-false). Thank you.

…ate test file

metehanozyurt · 2022-05-01T10:30:40Z

#8549 (comment)
I did not write a new wrapper method for the reason I mentioned here. I reverted the parameters it received.
I updated PR videos and checked results. I added lines to check the alphabet to the steps in the test file. I hope I succeeded this time.

There is one last thing I want to say @parasharrajat . When I examined the PR files, I realized that it is more beautiful now. Thank you very much for your guidance and help. Sorry for not being able to do it earlier. I hope I didn't seem too emotional, but I really thank you 🙏 .

stitesExpensify · 2022-05-10T14:51:55Z

Bumping this to keep the issue moving forward @parasharrajat @roryabraham 😄

parasharrajat · 2022-05-10T16:02:51Z

I will review this today. Apologies for the delay. It just got out of sync.

parasharrajat · 2022-05-11T14:56:24Z

src/libs/OptionsListUtils.js

        createOption([personalDetail.login], personalDetails, reportMapForLogins[personalDetail.login], {
            showChatPreviewLine,
            forcePolicyNamePreview,
        })
    ));

+    // PersonalDetails should be ordered Alphabetically by default acording to issue #8220


Change the issue link to the comment that exactly asks for it.

parasharrajat · 2022-05-11T14:58:29Z

src/libs/OptionsListUtils.js

@@ -641,7 +643,7 @@ function getSearchOptions(
        showChatPreviewLine: true,
        showReportsWithNoComments: true,
        includePersonalDetails: true,
-        sortByLastMessageTimestamp: false,
+        sortByLastMessageTimestamp: true,


Set the default value for this true in getOptions definition as I can see that is always true for all methods.

parasharrajat · 2022-05-11T15:09:52Z

tests/unit/OptionsListUtilsTest.js


        // Then several options will be returned and they will be each have the search string in their email or name
        // even though the currently logged in user matches they should not show.
-        expect(results.personalDetails.length).toBe(1);
-        expect(results.recentReports.length).toBe(2);
+        // should be ordered by lastMessageTimestamp values


Suggested change

// should be ordered by lastMessageTimestamp values

// Should be ordered by lastMessageTimestamp values.

parasharrajat · 2022-05-11T15:10:17Z

tests/unit/OptionsListUtilsTest.js

@@ -283,9 +283,10 @@ describe('OptionsListUtils', () => {
        // When we filter again but provide a searchValue that should match multiple times
        results = OptionsListUtils.getSearchOptions(REPORTS, PERSONAL_DETAILS, 'fantastic');

-        // Then we get both values with the pinned value still on top
+        // lastMessageTimestamp value should be top


Suggested change

// lastMessageTimestamp value should be top

// Value with latestd lastMessageTimestamp should be at the top.

parasharrajat · 2022-05-11T15:11:25Z

tests/unit/OptionsListUtilsTest.js

        // Then the result which has an existing report should also have the reportID attached
        const personalDetailWithExistingReport = _.find(
            results.personalDetails,
            personalDetail => personalDetail.login === 'peterparker@expensify.com',
        );
        expect(personalDetailWithExistingReport.reportID).toBe(2);

+        // When we call only pass personal details


Suggested change

// When we call only pass personal details

// When we only pass personal details

parasharrajat · 2022-05-11T15:16:24Z

tests/unit/OptionsListUtilsTest.js

-        expect(results.recentReports.length).toBe(2);
-        expect(results.recentReports[0].text).toBe('Invisible Woman');
-        expect(results.recentReports[1].text).toBe('Spider-Man');
+        // Then all single participant reports that match will show up in the recentReports array, Recent used person should be top


Suggested change

// Then all single participant reports that match will show up in the recentReports array, Recent used person should be top

// Then all single participant reports that match will show up in the recentReports array, Recently used contact should be at the top

parasharrajat · 2022-05-23T20:25:56Z

No, reports are not supposed to be part of this list. Only contacts.

metehanozyurt · 2022-05-23T21:44:06Z

Ok , We want to list of contacts like LHN but only contacts. Recents on the top am i right? We need reports to sort contacts because it contains the lastMessageTimestamp information. If we do not give this, we cannot make a sort.

For Example New Chat Page;
This page give us 5 recent contacts.
recentReports represent 5 recent contacts.

App/src/pages/NewChatPage.js

Lines 65 to 76 in fc3e13e

    
           const { 
        
               recentReports, 
        
               personalDetails, 
        
               userToInvite, 
        
           } = OptionsListUtils.getNewChatOptions( 
        
               props.reports, 
        
               props.personalDetails, 
        
               props.betas, 
        
               '', 
        
               [], 
        
               this.props.isGroupChat ? this.excludedGroupEmails : [], 
        
           );

If we don't give the reports and only empty array(line 70), it will only give us the contact list(alphabeticly ordered). The recentReports information will never come.

parasharrajat · 2022-05-24T17:11:27Z

Ok, I would say just leave the contacts in A-Z order.

@roryabraham Do you think the A-Z order is fine for contacts on the Workspace member invite page?

roryabraham · 2022-05-25T23:53:56Z

Do you think the A-Z order is fine for contacts on the Workspace member invite page?

Yes I think that would be fine in isolation – but for search, new chat, and request pages we'll want to sort results by most recent timestamp. Given that, I would say let's be consistent for the workspace member invite page.

parasharrajat · 2022-05-26T09:20:37Z

Ok so @metehanozyurt we can just keep the workspace behavior the same as it was before. The only change would be that it will now be sorted using sortByLastMessageTimestamp.

metehanozyurt · 2022-05-28T09:36:33Z

Thank you @parasharrajat . I updated the QA steps and created a checklist. I hope it was in the requested format and descriptive.

parasharrajat · 2022-05-31T17:50:21Z

Thanks for doing that. Do you have an update for #8549 (comment)?

metehanozyurt · 2022-05-31T18:40:53Z

I thought the current version covers this. I thought you wanted it like the contact list on other pages.
Workspace invite page : order by A-Z (like other pages contacts sections)

New chat , New group , Request money , Send money, Split bill pages :
Recent sections : sorted using sortByLastMessageTimestamp
Contacts sections : order by A-Z

Workspace invite page before no ordered just The last user added was the last person on list . I can make the workspace page no sorting at all. But now it's beautiful 🥰. Don't you think it's more beautiful like this on phones like a contact list?

My humble opinion is that it looks really beautiful now. But of course, you are the decision makers. If you want the old version, I can get it right back no problem @parasharrajat .

parasharrajat · 2022-06-01T20:05:43Z

I am following this #8549 (comment). Please feel free to open this on Slack to get consensus.

parasharrajat · 2022-06-03T20:48:52Z

Did you get a chance to ask this on slack?

metehanozyurt · 2022-06-04T08:14:11Z

Thanks @parasharrajat for chance to do this. I asked a question, I hope I did it right. I was a little nervous as this was my first time doing something like this.
https://expensify.slack.com/archives/C01GTK53T8Q/p1654330306672439

metehanozyurt · 2022-06-08T20:07:25Z

I'm a little sorry that my question didn't get much attention 😢.
Would you like me to leave the Workspace invite page as it is currently live version on web?

I can't sort by last message time information because it will only be a list of people messaged before.
A-Z order was also not considered appropriate.
The only option I have left is to write a new wrapper method and show it without A-Z sorting contacts.

parasharrajat · 2022-06-09T12:07:20Z

I have bumped the thread.

parasharrajat · 2022-06-10T16:35:28Z

There is consensus to leave the page as it is for Workspace Invite page. So you can do the following.

Check staging app. Observe the order on the Workspace Invite page.
Keep the same order with one exception that now contacts will be A-Z by default.

Any questions?

metehanozyurt · 2022-06-10T20:43:17Z

Thank you for helping me on Slack @parasharrajat .
For this i need to one parameter for this so i add sortPersonalDetailsByAlphaAsc in getOptions params its default true . And write new wrapper method getMemberInviteOptions.
I couldn't use the sortByAlphaAsc parameter because it was used to sort reports. Reports are not sent on our page (Workspace Invite Page).

function getMemberInviteOptions(
    reports,
    personalDetails,
    betas = [],
    searchValue = '',
    selectedOptions = [],
    excludeLogins = [],
) {
    return getOptions(reports, personalDetails, 0, {
        betas,
        searchValue: searchValue.trim(),
        selectedOptions,
        excludeDefaultRooms: true,
        includePersonalDetails: true,
        excludeLogins,
        sortPersonalDetailsByAlphaAsc: false,
    });
}

I am currently updating the test document for this new method.
I'll update the videos once I'm done with my work. Thank you again about the Slack topic 🙏 .

metehanozyurt · 2022-06-12T10:50:58Z

Hi @parasharrajat , I merged it with main branch. I updated test file , PR steps and videos. Thanks for your time 🙏 .

parasharrajat · 2022-06-13T18:19:32Z

src/libs/OptionsListUtils.js

@@ -607,7 +613,6 @@ function getOptions(reports, personalDetails, activeReportID, {
            return 0;
        }], ['asc']);
    }
-


NAB: unnecessary change.

parasharrajat · 2022-06-13T18:20:31Z

src/libs/OptionsListUtils.js

+ * @returns {Object}
+ */
+function getMemberInviteOptions(
+    reports,


Do we need this argument? We can just remove it and refactor all the usages of this function.

Thanks @parasharrajat . I removed report parameter and updated all functions. Also removed selectedOptions.

parasharrajat

LGTM. Good work @metehanozyurt. Appreciate your patience.

cc: @roryabraham

🎀 👀 🎀 C+ reviewed

roryabraham · 2022-06-24T17:24:51Z

@Expensify/applauseleads can we be sure to update the regression test suite to account for the new sorting orders on these pages, and ensure that as part of the TC's we're verifying that these list pages are correctly sorted? Thanks 🙇

OSBotify · 2022-06-24T17:32:12Z

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

OSBotify · 2022-06-28T11:03:02Z

🚀 Deployed to staging by @roryabraham in version: 1.1.79-0 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

OSBotify · 2022-07-08T04:47:32Z

🚀 Deployed to production by @roryabraham in version: 1.1.79-17 🚀

platform	result
🤖 android 🤖	failure ❌
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

getNewChatOptions function calls changed. Sort by LastMessageTimestam…

569ac5d

…p now.

metehanozyurt requested review from marcaaron and a team as code owners April 7, 2022 22:22

melvin-bot bot requested review from parasharrajat and roryabraham and removed request for a team April 7, 2022 22:22

parasharrajat suggested changes Apr 8, 2022

View reviewed changes

added getNewChatOptions default parameter,function calls changed.

fb23b69

metehanozyurt added 2 commits April 20, 2022 22:26

Contacts sorted by alphabetical order,test file changed

d13c668

Search page ordered my recent used

9e5d43f

Merge branch 'main' of https://github.com/Expensify/App into issue-8220

5c40f36

Merge branch 'main' of https://github.com/Expensify/App into issue-8220

8b05dc0

parasharrajat suggested changes Apr 29, 2022

View reviewed changes

metehanozyurt added 4 commits April 30, 2022 23:28

Merge branch 'main' of https://github.com/Expensify/App into issue-8220

007c641

removed sortByLastMessageTimestamp wrapper methods parameters and upd…

9d79e47

…ate test file

spelling mistakes corrected.

19a6181

Alphabetically order tests added

5fd20b6

marcaaron removed their request for review May 6, 2022 19:46

parasharrajat suggested changes May 11, 2022

View reviewed changes

metehanozyurt added 2 commits May 14, 2022 12:11

change default paramater in getOptions, better comments added.

c3f8620

Merge branch 'main' of https://github.com/Expensify/App into issue-8220

385d5f5

NicMendonca mentioned this pull request May 27, 2022

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

Closed

metehanozyurt added 3 commits June 12, 2022 12:44

new wrapper method added , test document updated

1a8b5cd

Merge branch 'main' of https://github.com/Expensify/App into issue-8220

b97d218

test document updated

5689162

parasharrajat suggested changes Jun 13, 2022

View reviewed changes

unused parameters removed from function

32f0441

parasharrajat approved these changes Jun 20, 2022

View reviewed changes

roryabraham approved these changes Jun 24, 2022

View reviewed changes

roryabraham merged commit 960982d into Expensify:main Jun 24, 2022

OSBotify mentioned this pull request Jun 28, 2022

Deploy Checklist: New Expensify 2022-06-28 #9586

Closed

71 tasks

	// should be ordered by lastMessageTimestamp values
	// Should be ordered by lastMessageTimestamp values.

	// lastMessageTimestamp value should be top
	// Value with latestd lastMessageTimestamp should be at the top.

	// When we call only pass personal details
	// When we only pass personal details

	// Then all single participant reports that match will show up in the recentReports array, Recent used person should be top
	// Then all single participant reports that match will show up in the recentReports array, Recently used contact should be at the top

Fix: Request money - Five most recent chats aren't shown correctly #8549

Fix: Request money - Five most recent chats aren't shown correctly #8549

Conversation

metehanozyurt commented Apr 7, 2022 • edited Loading

Details

Fixed Issues

Tests

PR Review Checklist

Contributor (PR Author) Checklist

PR Reviewer Checklist

QA Steps

Screenshots

Web

Mobile Web

Desktop

iOS

Android

marcaaron commented Apr 8, 2022

parasharrajat left a comment • edited Loading

Choose a reason for hiding this comment

metehanozyurt commented Apr 9, 2022 • edited Loading

parasharrajat commented Apr 11, 2022

parasharrajat commented Apr 25, 2022

metehanozyurt commented Apr 25, 2022

parasharrajat commented Apr 27, 2022

parasharrajat left a comment

Choose a reason for hiding this comment

parasharrajat Apr 29, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

metehanozyurt commented May 1, 2022

stitesExpensify commented May 10, 2022

parasharrajat commented May 10, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

parasharrajat commented May 23, 2022

metehanozyurt commented May 23, 2022

parasharrajat commented May 24, 2022

roryabraham commented May 25, 2022

parasharrajat commented May 26, 2022 • edited Loading

metehanozyurt commented May 28, 2022

parasharrajat commented May 31, 2022

metehanozyurt commented May 31, 2022

parasharrajat commented Jun 1, 2022

parasharrajat commented Jun 3, 2022

metehanozyurt commented Jun 4, 2022

metehanozyurt commented Jun 8, 2022

parasharrajat commented Jun 9, 2022

parasharrajat commented Jun 10, 2022

metehanozyurt commented Jun 10, 2022

metehanozyurt commented Jun 12, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

parasharrajat left a comment

Choose a reason for hiding this comment

roryabraham commented Jun 24, 2022

OSBotify commented Jun 24, 2022

OSBotify commented Jun 28, 2022

OSBotify commented Jul 8, 2022

metehanozyurt commented Apr 7, 2022 •

edited

Loading

parasharrajat left a comment •

edited

Loading

metehanozyurt commented Apr 9, 2022 •

edited

Loading

parasharrajat Apr 29, 2022 •

edited

Loading

parasharrajat commented May 26, 2022 •

edited

Loading