Messages do not replace each other

web-chat/src/App.tsx

@@ -13,7 +13,7 @@ import { WakuContext } from './WakuContext';
 export const ChatContentTopic = 'dingpu';
 
 interface State {
-  messages: string[],
+  messages: ChatMessage[],
   waku?: Waku
 }
 
@@ -25,20 +25,9 @@ export default function App() {
     async function initWaku() {
       try {
         const waku = await Waku.create({});
-        setState(({ messages }) => (
-          { waku, messages }
-        ));
 
-        waku.libp2p.pubsub.on(RelayDefaultTopic, (event) => {
-          const wakuMsg = WakuMessage.decode(event.data);
-          if (wakuMsg.payload) {
-            const chatMsg = ChatMessage.decode(wakuMsg.payload);
-            const msgStr = printMessage(chatMsg);
-
-            const messages = state.messages.slice();
-            messages.push(msgStr);
-            setState({ messages, waku });
-          }
+        setState(({ messages }) => {
+          return {waku, messages};
         });
 
         waku.libp2p.peerStore.addressBook.add(
@@ -54,10 +43,20 @@ export default function App() {
       initWaku()
         .then(() => console.log('Waku init done'))
         .catch((e) => console.log('Waku init failed ', e));
+    } else {
+      state.waku.libp2p.pubsub.on(RelayDefaultTopic, (event) => {
+        const wakuMsg = WakuMessage.decode(event.data);
+        if (wakuMsg.payload) {
+          const chatMsg = ChatMessage.decode(wakuMsg.payload);
+          const messages = state.messages.slice();
+          messages.push(chatMsg);
+          console.log("setState on ", messages);
+          setState({ messages, waku:  state.waku });
+        }
+      });
     }
   });
 
-
   return (
     <div className='App'>
       <div className='chat-room'>
@@ -70,15 +69,3 @@ export default function App() {
     </div>
   );
 }
-
-// TODO: Make it a proper component
-function printMessage(chatMsg: ChatMessage) {
-  const timestamp = chatMsg.timestamp.toLocaleString([], {
-    month: 'short',
-    day: 'numeric',
-    hour: 'numeric',
-    minute: '2-digit',
-    hour12: false
-  });
-  return `<${timestamp}> ${chatMsg.nick}: ${chatMsg.message}`;
-}

web-chat/src/Room.tsx

@@ -6,11 +6,12 @@ import {
   ListItemText
 } from '@material-ui/core';
 import React from 'react';
+import { ChatMessage } from 'waku-chat/chat_message';
 import MessageInput from './MessageInput';
 import Send from './Send';
 
 interface Props {
-  lines: string[],
+  lines: ChatMessage[],
 }
 
 interface State {
@@ -58,16 +59,16 @@ export default class Room extends React.Component<Props, State> {
 }
 
 interface LinesProps {
-  messages: string[]
+  messages: ChatMessage[]
 }
 
 const Lines = (props: LinesProps) => {
   const renderedLines = [];
 
-  for (const line of props.messages) {
+  for (const i in props.messages) {
     renderedLines.push(<ListItem>
-      <ListItemText
-        primary={line}
+      <ListItemText key={"chat-message-" + i}
+        primary={printMessage(props.messages[i])}
       />
     </ListItem>);
   }
@@ -78,3 +79,15 @@ const Lines = (props: LinesProps) => {
     </List>
   );
 };
+
+// TODO: Make it a proper component
+function printMessage(chatMsg: ChatMessage) {
+  const timestamp = chatMsg.timestamp.toLocaleString([], {
+    month: 'short',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+    hour12: false
+  });
+  return `<${timestamp}> ${chatMsg.nick}: ${chatMsg.message}`;
+}