Make functions in Room component pure

web-chat/src/MessageInput.tsx

@@ -4,16 +4,18 @@ import { useWaku } from './WakuContext';
 
 interface Props {
   messageHandler: (msg: string) => void;
-  sendMessage: () => void;
+  sendMessage: (() => Promise<void>) | undefined;
 }
 
 export default function MessageInput(props: Props) {
   const [inputText, setInputText] = useState<string>('');
   const { waku } = useWaku();
 
-  const sendMessage = () => {
-    props.sendMessage();
+  const sendMessage = async () => {
+    if (props.sendMessage) {
+      await props.sendMessage();
       setInputText('');
+    }
   };
 
   const messageHandler = (event: ChangeEvent<HTMLInputElement>) => {
@@ -21,9 +23,9 @@ export default function MessageInput(props: Props) {
     props.messageHandler(event.target.value);
   };
 
-  const keyPressHandler = (event: KeyboardEvent<HTMLInputElement>) => {
+  const keyPressHandler = async (event: KeyboardEvent<HTMLInputElement>) => {
     if (event.key === 'Enter') {
-      sendMessage();
+      await sendMessage();
     }
   };
 

web-chat/src/Room.tsx

@@ -16,27 +16,6 @@ export default function Room(props: Props) {
   let [messageToSend, setMessageToSend] = useState<string>('');
   const { waku } = useWaku();
 
-  const messageHandler = (msg: string) => {
-    setMessageToSend(msg);
-  };
-
-  const sendMessage = async () => {
-    if (messageToSend.startsWith('/')) {
-      props.commandHandler(messageToSend);
-    } else {
-      const chatMessage = new ChatMessage(
-        new Date(),
-        props.nick,
-        messageToSend
-      );
-      const wakuMsg = WakuMessage.fromBytes(
-        chatMessage.encode(),
-        ChatContentTopic
-      );
-      await waku!.relay.send(wakuMsg);
-    }
-  };
-
   return (
     <div
       className="chat-container"
@@ -47,14 +26,43 @@ export default function Room(props: Props) {
       </div>
       <div className="chat-input" style={{ flexGrow: 0, height: '120px' }}>
         <MessageInput
-          messageHandler={messageHandler}
-          sendMessage={sendMessage}
+          messageHandler={setMessageToSend}
+          sendMessage={
+            waku
+              ? async () => {
+                  return handleMessage(
+                    messageToSend,
+                    props.nick,
+                    props.commandHandler,
+                    waku.relay.send.bind(waku.relay)
+                  );
+                }
+              : undefined
+          }
         />
       </div>
     </div>
   );
 }
 
+async function handleMessage(
+  message: string,
+  nick: string,
+  commandHandler: (cmd: string) => void,
+  messageSender: (msg: WakuMessage) => Promise<void>
+) {
+  if (message.startsWith('/')) {
+    commandHandler(message);
+  } else {
+    const chatMessage = new ChatMessage(new Date(), nick, message);
+    const wakuMsg = WakuMessage.fromBytes(
+      chatMessage.encode(),
+      ChatContentTopic
+    );
+    return messageSender(wakuMsg);
+  }
+}
+
 interface LinesProps {
   messages: ChatMessage[];
 }