Added room functionality

src/config/Router.tsx

@@ -2,12 +2,14 @@ import React from "react";
 import {BrowserRouter, Route, Routes} from "react-router-dom";
 import Home from "../layout/pages/Home";
 import NotFound from "../layout/pages/NotFound";
+import Room from "../layout/pages/Room";
 
 const Router = () => {
     return (
         <BrowserRouter>
             <Routes>
                 <Route path="/" element={<Home/>}/>
+                <Route path="room/:roomId" element={<Room/>}/>
                 <Route path="*" element={<NotFound/>}/>
             </Routes>
         </BrowserRouter>

src/layout/pages/Home.tsx

@@ -1,42 +1,42 @@
 import React from "react";
-import useWebSocket from 'react-use-websocket';
 
-const WS_URL = "ws://localhost:5062/ws";
+const ROOM_URL = 'http://localhost:5062/room';
 
 const Home = () => {
 
-    const [message, setMessage] = React.useState<string>('');
+    const [rooms, setRooms] = React.useState<string[]>([]);
-    const [messages, setMessages] = React.useState<string[]>([]);
 
-    const websocket = useWebSocket(WS_URL, {
+    React.useEffect(() => {
-        onOpen: () => {
+        fetch(ROOM_URL)
-            console.log('WebSocket connection established.');
+            .then((r) => {
-        },
+                console.log(r);
-        onMessage: (event) => {
+                return r.json();
-            setMessages([...messages, event.data]);
+            })
-        }
+            .then((data) => {
+                console.log(data);
+                setRooms(data);
             });
+    }, []);
 
-    const handleSend = () => {
+    const handleCreateRoom = () => {
-        websocket.sendMessage(message);
+        fetch(ROOM_URL, {
-        setMessage('');
+            method: 'POST',
+        }).then(r => r.json()).then(data => {
+            setRooms([...rooms, data]);
+        });
     }
 
-    const handleMessageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const gotoRoom = (roomId: string) => {
-        setMessage(event.target.value);
+        window.location.href = `/room/${roomId}`;
     }
 
     return (
         <div>
-            <form>
+            <button onClick={handleCreateRoom}>Create Room</button>
-                <input type="text" name="message" placeholder="Send a message" value={message}
-                       onChange={handleMessageChange}/>
-                <span onClick={handleSend}>Send</span>
-            </form>
             <ul>
                 {
-                    messages.map((message, index) => {
+                    rooms.map((room, index) => {
-                        return <li key={index}>{message}</li>
+                        return <li key={index} onClick={() => gotoRoom(room)}>{room}</li>
                     })
                 }
             </ul>

src/layout/pages/Room.tsx

@@ -0,0 +1,51 @@
+import useWebSocket from "react-use-websocket";
+import React from "react";
+import {useParams} from "react-router";
+
+const Room = () => {
+
+    const {roomId} = useParams();
+
+    const WS_URL = `ws://localhost:5062/room/${roomId}`;
+
+    const [message, setMessage] = React.useState<string>('');
+    const [messages, setMessages] = React.useState<string[]>([]);
+
+    const websocket = useWebSocket(WS_URL, {
+        onOpen: () => {
+            console.log('WebSocket connection established.');
+        },
+        onMessage: (event) => {
+            setMessages([...messages, event.data]);
+        }
+    });
+
+    const handleSend = () => {
+        websocket.sendMessage(message);
+        setMessage('');
+    }
+
+    const handleMessageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setMessage(event.target.value);
+    }
+
+    return (
+        <div>
+            <h1>Room {roomId}</h1>
+            <form>
+                <input type="text" name="message" placeholder="Send a message" value={message}
+                       onChange={handleMessageChange}/>
+                <span onClick={handleSend}>Send</span>
+            </form>
+            <ul>
+                {
+                    messages.map((message, index) => {
+                        return <li key={index}>{message}</li>
+                    })
+                }
+            </ul>
+        </div>
+    )
+}
+
+export default Room;