frontend-next/src/components/app/datatypes.js

@@ -1,6 +1,9 @@
 import Link from "next/link"
 import { useEffect, useState } from "react";
 
+// Icons
+import PersonIcon from '@mui/icons-material/Person';
+
 // Colors for Messages
 const userColors = [
   "#ff80ed",
@@ -160,12 +163,33 @@ export function Member({ memberObj }) {
  * @returns {Object} - Chat Room Component
  */
 export function ChatRoomSidebar({ roomObj }) {
+  if ("users" in roomObj) {
+    if ("online" in roomObj.users) {
+      var roomOnline = Object.keys(roomObj.users.online).length
+    } else {
+      var roomOnline = 0
+    }
+    if ("all" in roomObj.users) {
+      var roomTotal = Object.keys(roomObj.users.all).length
+    } else {
+      var roomTotal = 0
+    }
+  } else {
+    var roomOnline = 0
+    var roomTotal = 0
+  }
   return (
     <div className="border-[black] border-1 shadow-lg p-2 m-2 rounded-lg cursor-pointer">
       <Link href={`/chat?room=${roomObj.path}/${roomObj.name}-${roomObj.timestamp}`}>
-        <div className="col-span-2">
-          <div className="font-bold">{roomObj.name}</div>
-          <div className="italic">{roomObj.description}</div>
+        <div className="grid grid-cols-3">
+          <div>
+            <PersonIcon/>
+            <div>{roomOnline} / {roomTotal}</div>
+          </div>
+          <div className="col-span-2">
+            <div className="font-bold">{roomObj.name}</div>
+            <div className="italic">{roomObj.description}</div>
+          </div>
         </div>
       </Link>
     </div>

frontend-next/src/components/app/map/geo.js

@@ -29,8 +29,6 @@ function NearbyRoomMarkers({ loc, user }) {
 
           const newMarkers = Object.values(rooms).map((roomObj, index) => {
             const markerKey = roomObj.path + "-" + index;
-            console.log("RoomObj", roomObj);
-
             return (
               // Want to change this to be something other than markers (or something extra)
               <Marker

frontend-next/src/components/app/sidebar/home.js

@@ -88,13 +88,15 @@ export function Sidebar({user,location,loadingLoc}) {
   // Add myRooms to Sidebar
   var myRoomArr = [];
   for (var room in user.rooms) {
-    var newRoom = (
-      <ChatRoomSidebar
-        roomObj={user.rooms[room]}
-        key={user.rooms[room].timestamp}
-      />
-    );
-    myRoomArr.push(newRoom);
+    get(ref(database, `/rooms/${user.rooms[room].path}/${user.rooms[room].name}-${user.rooms[room].timestamp}`)).then((snapshot) => {
+      var newRoom = (
+        <ChatRoomSidebar
+          roomObj={snapshot.val()}
+          key={snapshot.val().timestamp}
+        />
+      );
+      myRoomArr.push(newRoom);
+    })
   }
 
   useEffect(() => {