feat: add message sending UI

src/components/Room/Room.tsx

@@ -1,12 +1,17 @@
+import { useState } from 'react'
 import { useParams } from 'react-router-dom'
 import Button from '@mui/material/Button'
+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'
 
 export function Room() {
   const { roomId = '' } = useParams()
 
+  const [message, setMessage] = useState('')
+
   const peerRoom = usePeerRoom({
     appId: `${encodeURI(window.location.origin)}_${process.env.REACT_APP_NAME}`,
     roomId,
@@ -17,24 +22,50 @@ export function Room() {
     PeerActions.MESSAGE
   )
 
+  const handleMessageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { value } = event.target
+    setMessage(value)
+  }
+
+  const handleMessageSubmit = (
+    event: React.SyntheticEvent<HTMLFormElement>
+  ) => {
+    event.preventDefault()
+    sendMessage(message)
+    setMessage('')
+  }
+
   receiveMessage(message => {
     console.log(message)
   })
 
   return (
-    <div>
+    <div className="p-4">
       <Typography>Room ID: {roomId}</Typography>
       <Typography>
         Open this page in another tab and open the console.
       </Typography>
-      <Button
+      <form onSubmit={handleMessageSubmit} className="max-w-xl mt-8">
-        onClick={() => {
+        <FormControl fullWidth>
-          sendMessage('Hello!')
+          <TextField
-        }}
+            label="Your message"
-        variant="contained"
+            variant="outlined"
-      >
+            value={message}
-        Say hi
+            onChange={handleMessageChange}
-      </Button>
+            size="medium"
+          />
+        </FormControl>
+        <Button
+          variant="contained"
+          type="submit"
+          disabled={message.length === 0}
+          sx={{
+            marginTop: 2,
+          }}
+        >
+          Send
+        </Button>
+      </form>
     </div>
   )
 }

src/services/PeerRoom/PeerRoom.ts

@@ -25,7 +25,7 @@ export class PeerRoom {
 // Memoization isn't just a performance optimization here. It is necessary to
 // prevent subsequent calls to getPeerRoom from causing a room collision due to
 // the amount of time it takes for Trystero rooms to be torn down (which is an
-// asynchronous operation).
+// asynchronous operation that cannot be `await`-ed).
 export const getPeerRoom = memoize((config: RoomConfig, roomId: string) => {
   return new PeerRoom(config, roomId)
 })