feat: show full message transcript

src/components/ChatTranscript/ChatTranscript.tsx

@@ -0,0 +1,17 @@
+import Typography from '@mui/material/Typography'
+
+import { UnsentMessage, ReceivedMessage } from 'models/chat'
+
+export interface ChatTranscriptProps {
+  messageLog: Array<UnsentMessage | ReceivedMessage>
+}
+
+export const ChatTranscript = ({ messageLog }: ChatTranscriptProps) => {
+  return (
+    <div className="ChatTranscript">
+      {messageLog.map((message, idx) => (
+        <Typography key={`${idx}_${message}`}>{message.text}</Typography>
+      ))}
+    </div>
+  )
+}

src/components/ChatTranscript/index.ts

@@ -0,0 +1 @@
+export * from './ChatTranscript'

src/components/Room/Room.tsx

@@ -9,6 +9,7 @@ import TextField from '@mui/material/TextField'
 import { usePeerRoom, usePeerRoomAction } from 'hooks/usePeerRoom'
 import { PeerActions } from 'models/network'
 import { UnsentMessage, ReceivedMessage } from 'models/chat'
+import { ChatTranscript } from 'components/ChatTranscript'
 
 export interface RoomProps {
   appId?: string
@@ -24,9 +25,9 @@ export function Room({
   const { roomId = '' } = useParams()
 
   const [textMessage, setTextMessage] = useState('')
-  const [receivedMessages, setReceivedMessages] = useState<ReceivedMessage[]>(
+  const [messageLog, setMessageLog] = useState<
-    []
+    Array<ReceivedMessage | UnsentMessage>
-  )
+  >([])
 
   const peerRoom = usePeerRoom(
     {
@@ -49,20 +50,22 @@ export function Room({
     event: React.SyntheticEvent<HTMLFormElement>
   ) => {
     event.preventDefault()
-    sendMessage({
+
+    const unsentMessage: UnsentMessage = {
       authorId: userId,
       text: textMessage,
       timeSent: Date.now(),
       id: getUuid(),
-    })
+    }
+
+    sendMessage(unsentMessage)
+
     setTextMessage('')
+    setMessageLog([...messageLog, unsentMessage])
   }
 
   receiveMessage(message => {
-    setReceivedMessages([
+    setMessageLog([...messageLog, { ...message, timeReceived: Date.now() }])
-      ...receivedMessages,
-      { ...message, timeReceived: Date.now() },
-    ])
   })
 
   return (
@@ -90,11 +93,7 @@ export function Room({
           Send
         </Button>
       </form>
-      <div>
+      <ChatTranscript messageLog={messageLog} />
-        {receivedMessages.map((message, idx) => (
-          <Typography key={`${idx}_${message}`}>{message.text}</Typography>
-        ))}
-      </div>
     </div>
   )
 }