From c2095c8ae75db35489b1c17db66ae34e7eddc22e Mon Sep 17 00:00:00 2001
From: DTieman <djurre.tieman@gmail.com>
Date: Wed, 15 Mar 2023 15:04:04 +0100
Subject: [PATCH] titlehook for dynamic tab titles

---
 src/layout/pages/Home.tsx | 10 +++++-----
 src/layout/pages/Room.tsx |  8 +++++++-
 src/utils/TitleHook.ts    | 14 ++++++++++++++
 3 files changed, 26 insertions(+), 6 deletions(-)
 create mode 100644 src/utils/TitleHook.ts

diff --git a/src/layout/pages/Home.tsx b/src/layout/pages/Home.tsx
index 5ade6fe..4ceeec9 100644
--- a/src/layout/pages/Home.tsx
+++ b/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>
diff --git a/src/layout/pages/Room.tsx b/src/layout/pages/Room.tsx
index bbd0cf0..ff83fbd 100644
--- a/src/layout/pages/Room.tsx
+++ b/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>
diff --git a/src/utils/TitleHook.ts b/src/utils/TitleHook.ts
new file mode 100644
index 0000000..ce74d6b
--- /dev/null
+++ b/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;
\ No newline at end of file