From 7e47c6785a88613cdf6885d056a7a3a002b0b206 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Thu, 5 May 2022 13:04:34 +0200 Subject: [PATCH 1/2] Order receipts with the most recent on the right MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- .../views/rooms/ReadReceiptGroup.tsx | 2 +- .../views/rooms/ReadReceiptGroup-test.tsx | 26 +++++++++---------- 2 files changed, 14 insertions(+), 14 deletions(-) diff --git a/src/components/views/rooms/ReadReceiptGroup.tsx b/src/components/views/rooms/ReadReceiptGroup.tsx index c271d9f9ca5..678060dfe35 100644 --- a/src/components/views/rooms/ReadReceiptGroup.tsx +++ b/src/components/views/rooms/ReadReceiptGroup.tsx @@ -56,7 +56,7 @@ export function determineAvatarPosition(index: number, count: number, max: numbe if (index < max) { return { hidden: false, - position: Math.min(count, max) - index - 1, + position: index, }; } else { return { diff --git a/test/components/views/rooms/ReadReceiptGroup-test.tsx b/test/components/views/rooms/ReadReceiptGroup-test.tsx index 28f1caa511b..2f5abbdd09c 100644 --- a/test/components/views/rooms/ReadReceiptGroup-test.tsx +++ b/test/components/views/rooms/ReadReceiptGroup-test.tsx @@ -34,43 +34,43 @@ 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)) .toEqual({ hidden: false, position: 0 }); expect(determineAvatarPosition(0, 2, 4)) - .toEqual({ hidden: false, position: 1 }); - expect(determineAvatarPosition(1, 2, 4)) .toEqual({ hidden: false, position: 0 }); + expect(determineAvatarPosition(1, 2, 4)) + .toEqual({ hidden: false, position: 1 }); expect(determineAvatarPosition(0, 3, 4)) - .toEqual({ hidden: false, position: 2 }); + .toEqual({ hidden: false, position: 0 }); expect(determineAvatarPosition(1, 3, 4)) .toEqual({ hidden: false, position: 1 }); expect(determineAvatarPosition(2, 3, 4)) - .toEqual({ hidden: false, position: 0 }); + .toEqual({ hidden: false, position: 2 }); expect(determineAvatarPosition(0, 4, 4)) - .toEqual({ hidden: false, position: 3 }); + .toEqual({ hidden: false, position: 0 }); expect(determineAvatarPosition(1, 4, 4)) - .toEqual({ hidden: false, position: 2 }); - expect(determineAvatarPosition(2, 4, 4)) .toEqual({ hidden: false, position: 1 }); + expect(determineAvatarPosition(2, 4, 4)) + .toEqual({ hidden: false, position: 2 }); expect(determineAvatarPosition(3, 4, 4)) - .toEqual({ hidden: false, position: 0 }); + .toEqual({ hidden: false, position: 3 }); }); it("to handle the overflowing case correctly", () => { expect(determineAvatarPosition(0, 6, 4)) - .toEqual({ hidden: false, position: 3 }); + .toEqual({ hidden: false, position: 0 }); expect(determineAvatarPosition(1, 6, 4)) - .toEqual({ hidden: false, position: 2 }); - expect(determineAvatarPosition(2, 6, 4)) .toEqual({ hidden: false, position: 1 }); + expect(determineAvatarPosition(2, 6, 4)) + .toEqual({ hidden: false, position: 2 }); expect(determineAvatarPosition(3, 6, 4)) - .toEqual({ hidden: false, position: 0 }); + .toEqual({ hidden: false, position: 3 }); expect(determineAvatarPosition(4, 6, 4)) .toEqual({ hidden: true, position: 0 }); expect(determineAvatarPosition(5, 6, 4)) From eee2d00b74d2224e28763041ddfd870d89df9f24 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Thu, 5 May 2022 13:07:14 +0200 Subject: [PATCH 2/2] Remove unused param MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- .../views/rooms/ReadReceiptGroup.tsx | 4 +-- .../views/rooms/ReadReceiptGroup-test.tsx | 32 +++++++++---------- 2 files changed, 18 insertions(+), 18 deletions(-) diff --git a/src/components/views/rooms/ReadReceiptGroup.tsx b/src/components/views/rooms/ReadReceiptGroup.tsx index 678060dfe35..e1c0de14286 100644 --- a/src/components/views/rooms/ReadReceiptGroup.tsx +++ b/src/components/views/rooms/ReadReceiptGroup.tsx @@ -52,7 +52,7 @@ 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, @@ -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 2f5abbdd09c..a2e78855f82 100644 --- a/test/components/views/rooms/ReadReceiptGroup-test.tsx +++ b/test/components/views/rooms/ReadReceiptGroup-test.tsx @@ -37,43 +37,43 @@ describe("ReadReceiptGroup", () => { // 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, 2, 4)) + expect(determineAvatarPosition(1, 4)) .toEqual({ hidden: false, position: 1 }); - expect(determineAvatarPosition(0, 3, 4)) + expect(determineAvatarPosition(0, 4)) .toEqual({ hidden: false, position: 0 }); - expect(determineAvatarPosition(1, 3, 4)) + expect(determineAvatarPosition(1, 4)) .toEqual({ hidden: false, position: 1 }); - expect(determineAvatarPosition(2, 3, 4)) + expect(determineAvatarPosition(2, 4)) .toEqual({ hidden: false, position: 2 }); - expect(determineAvatarPosition(0, 4, 4)) + expect(determineAvatarPosition(0, 4)) .toEqual({ hidden: false, position: 0 }); - expect(determineAvatarPosition(1, 4, 4)) + expect(determineAvatarPosition(1, 4)) .toEqual({ hidden: false, position: 1 }); - expect(determineAvatarPosition(2, 4, 4)) + expect(determineAvatarPosition(2, 4)) .toEqual({ hidden: false, position: 2 }); - expect(determineAvatarPosition(3, 4, 4)) + expect(determineAvatarPosition(3, 4)) .toEqual({ hidden: false, position: 3 }); }); it("to handle the overflowing case correctly", () => { - expect(determineAvatarPosition(0, 6, 4)) + expect(determineAvatarPosition(0, 4)) .toEqual({ hidden: false, position: 0 }); - expect(determineAvatarPosition(1, 6, 4)) + expect(determineAvatarPosition(1, 4)) .toEqual({ hidden: false, position: 1 }); - expect(determineAvatarPosition(2, 6, 4)) + expect(determineAvatarPosition(2, 4)) .toEqual({ hidden: false, position: 2 }); - expect(determineAvatarPosition(3, 6, 4)) + expect(determineAvatarPosition(3, 4)) .toEqual({ hidden: false, position: 3 }); - expect(determineAvatarPosition(4, 6, 4)) + expect(determineAvatarPosition(4, 4)) .toEqual({ hidden: true, position: 0 }); - expect(determineAvatarPosition(5, 6, 4)) + expect(determineAvatarPosition(5, 4)) .toEqual({ hidden: true, position: 0 }); }); });