💫 Update: Ex - LogListDisplay

dominicstop · Oct 2, 2024 · e8e9913 · e8e9913
1 parent 39af079
commit e8e9913
Showing 1 changed file with 11 additions and 6 deletions.
diff --git 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
+        }
+      ]));
     },
   }));