feat: assign userId

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 (
     <div className="Chitchatter">
       <Routes>
         {['/', '/index.html'].map(path => (
           <Route key={path} path={path} element={<Home />} />
         ))}
-        <Route path="/public/:roomId" element={<PublicRoom />} />
+        <Route
+          path="/public/:roomId"
+          element={<PublicRoom userId={userId} />}
+        />
       </Routes>
     </div>
   )

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(
       <RouteStub>
-        <Room />
+        <Room userId={stubUserId} />
       </RouteStub>
     )
   })
@@ -50,7 +52,7 @@ describe('Room', () => {
   test('send button is disabled', () => {
     render(
       <RouteStub>
-        <Room />
+        <Room userId={stubUserId} />
       </RouteStub>
     )
 
@@ -61,7 +63,7 @@ describe('Room', () => {
   test('inputting text enabled send button', () => {
     render(
       <RouteStub>
-        <Room />
+        <Room userId={stubUserId} />
       </RouteStub>
     )
 
@@ -74,7 +76,7 @@ describe('Room', () => {
   test('sending a message clears the text input', () => {
     render(
       <RouteStub>
-        <Room />
+        <Room userId={stubUserId} />
       </RouteStub>
     )
 
@@ -88,7 +90,10 @@ describe('Room', () => {
   test('message is sent to peer', () => {
     render(
       <RouteStub>
-        <Room getUuid={mockGetUuid.mockImplementation(() => 'abc123')} />
+        <Room
+          getUuid={mockGetUuid.mockImplementation(() => 'abc123')}
+          userId={stubUserId}
+        />
       </RouteStub>
     )
 
@@ -97,6 +102,7 @@ describe('Room', () => {
     userEvent.type(textInput, 'hello')
     userEvent.click(sendButton)
     expect(mockMessagedSender).toHaveBeenCalledWith({
+      authorId: stubUserId,
       text: 'hello',
       timeSent: 100,
       id: 'abc123',

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<HTMLFormElement>
   ) => {
     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 (
     <div className="p-4">
       <Typography>Room ID: {roomId}</Typography>
-      <Typography>
+      <Typography>Open this page in another tab.</Typography>
-        Open this page in another tab and open the console.
-      </Typography>
       <form onSubmit={handleMessageSubmit} className="max-w-xl mt-8">
         <FormControl fullWidth>
           <TextField

src/models/chat.ts

@@ -2,6 +2,7 @@ export interface UnsentMessage {
   id: string
   text: string
   timeSent: number
+  authorId: string
 }
 
 export interface ReceivedMessage extends UnsentMessage {

src/pages/PublicRoom/PublicRoom.tsx

@@ -1,5 +1,9 @@
 import { Room } from 'components/Room'
 
-export function PublicRoom() {
+interface PublicRoomProps {
-  return <Room />
+  userId: string
+}
+
+export function PublicRoom({ userId }: PublicRoomProps) {
+  return <Room userId={userId} />
 }