From 126456eced5982bc0b47838fdd4bea69b4ef1edb Mon Sep 17 00:00:00 2001
From: Jeremy Kahn <jeremyckahn@gmail.com>
Date: Wed, 17 Aug 2022 09:28:22 -0500
Subject: [PATCH] feat: add message sending UI

---
 src/components/Room/Room.tsx      | 49 +++++++++++++++++++++++++------
 src/services/PeerRoom/PeerRoom.ts |  2 +-
 2 files changed, 41 insertions(+), 10 deletions(-)

diff --git a/src/components/Room/Room.tsx b/src/components/Room/Room.tsx
index e641eb6..db934a9 100644
--- a/src/components/Room/Room.tsx
+++ b/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
-        onClick={() => {
-          sendMessage('Hello!')
-        }}
-        variant="contained"
-      >
-        Say hi
-      </Button>
+      <form onSubmit={handleMessageSubmit} className="max-w-xl mt-8">
+        <FormControl fullWidth>
+          <TextField
+            label="Your message"
+            variant="outlined"
+            value={message}
+            onChange={handleMessageChange}
+            size="medium"
+          />
+        </FormControl>
+        <Button
+          variant="contained"
+          type="submit"
+          disabled={message.length === 0}
+          sx={{
+            marginTop: 2,
+          }}
+        >
+          Send
+        </Button>
+      </form>
     </div>
   )
 }
diff --git a/src/services/PeerRoom/PeerRoom.ts b/src/services/PeerRoom/PeerRoom.ts
index d29a1d8..d1051f3 100644
--- a/src/services/PeerRoom/PeerRoom.ts
+++ b/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)
 })