feat: display received messages

src/components/Room/Room.tsx

@@ -5,38 +5,46 @@ import FormControl from '@mui/material/FormControl'
 import Typography from '@mui/material/Typography'
 import TextField from '@mui/material/TextField'
 
-import { usePeerRoom, usePeerRoomAction, PeerActions } from 'hooks/usePeerRoom'
+import { usePeerRoom, usePeerRoomAction } from 'hooks/usePeerRoom'
+import { PeerActions } from 'models/network'
+import { UnsentMessage, ReceivedMessage } from 'models/chat'
 
 export function Room() {
   const { roomId = '' } = useParams()
 
-  const [message, setMessage] = useState('')
+  const [textMessage, setTextMessage] = useState('')
+  const [receivedMessages, setReceivedMessages] = useState<ReceivedMessage[]>(
+    []
+  )
 
   const peerRoom = usePeerRoom({
     appId: `${encodeURI(window.location.origin)}_${process.env.REACT_APP_NAME}`,
     roomId,
   })
 
-  const [sendMessage, receiveMessage] = usePeerRoomAction<string>(
+  const [sendMessage, receiveMessage] = usePeerRoomAction<UnsentMessage>(
     peerRoom,
     PeerActions.MESSAGE
   )
 
   const handleMessageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const { value } = event.target
-    setMessage(value)
+    setTextMessage(value)
   }
 
   const handleMessageSubmit = (
     event: React.SyntheticEvent<HTMLFormElement>
   ) => {
     event.preventDefault()
-    sendMessage(message)
-    setMessage('')
+    sendMessage({ text: textMessage, timeSent: Date.now() })
+    setTextMessage('')
   }
 
   receiveMessage(message => {
-    console.log(message)
+    setReceivedMessages([
+      ...receivedMessages,
+      { ...message, timeReceived: Date.now() },
+    ])
   })
 
   return (
@@ -50,7 +58,7 @@ export function Room() {
           <TextField
             label="Your message"
             variant="outlined"
-            value={message}
+            value={textMessage}
             onChange={handleMessageChange}
             size="medium"
           />
@@ -58,7 +66,7 @@ export function Room() {
         <Button
           variant="contained"
           type="submit"
-          disabled={message.length === 0}
+          disabled={textMessage.length === 0}
           sx={{
             marginTop: 2,
           }}
@@ -66,6 +74,11 @@ export function Room() {
           Send
         </Button>
       </form>
+      <div>
+        {receivedMessages.map((message, idx) => (
+          <Typography key={`${idx}_${message}`}>{message.text}</Typography>
+        ))}
+      </div>
     </div>
   )
 }

src/hooks/usePeerRoom/usePeerRoomAction.ts

@@ -1,10 +1,7 @@
 import { useState } from 'react'
 
 import { PeerRoom } from 'services/PeerRoom'
-
-export enum PeerActions {
-  MESSAGE = 'MESSAGE',
-}
+import { PeerActions } from 'models/network'
 
 export function usePeerRoomAction<T>(peerRoom: PeerRoom, action: PeerActions) {
   const [peerRoomAction] = useState(() => peerRoom.makeAction<T>(action))

src/models/chat.ts

@@ -0,0 +1,8 @@
+export interface UnsentMessage {
+  text: string
+  timeSent: number
+}
+
+export interface ReceivedMessage extends UnsentMessage {
+  timeReceived: number
+}

src/models/network.ts

@@ -0,0 +1,3 @@
+export enum PeerActions {
+  MESSAGE = 'MESSAGE',
+}