Sort the pinning message list in the same order than the banner (#12937)

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

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 () => {

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>