Added room functionality

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