From e8e99137ddef6ae7a3e4dd9a9cc6abe0c5415bb1 Mon Sep 17 00:00:00 2001
From: Dominic Go <dominic@dominicgo.dev>
Date: Wed, 2 Oct 2024 20:14:50 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=AB=20Update:=20Ex=20-=20`LogListDispl?=
 =?UTF-8?q?ay`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/src/components/LogListDisplay.tsx | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/example/src/components/LogListDisplay.tsx b/example/src/components/LogListDisplay.tsx
index 67a32f09..e0666254 100644
--- a/example/src/components/LogListDisplay.tsx
+++ b/example/src/components/LogListDisplay.tsx
@@ -30,7 +30,9 @@ export const LogListDisplay = React.forwardRef<
   
   const hasEvents = (events.length > 0);
   const maxItemsToShow = props.maxItemsToShow ?? 15;
-  const recentEvents = events.reverse().slice(-maxItemsToShow);
+
+  const recentEventsSorted = events.sort((a, b) =>  a.index - b.index);
+  const recentEvents = recentEventsSorted.reverse().slice(-maxItemsToShow);
 
   React.useImperativeHandle(ref, () => ({
     addItem: (itemTitle) => {
@@ -42,11 +44,14 @@ export const LogListDisplay = React.forwardRef<
 
       const ms = Helpers.pad(date.getMilliseconds(), 3);
       
-      setEvents((prevValue) => ([ ...prevValue, {
-        timestamp: `${h}:${m}:${s}.${ms}`,
-        itemTitle: itemTitle,
-        index: prevValue.length
-      }]));
+      setEvents((prevValue) => ([ 
+        ...prevValue, 
+        {
+          timestamp: `${h}:${m}:${s}.${ms}`,
+          itemTitle: itemTitle,
+          index: prevValue.length
+        }
+      ]));
     },
   }));