feat: assign ids to messages

src/components/Room/Room.test.tsx

@@ -5,11 +5,12 @@ import { MemoryRouter as Router, Route, Routes } from 'react-router-dom'
 
 import { Room } from './'
 
-const mockSender = jest.fn()
+const mockGetUuid = jest.fn()
+const mockMessagedSender = jest.fn()
 
 jest.mock('trystero', () => ({
   joinRoom: () => ({
-    makeAction: () => [mockSender, () => {}, () => {}],
+    makeAction: () => [mockMessagedSender, () => {}, () => {}],
     ping: () => Promise.resolve(0),
     leave: () => {},
     getPeers: () => [],
@@ -87,7 +88,7 @@ describe('Room', () => {
   test('message is sent to peer', () => {
     render(
       <RouteStub>
-        <Room />
+        <Room getUuid={mockGetUuid.mockImplementation(() => 'abc123')} />
       </RouteStub>
     )
 
@@ -95,6 +96,10 @@ describe('Room', () => {
     const textInput = screen.getByPlaceholderText('Your message')
     userEvent.type(textInput, 'hello')
     userEvent.click(sendButton)
-    expect(mockSender).toHaveBeenCalledWith({ text: 'hello', timeSent: 100 })
+    expect(mockMessagedSender).toHaveBeenCalledWith({
+      text: 'hello',
+      timeSent: 100,
+      id: 'abc123',
+    })
   })
 })

src/components/Room/Room.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react'
 import { useParams } from 'react-router-dom'
+import { v4 as uuid } from 'uuid'
 import Button from '@mui/material/Button'
 import FormControl from '@mui/material/FormControl'
 import Typography from '@mui/material/Typography'
@@ -11,10 +12,12 @@ import { UnsentMessage, ReceivedMessage } from 'models/chat'
 
 export interface RoomProps {
   appId?: string
+  getUuid?: typeof uuid
 }
 
 export function Room({
   appId = `${encodeURI(window.location.origin)}_${process.env.REACT_APP_NAME}`,
+  getUuid = uuid,
 }: RoomProps) {
   const { roomId = '' } = useParams()
 
@@ -42,7 +45,7 @@ export function Room({
     event: React.SyntheticEvent<HTMLFormElement>
   ) => {
     event.preventDefault()
-    sendMessage({ text: textMessage, timeSent: Date.now() })
+    sendMessage({ text: textMessage, timeSent: Date.now(), id: getUuid() })
     setTextMessage('')
   }
 

src/models/chat.ts

@@ -1,4 +1,5 @@
 export interface UnsentMessage {
+  id: string
   text: string
   timeSent: number
 }