From 13ec19c22ef8ca74316a4f51b47bd29b2fb6d932 Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Fri, 30 Aug 2024 16:57:30 +0200
Subject: [PATCH] Sort the pinning message list in the same order than the
 banner (#12937)

---
 src/components/views/right_panel/PinnedMessagesCard.tsx   | 4 ++--
 .../views/right_panel/PinnedMessagesCard-test.tsx         | 2 ++
 .../__snapshots__/PinnedMessagesCard-test.tsx.snap        | 8 ++++----
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/views/right_panel/PinnedMessagesCard.tsx b/src/components/views/right_panel/PinnedMessagesCard.tsx
index 0f1f856786e..92edaca90f9 100644
--- a/src/components/views/right_panel/PinnedMessagesCard.tsx
+++ b/src/components/views/right_panel/PinnedMessagesCard.tsx
@@ -34,7 +34,7 @@ import { filterBoolean } from "../../../utils/arrays";
 import Modal from "../../../Modal";
 import { UnpinAllDialog } from "../dialogs/UnpinAllDialog";
 import EmptyState from "./EmptyState";
-import { useFetchedPinnedEvents, usePinnedEvents, useReadPinnedEvents } from "../../../hooks/usePinnedEvents";
+import { usePinnedEvents, useReadPinnedEvents, useSortedFetchedPinnedEvents } from "../../../hooks/usePinnedEvents";
 
 /**
  * List the pinned messages in a room inside a Card.
@@ -59,7 +59,7 @@ export function PinnedMessagesCard({ room, onClose, permalinkCreator }: PinnedMe
     const roomContext = useRoomContext();
     const pinnedEventIds = usePinnedEvents(room);
     const readPinnedEvents = useReadPinnedEvents(room);
-    const pinnedEvents = useFetchedPinnedEvents(room, pinnedEventIds);
+    const pinnedEvents = useSortedFetchedPinnedEvents(room, pinnedEventIds);
 
     useEffect(() => {
         if (!cli || cli.isGuest()) return; // nothing to do
diff --git a/test/components/views/right_panel/PinnedMessagesCard-test.tsx b/test/components/views/right_panel/PinnedMessagesCard-test.tsx
index cfa32fa4900..bd84070a28c 100644
--- a/test/components/views/right_panel/PinnedMessagesCard-test.tsx
+++ b/test/components/views/right_panel/PinnedMessagesCard-test.tsx
@@ -165,12 +165,14 @@ describe("<PinnedMessagesCard />", () => {
         room: "!room:example.org",
         user: "@alice:example.org",
         msg: "First pinned message",
+        ts: 2,
     });
     const pin2 = mkMessage({
         event: true,
         room: "!room:example.org",
         user: "@alice:example.org",
         msg: "The second one",
+        ts: 1,
     });
 
     it("should show spinner whilst loading", async () => {
diff --git a/test/components/views/right_panel/__snapshots__/PinnedMessagesCard-test.tsx.snap b/test/components/views/right_panel/__snapshots__/PinnedMessagesCard-test.tsx.snap
index f47de92ffc9..394ebada2f1 100644
--- a/test/components/views/right_panel/__snapshots__/PinnedMessagesCard-test.tsx.snap
+++ b/test/components/views/right_panel/__snapshots__/PinnedMessagesCard-test.tsx.snap
@@ -184,7 +184,7 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
                 class="mx_EventTile_body translate"
                 dir="auto"
               >
-                The second one
+                First pinned message
               </div>
             </div>
           </div>
@@ -250,7 +250,7 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
                 class="mx_EventTile_body translate"
                 dir="auto"
               >
-                First pinned message
+                The second one
               </div>
             </div>
           </div>
@@ -379,7 +379,7 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
                 class="mx_EventTile_body translate"
                 dir="auto"
               >
-                The second one
+                First pinned message
               </div>
             </div>
           </div>
@@ -445,7 +445,7 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
                 class="mx_EventTile_body translate"
                 dir="auto"
               >
-                First pinned message
+                The second one
               </div>
             </div>
           </div>