src/layout/components/Button.tsx

@@ -1,13 +1,10 @@
-import React, {FunctionComponent} from "react";
+import React, {ButtonHTMLAttributes, DetailedHTMLProps, FunctionComponent} from "react";
 
-interface Props {
-    className?: string
-    onClick?: () => void
-    children?: React.ReactNode
-}
+export const GHButton: FunctionComponent<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>> = (props) => {
+
+    const {className, ...rest} = props;
 
-export const GHButton: FunctionComponent<Props> = ({className, onClick, children}) => {
     return (
-        <span className={`gh-button ${className}`} onClick={onClick}>{children}</span>
+        <button className={`gh-button ${className}`} {...rest}></button>
     );
 }

src/layout/pages/Room.tsx

@@ -1,5 +1,5 @@
 import useWebSocket from "react-use-websocket";
-import React from "react";
+import React, {FormEvent} from "react";
 import {useNavigate, useParams} from "react-router";
 import {GHButton} from "../components/Button";
 import useTitle from "../../utils/hooks/TitleHook";
@@ -91,11 +91,13 @@ const Room = () => {
         });
     }
 
-    const handleChat = (message: string) => {
+    const handleChat = (e: FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
         handleSend({
             Type: "CHAT",
-            Payload: message
+            Payload: chatInput
         });
+        setChatInput('');
     }
 
     return (
@@ -103,8 +105,10 @@ const Room = () => {
             <h1>Room {roomId}</h1>
             <GHButton onClick={handleLeaveRoom}>Leave Room</GHButton>
             <Game gameState={gameState} handleCardSend={handleCardSend} handleDraw={handleDraw} handleChoice={handleChoice}/>
+            <form onSubmit={handleChat}>
                 <input type="text" placeholder={"Chat"} value={chatInput} onChange={(e) => setChatInput(e.target.value)} />
-            <button onClick={() => handleChat(chatInput)}>Send</button>
+                <GHButton type={"submit"}>Send</GHButton>
+            </form>
             <ul>
                 {chatMessages.map((message, index) => (
                     <li key={index}>{message.PlayerName}: {message.Message}</li>