Order receipts with the most recent on the right (#8506)

src/components/views/rooms/ReadReceiptGroup.tsx

@@ -52,11 +52,11 @@ interface IAvatarPosition {
     position: number;
 }
 
-export function determineAvatarPosition(index: number, count: number, max: number): IAvatarPosition {
+export function determineAvatarPosition(index: number, max: number): IAvatarPosition {
     if (index < max) {
         return {
             hidden: false,
-            position: Math.min(count, max) - index - 1,
+            position: index,
         };
     } else {
         return {
@@ -133,7 +133,7 @@ export function ReadReceiptGroup(
     }
 
     const avatars = readReceipts.map((receipt, index) => {
-        const { hidden, position } = determineAvatarPosition(index, readReceipts.length, maxAvatars);
+        const { hidden, position } = determineAvatarPosition(index, maxAvatars);
 
         const userId = receipt.userId;
         let readReceiptInfo: IReadReceiptInfo;

test/components/views/rooms/ReadReceiptGroup-test.tsx

@@ -34,46 +34,46 @@ describe("ReadReceiptGroup", () => {
     describe("AvatarPosition", () => {
         // The avatar slots are numbered from right to left
         // That means currently, we’ve got the slots | 3 | 2 | 1 | 0 | each with 10px distance to the next one.
-        // We want to fill slots so the first avatar is in the left-most slot without leaving any slots at the right
+        // We want to fill slots so the first avatar is in the right-most slot without leaving any slots at the left
         // unoccupied.
         it("to handle the non-overflowing case correctly", () => {
-            expect(determineAvatarPosition(0, 1, 4))
+            expect(determineAvatarPosition(0, 4))
                 .toEqual({ hidden: false, position: 0 });
 
-            expect(determineAvatarPosition(0, 2, 4))
+            expect(determineAvatarPosition(0, 4))
+                .toEqual({ hidden: false, position: 0 });
+            expect(determineAvatarPosition(1, 4))
                 .toEqual({ hidden: false, position: 1 });
-            expect(determineAvatarPosition(1, 2, 4))
-                .toEqual({ hidden: false, position: 0 });
 
-            expect(determineAvatarPosition(0, 3, 4))
+            expect(determineAvatarPosition(0, 4))
+                .toEqual({ hidden: false, position: 0 });
+            expect(determineAvatarPosition(1, 4))
+                .toEqual({ hidden: false, position: 1 });
+            expect(determineAvatarPosition(2, 4))
                 .toEqual({ hidden: false, position: 2 });
-            expect(determineAvatarPosition(1, 3, 4))
-                .toEqual({ hidden: false, position: 1 });
-            expect(determineAvatarPosition(2, 3, 4))
-                .toEqual({ hidden: false, position: 0 });
 
-            expect(determineAvatarPosition(0, 4, 4))
+            expect(determineAvatarPosition(0, 4))
+                .toEqual({ hidden: false, position: 0 });
+            expect(determineAvatarPosition(1, 4))
+                .toEqual({ hidden: false, position: 1 });
+            expect(determineAvatarPosition(2, 4))
+                .toEqual({ hidden: false, position: 2 });
+            expect(determineAvatarPosition(3, 4))
                 .toEqual({ hidden: false, position: 3 });
-            expect(determineAvatarPosition(1, 4, 4))
-                .toEqual({ hidden: false, position: 2 });
-            expect(determineAvatarPosition(2, 4, 4))
-                .toEqual({ hidden: false, position: 1 });
-            expect(determineAvatarPosition(3, 4, 4))
-                .toEqual({ hidden: false, position: 0 });
         });
 
         it("to handle the overflowing case correctly", () => {
-            expect(determineAvatarPosition(0, 6, 4))
+            expect(determineAvatarPosition(0, 4))
-                .toEqual({ hidden: false, position: 3 });
-            expect(determineAvatarPosition(1, 6, 4))
-                .toEqual({ hidden: false, position: 2 });
-            expect(determineAvatarPosition(2, 6, 4))
-                .toEqual({ hidden: false, position: 1 });
-            expect(determineAvatarPosition(3, 6, 4))
                 .toEqual({ hidden: false, position: 0 });
-            expect(determineAvatarPosition(4, 6, 4))
+            expect(determineAvatarPosition(1, 4))
+                .toEqual({ hidden: false, position: 1 });
+            expect(determineAvatarPosition(2, 4))
+                .toEqual({ hidden: false, position: 2 });
+            expect(determineAvatarPosition(3, 4))
+                .toEqual({ hidden: false, position: 3 });
+            expect(determineAvatarPosition(4, 4))
                 .toEqual({ hidden: true, position: 0 });
-            expect(determineAvatarPosition(5, 6, 4))
+            expect(determineAvatarPosition(5, 4))
                 .toEqual({ hidden: true, position: 0 });
         });
     });