Reduce occurrences of dupe keys

web-chat/src/App.tsx

@@ -2,7 +2,8 @@ import { multiaddr } from 'multiaddr';
 import PeerId from 'peer-id';
 import { useEffect, useState } from 'react';
 import './App.css';
-import { ChatMessage } from 'waku/chat_message';
+import { ChatMessage } from './ChatMessage';
+import { ChatMessage as WakuChatMessage } from 'waku/chat_message';
 import { WakuMessage } from 'waku/waku_message';
 import { RelayDefaultTopic } from 'waku/waku_relay';
 import { StoreCodec } from 'waku/waku_store';
@@ -73,7 +74,10 @@ export default function App() {
           const messages = response
             .map((wakuMsg) => wakuMsg.payload)
             .filter((payload) => !!payload)
-            .map((payload) => ChatMessage.decode(payload as Uint8Array));
+            .map((payload) => WakuChatMessage.decode(payload as Uint8Array))
+            .map((wakuChatMessage) =>
+              ChatMessage.fromWakuChatMessage(wakuChatMessage)
+            );
           copyMergeUniqueReplace(messages, stateMessages, setMessages);
         }
       }
@@ -122,7 +126,7 @@ export default function App() {
                 setNick
               );
               const commandMessages = response.map((msg) => {
-                return new ChatMessage(new Date(), command, msg);
+                return new ChatMessage(new Date(), new Date(), command, msg);
               });
               copyAppendReplace(commandMessages, stateMessages, setMessages);
             }}
@@ -162,7 +166,9 @@ function decodeWakuMessage(data: Uint8Array): null | ChatMessage {
   if (!wakuMsg.payload) {
     return null;
   }
-  return ChatMessage.decode(wakuMsg.payload);
+  return ChatMessage.fromWakuChatMessage(
+    WakuChatMessage.decode(wakuMsg.payload)
+  );
 }
 
 function copyAppendReplace<T>(
@@ -185,7 +191,7 @@ function copyMergeUniqueReplace(
       copy.push(msg);
     }
   });
-  copy.sort((a, b) => a.timestamp.valueOf() - b.timestamp.valueOf());
+  copy.sort((a, b) => a.sentTimestamp.valueOf() - b.sentTimestamp.valueOf());
   setter(copy);
 }
 
@@ -193,6 +199,6 @@ function isEqual(lhs: ChatMessage, rhs: ChatMessage): boolean {
   return (
     lhs.nick === rhs.nick &&
     lhs.message === rhs.message &&
-    lhs.timestamp.toString() === rhs.timestamp.toString()
+    lhs.sentTimestamp.toString() === rhs.sentTimestamp.toString()
   );
 }

web-chat/src/ChatList.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from 'react';
-import { ChatMessage } from 'waku/chat_message';
+import { ChatMessage } from './ChatMessage';
 import {
   Message,
   MessageText,
@@ -20,7 +20,11 @@ export default function ChatList(props: Props) {
         {currentMessageGroup.map((currentMessage) => (
           <Message
             // We assume that the same user is not sending two messages in the same second
-            key={currentMessage.timestamp.toString() + currentMessage.nick}
+            key={
+              currentMessage.receivedTimestampMs.valueOf() +
+              currentMessage.nick +
+              currentMessage.message
+            }
             authorName={currentMessage.nick}
             date={formatDisplayDate(currentMessage)}
           >
@@ -58,7 +62,7 @@ function groupMessagesBySender(messageArray: ChatMessage[]): ChatMessage[][] {
 }
 
 function formatDisplayDate(message: ChatMessage): string {
-  return message.timestamp.toLocaleString([], {
+  return message.sentTimestamp.toLocaleString([], {
     month: 'short',
     day: 'numeric',
     hour: 'numeric',

web-chat/src/ChatMessage.ts

@@ -0,0 +1,19 @@
+import { ChatMessage as WakuChatMessage } from 'waku/chat_message';
+
+export class ChatMessage {
+  constructor(
+    public receivedTimestampMs: Date,
+    public sentTimestamp: Date,
+    public nick: string,
+    public message: string
+  ) {}
+
+  static fromWakuChatMessage(wakuChatMessage: WakuChatMessage): ChatMessage {
+    return new ChatMessage(
+      new Date(),
+      wakuChatMessage.timestamp,
+      wakuChatMessage.nick,
+      wakuChatMessage.message
+    );
+  }
+}

web-chat/src/Room.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
-import { ChatMessage } from 'waku/chat_message';
+import { ChatMessage } from './ChatMessage';
+import { ChatMessage as WakuChatMessage } from 'waku/chat_message';
 import { WakuMessage } from 'waku/waku_message';
 import { ChatContentTopic } from './App';
 import ChatList from './ChatList';
@@ -52,7 +53,7 @@ async function handleMessage(
   if (message.startsWith('/')) {
     commandHandler(message);
   } else {
-    const chatMessage = new ChatMessage(new Date(), nick, message);
+    const chatMessage = new WakuChatMessage(new Date(), nick, message);
     const wakuMsg = WakuMessage.fromBytes(
       chatMessage.encode(),
       ChatContentTopic