titlehook for dynamic tab titles

src/layout/pages/Home.tsx

@@ -1,10 +1,14 @@
 import React from "react";
 import {GHButton} from "../components/Button";
+import {Link} from "react-router-dom";
+import useTitle from "../../utils/TitleHook";
 
 const ROOM_URL = 'http://localhost:5062/room';
 
 const Home = () => {
 
+    useTitle('Home');
+
     const [rooms, setRooms] = React.useState<string[]>([]);
 
     React.useEffect(() => {
@@ -21,17 +25,13 @@ const Home = () => {
         });
     }
 
-    const gotoRoom = (roomId: string) => {
-        window.location.href = `/room/${roomId}`;
-    }
-
     return (
         <div>
             <GHButton onClick={handleCreateRoom}>Create Room</GHButton>
             <ul>
                 {
                     rooms.map((room, index) => {
-                        return <li key={index} onClick={() => gotoRoom(room)}>{room}</li>
+                        return <li key={index}><Link to={`room/${room}`}>{room}</Link></li>
                     })
                 }
             </ul>

src/layout/pages/Room.tsx

@@ -2,9 +2,12 @@ import useWebSocket from "react-use-websocket";
 import React from "react";
 import {useParams} from "react-router";
 import {GHButton} from "../components/Button";
+import useTitle from "../../utils/TitleHook";
 
 const Room = () => {
 
+    useTitle('Mau!');
+
     const {roomId} = useParams();
 
     const WS_URL = `ws://localhost:5062/room/${roomId}`;
@@ -38,7 +41,10 @@ const Room = () => {
         <div>
             <h1>Room {roomId}</h1>
             <GHButton onClick={handleLeaveRoom}>Leave Room</GHButton>
-            <form>
+            <form onSubmit={(event) => {
+                event.preventDefault();
+                handleSend();
+            }}>
                 <input type="text" name="message" placeholder="Send a message" value={message}
                        onChange={handleMessageChange}/>
                 <span onClick={handleSend}>Send</span>

src/utils/TitleHook.ts

@@ -0,0 +1,14 @@
+import React from "react";
+
+const useTitle = (title: string) => {
+    React.useEffect(() => {
+        const prevTitle = document.title;
+        document.title = title;
+
+        return () => {
+            document.title = prevTitle;
+        };
+    }, [title]);
+};
+
+export default useTitle;