diff --git a/src/Bootstrap.tsx b/src/Bootstrap.tsx
index a85f811..aacf45e 100644
--- a/src/Bootstrap.tsx
+++ b/src/Bootstrap.tsx
@@ -1,17 +1,23 @@
-import React from 'react'
+import { useState } from 'react'
import { Routes, Route } from 'react-router-dom'
+import { v4 as uuid } from 'uuid'
import { Home } from './pages/Home/'
import { PublicRoom } from './pages/PublicRoom/'
function Bootstrap() {
+ const [userId] = useState(uuid())
+
return (
{['/', '/index.html'].map(path => (
} />
))}
- } />
+ }
+ />
)
diff --git a/src/components/Room/Room.test.tsx b/src/components/Room/Room.test.tsx
index 1a82a51..482e179 100644
--- a/src/components/Room/Room.test.tsx
+++ b/src/components/Room/Room.test.tsx
@@ -5,6 +5,8 @@ import { MemoryRouter as Router, Route, Routes } from 'react-router-dom'
import { Room } from './'
+const stubUserId = 'user-id'
+
const mockGetUuid = jest.fn()
const mockMessagedSender = jest.fn()
@@ -42,7 +44,7 @@ describe('Room', () => {
test('is available', () => {
render(
-
+
)
})
@@ -50,7 +52,7 @@ describe('Room', () => {
test('send button is disabled', () => {
render(
-
+
)
@@ -61,7 +63,7 @@ describe('Room', () => {
test('inputting text enabled send button', () => {
render(
-
+
)
@@ -74,7 +76,7 @@ describe('Room', () => {
test('sending a message clears the text input', () => {
render(
-
+
)
@@ -88,7 +90,10 @@ describe('Room', () => {
test('message is sent to peer', () => {
render(
- 'abc123')} />
+ 'abc123')}
+ userId={stubUserId}
+ />
)
@@ -97,6 +102,7 @@ describe('Room', () => {
userEvent.type(textInput, 'hello')
userEvent.click(sendButton)
expect(mockMessagedSender).toHaveBeenCalledWith({
+ authorId: stubUserId,
text: 'hello',
timeSent: 100,
id: 'abc123',
diff --git a/src/components/Room/Room.tsx b/src/components/Room/Room.tsx
index 195c9ba..93eec37 100644
--- a/src/components/Room/Room.tsx
+++ b/src/components/Room/Room.tsx
@@ -13,9 +13,11 @@ import { UnsentMessage, ReceivedMessage } from 'models/chat'
export interface RoomProps {
appId?: string
getUuid?: typeof uuid
+ userId: string
}
export function Room({
+ userId,
appId = `${encodeURI(window.location.origin)}_${process.env.REACT_APP_NAME}`,
getUuid = uuid,
}: RoomProps) {
@@ -45,7 +47,12 @@ export function Room({
event: React.SyntheticEvent
) => {
event.preventDefault()
- sendMessage({ text: textMessage, timeSent: Date.now(), id: getUuid() })
+ sendMessage({
+ authorId: userId,
+ text: textMessage,
+ timeSent: Date.now(),
+ id: getUuid(),
+ })
setTextMessage('')
}
@@ -59,9 +66,7 @@ export function Room({
return (
Room ID: {roomId}
-
- Open this page in another tab and open the console.
-
+ Open this page in another tab.