3 files changed, 32 insertions, 11 deletions
diff --git a/client/components/chatroom/_chat_room.jsx b/client/components/chatroom/_chat_room.jsx
index e70715c..22fb399 100644
--- a/client/components/chatroom/_chat_room.jsx
+++ b/client/components/chatroom/_chat_room.jsx
@@ -1,6 +1,6 @@
 import { useEffect, useState, useContext } from 'react';
 import { ApiContext } from '../../utils/api_context';
-import { useMessages } from '../../utils/use_messages';
+import { useChat } from '../../utils/use_chat';
 import { Link, useParams } from 'react-router-dom';
 import { generateGruvboxFromString } from '../../utils/generate_gruvbox';
 
@@ -11,7 +11,7 @@ import { generateGruvboxFromString } from '../../utils/generate_gruvbox';
 export const ChatRoom = () => {
   const { id } = useParams();
   const [chatRoom, setChatRoom] = useState('');
-  const [messages, sendMessage] = useMessages(chatRoom);
+  const [connections, messages, sendMessage] = useChat(chatRoom);
   const [message, setMessage] = useState('');
   const [color, setColor] = useState(generateGruvboxFromString('placeholder'));
   const [user, setUser] = useState({});
@@ -56,14 +56,26 @@ export const ChatRoom = () => {
       <div style={{ textAlign: 'center' }}>
         <h2>{chatRoom?.name || `Chat Room ${chatRoom?.id}`}</h2>
       </div>
-      <div id="chat" className="chat">
-        <p>Welcome!</p>
-        {messages.map((message) => (
-          <div key={message.id} style={{ lineBreak: 'normal' }}>
-            <span style={{ color: generateGruvboxFromString(message.userName) }}>{message.userName}: </span>
-            <span>{message.content}</span>
-          </div>
-        ))}
+      <div className="chat-container">
+        <div id="chat" className="chat-box">
+          {messages.map((message) => (
+            <div key={message.id} style={{ lineBreak: 'normal' }}>
+              <span style={{ color: generateGruvboxFromString(message.userName) }}>{message.userName}: </span>
+              <span>{message.content}</span>
+            </div>
+          ))}
+        </div>
+        <div className="chat-connections">
+          <h1>Connected Users ({connections.length})</h1>
+          <hr />
+          <ul>
+            {connections.map((user) => (
+              <li key={user.id} style={{ color: generateGruvboxFromString(user.userName) }}>
+                {user.userName}
+              </li>
+            ))}
+          </ul>
+        </div>
       </div>
       <div>
         <textarea
diff --git a/client/components/home/_home.jsx b/client/components/home/_home.jsx
index a31fd63..f275d3d 100644
--- a/client/components/home/_home.jsx
+++ b/client/components/home/_home.jsx
@@ -1,4 +1,5 @@
 import { useContext, useEffect, useState } from 'react';
+import toast from 'react-hot-toast';
 import { useNavigate } from 'react-router';
 import { ApiContext } from '../../utils/api_context';
 import { AuthContext } from '../../utils/auth_context';
@@ -31,6 +32,8 @@ export const Home = () => {
     const joinable = await api.get(`/chat_rooms/${id}/joinable?lat=${userPosition.lat}&lng=${userPosition.lng}`);
     if (joinable) {
       navigate(`/rooms/${id}`);
+    } else {
+      toast.error('Room is not joinable');
     }
   };
 
diff --git a/client/components/map/chat_room_geoman.jsx b/client/components/map/chat_room_geoman.jsx
index a39b45a..07d0a4c 100644
--- a/client/components/map/chat_room_geoman.jsx
+++ b/client/components/map/chat_room_geoman.jsx
@@ -2,6 +2,7 @@ import { useLeafletContext } from '@react-leaflet/core';
 import L from 'leaflet';
 import markerIconPng from 'leaflet/dist/images/marker-icon.png';
 import { useEffect, useContext, useState } from 'react';
+import toast from 'react-hot-toast';
 import { ApiContext } from '../../utils/api_context';
 
 const userPositionBubble = {
@@ -162,7 +163,12 @@ export const Geoman = ({ user, userPos, joinRoom }) => {
           longitude,
           radius: shape.layer.getRadius(),
         });
-        console.log(chatRoom);
+        if (chatRoom.error) {
+          toast.error(chatRoom.error);
+        } else if (chatRoom.id) {
+          toast.success('Chat room created');
+        }
+
         reRender();
       }
     });