[MM-18146] Order tooltip for reactions on web by who recently reacted…

… with those emoji (mattermost#3671)

* Order tooltip for reactions by who recently reacted

* Improve sorting by recency test for reactions

* Order reactions by who reacted first (instead of who reacted last)

components/post_view/reaction/reaction.jsx

@@ -96,28 +96,37 @@ export default class Reaction extends React.PureComponent {
         this.props.actions.getMissingProfilesByIds(ids);
     }
 
-    render() {
-        if (!this.props.emojiImageUrl) {
-            return null;
-        }
-
+    getSortedUsers = (getDisplayName) => {
+        // Sort users by who reacted first with "you" being first if the current user reacted
         let currentUserReacted = false;
-        const users = [];
-        const otherUsersCount = this.props.otherUsersCount;
-        for (const user of this.props.profiles) {
-            if (user.id === this.props.currentUserId) {
+        const sortedReactions = this.props.reactions.sort((a, b) => a.create_at - b.create_at);
+        const users = sortedReactions.reduce((accumulator, current) => {
+            if (current.user_id === this.props.currentUserId) {
                 currentUserReacted = true;
             } else {
-                users.push(Utils.getDisplayNameByUser(user));
+                const user = this.props.profiles.find((u) => u.id === current.user_id);
+                if (user) {
+                    accumulator.push(getDisplayName(user));
+                }
             }
-        }
+            return accumulator;
+        }, []);
 
-        // Sort users in alphabetical order with "you" being first if the current user reacted
-        users.sort();
         if (currentUserReacted) {
             users.unshift(Utils.localizeMessage('reaction.you', 'You'));
         }
 
+        return {currentUserReacted, users};
+    }
+
+    render() {
+        if (!this.props.emojiImageUrl) {
+            return null;
+        }
+
+        const {currentUserReacted, users} = this.getSortedUsers(Utils.getDisplayNameByUser);
+
+        const otherUsersCount = this.props.otherUsersCount;
         let names;
         if (otherUsersCount > 0) {
             if (users.length > 0) {

components/post_view/reaction/reaction.test.jsx

@@ -3,6 +3,7 @@
 
 import React from 'react';
 import {shallow} from 'enzyme';
+import assert from 'assert';
 
 import Reaction from 'components/post_view/reaction/reaction.jsx';
 
@@ -99,4 +100,40 @@ describe('components/post_view/Reaction', () => {
         expect(newActions.getMissingProfilesByIds).toHaveBeenCalledTimes(1);
         expect(newActions.getMissingProfilesByIds).toHaveBeenCalledWith([reactions[0].user_id, reactions[1].user_id]);
     });
+
+    test('should sort users by who reacted first', () => {
+        const baseDate = Date.now();
+        const newReactions = [
+            {user_id: 'user_id_2', create_at: baseDate}, // Will be sorted 2nd, after the logged-in user
+            {user_id: 'user_id_1', create_at: baseDate + 5000}, // Logged-in user, will be sorted first although 2nd user reacted first
+            {user_id: 'user_id_3', create_at: baseDate + 8000}, // Last to react, will be sorted last
+        ];
+        const newProfiles = [{id: 'user_id_1'}, {id: 'user_id_2'}, {id: 'user_id_3'}];
+        const props = {
+            ...baseProps,
+            reactions: newReactions,
+            profiles: newProfiles,
+        };
+        const getDisplayNameMock = (user) => {
+            switch (user.id) {
+            case 'user_id_1':
+                return 'username_1';
+            case 'user_id_2':
+                return 'username_2';
+            case 'user_id_3':
+                return 'username_3';
+            default:
+                return '';
+            }
+        };
+
+        const wrapper = shallow(<Reaction {...props}/>);
+
+        const {currentUserReacted, users} = wrapper.instance().getSortedUsers(getDisplayNameMock);
+        expect(currentUserReacted).toEqual(true);
+        assert.deepEqual(
+            users,
+            ['You', 'username_2', 'username_3']
+        );
+    });
 });