5 files changed, 56 insertions, 16 deletions

diff --git a/client/app.css b/client/app.css
index 016c256..09fb38e 100644
--- a/client/app.css
+++ b/client/app.css
@@ -66,11 +66,23 @@ body {
   box-shadow: rgb( 0, 0, 0, 0.6) 6px 45px 45px -12px;
 }
 
-.chat {
+.chat-container {
   border-bottom: 1px solid #d65d0e;
   height: 200px;
-  overflow-y: scroll;
   padding-bottom: 12px;
+  display: flex;
+  flex-direction: row;
+  min-height: min-content;
+}
+
+.chat-box {
+  flex: 3;
+  overflow-y: scroll;
+}
+
+.chat-connections {
+  flex: 1;
+  overflow-y: scroll;
 }
 
 * {
@@ -116,4 +128,5 @@ body {
   color: #8ec07c;
   border-radius: 8px;
   display: inline-block;
-}
\ No newline at end of file
+}
+
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();
       }
     });
diff --git a/client/utils/use_messages.js b/client/utils/use_chat.js
index e3a501e..d5250bf 100644
--- a/client/utils/use_messages.js
+++ b/client/utils/use_chat.js
@@ -2,9 +2,11 @@ import { useState, useContext, useEffect, useRef } from 'react';
 import { AuthContext } from './auth_context';
 import { io } from 'socket.io-client';
 
-export const useMessages = (chatRoom) => {
+export const useChat = (chatRoom) => {
   const [messages, setMessages] = useState([]);
+  const [connections, setConnections] = useState([]);
   const messageRef = useRef([]);
+  const connectionsRef = useRef([]);
   const [socket, setSocket] = useState({});
   const [authToken] = useContext(AuthContext);
 
@@ -25,6 +27,10 @@ export const useMessages = (chatRoom) => {
         messageRef.current.push(message);
         setMessages([...messageRef.current]);
       });
+      socket.on('userlist', ({ users }) => {
+        connectionsRef.current = users;
+        setConnections([...connectionsRef.current]);
+      });
       return () => {
         socket.off('new-message');
         socket.close();
@@ -38,5 +44,5 @@ export const useMessages = (chatRoom) => {
     }
   };
 
-  return [messages, sendMessage];
+  return [connections, messages, sendMessage];
 };