fix: build for message monitor (#97)

waku-org · Oct 1, 2024 · 53a60e7 · 53a60e7
1 parent 8b970b2
commit 53a60e7
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 6 deletions.
diff --git a/examples/message-monitor/package-lock.json b/examples/message-monitor/package-lock.json
diff --git a/examples/message-monitor/package.json b/examples/message-monitor/package.json
@@ -21,7 +21,6 @@
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
@@ -43,6 +42,7 @@
     ]
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "autoprefixer": "^10.4.20",
     "postcss": "^8.4.47",
     "tailwindcss": "^3.4.13"

diff --git a/examples/message-monitor/src/components/MessageList.tsx b/examples/message-monitor/src/components/MessageList.tsx
@@ -50,14 +50,14 @@ const MessageList: React.FC<MessageListProps> = ({ title, messages, showSequence
     <div className="flex-1 min-w-0">
       <h2 className="text-xl font-semibold mb-4 text-gray-700">{title}</h2>
       <div className="bg-gray-50 rounded-lg p-4 h-96 overflow-y-auto border border-gray-200">
-        {Object.entries(groupedMessages).reverse().map(([sequenceId, sequenceMessages]) => (
+        {Object.entries(groupedMessages).map(([sequenceId, sequenceMessages]) => (
           <div key={sequenceId} className={`mb-4 p-2 rounded-lg ${showSequence ? getSequenceColor(Number(sequenceId)) : ''}`}>
             {showSequence && <div className="text-xs font-semibold mb-2">Sequence {sequenceId}</div>}
             {sequenceMessages.map((message: Message, index: number) => (
               <div key={index} className="text-sm mb-2 font-mono bg-white p-2 rounded shadow-sm">
                 {shortenMessage(message.content)}
               </div>
-            ))}
+            )).reverse()}
           </div>
         ))}
       </div>