From b12c00260222fbee8c7864dc7e24cb4b216850b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Thu, 5 May 2022 14:10:48 +0200
Subject: [PATCH] Order receipts with the most recent on the right (#8506)

---
 .../views/rooms/ReadReceiptGroup.tsx          |  6 +--
 .../views/rooms/ReadReceiptGroup-test.tsx     | 52 +++++++++----------
 2 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/src/components/views/rooms/ReadReceiptGroup.tsx b/src/components/views/rooms/ReadReceiptGroup.tsx
index c271d9f9ca..e1c0de1428 100644
--- a/src/components/views/rooms/ReadReceiptGroup.tsx
+++ b/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;
diff --git a/test/components/views/rooms/ReadReceiptGroup-test.tsx b/test/components/views/rooms/ReadReceiptGroup-test.tsx
index 28f1caa511..a2e78855f8 100644
--- a/test/components/views/rooms/ReadReceiptGroup-test.tsx
+++ b/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))
-                .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))
+            expect(determineAvatarPosition(0, 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 });
         });
     });