handle data joining and leaving office room

components/Dashboard/Office.tsx

@@ -1,3 +1,4 @@
+import { Tooltip } from "antd";
 import {
   collection,
   getFirestore,
@@ -81,15 +82,21 @@ export default function Office() {
   // if there are none, then show user button to create initial office rooms and then create them
 
   return (
-    <section className="p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md w-96 shrink-0 flex-1">
+    <section className="p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md w-96 shrink-0 flex-1 overflow-auto">
-      <span className="flex flex-row justify-start items-center pb-5">
+      <Tooltip
-        <span className="flex flex-col">
+        title={
-          <span className="text-white uppercase">Office</span>
+          "Tell teammates above to chat in the 'kitchen' or other places in the office."
+        }
+      >
+        <span className="flex flex-row justify-start items-center pb-5">
+          <span className="flex flex-col">
+            <span className="text-white uppercase">Office</span>
+          </span>
         </span>
-      </span>
+      </Tooltip>
 
       {/* all office rooms  */}
-      <span className="flex flex-col space-y-5 overflow-auto">
+      <span className="flex flex-col overflow-auto pr-2 space-y-2">
         {allOfficeRooms.map((officeRoom) => (
           <OfficeCard key={officeRoom.id} officeRoom={officeRoom} />
         ))}

components/Dashboard/Rooms.tsx

@@ -362,7 +362,7 @@ export default function DashboardRoom() {
   }
 
   return (
-    <section className="p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md flex-1">
+    <section className="p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md flex-1 overflow-auto">
       {/*  modal for creating room */}
       <CreateOrUpdateRoom
         show={showModalType == ShowModalType.createRoom}

components/OfficeCard.tsx

@@ -1,13 +1,19 @@
-import { Avatar } from "antd";
+import { Avatar, Tooltip } from "antd";
+import toast from "react-hot-toast";
+import { FaPhoneSlash, FaPlus } from "react-icons/fa";
 import { useAuth } from "../contexts/authContext";
 import { useTeamDashboardContext } from "../contexts/teamDashboardContext";
 import OfficeRoom, { OfficeRoomState } from "../models/officeRoom";
 import { User } from "../models/user";
+import OfficeRoomService from "../services/officeRoomService";
+import { VscDebugDisconnect } from "react-icons/vsc";
 
 interface IOfficeCard {
   officeRoom: OfficeRoom;
 }
 
+const officeRoomService = new OfficeRoomService();
+
 export default function OfficeCard(props: IOfficeCard) {
   const { currUser } = useAuth();
   const { teamUsersMap, user } = useTeamDashboardContext();
@@ -24,8 +30,63 @@ export default function OfficeCard(props: IOfficeCard) {
     return results;
   }, [] as User[]);
 
+  async function handleJoinOfficeRoom() {
+    // make sure user is not in another room
+    // get agora token from cloud function
+    // join channel for agora
+
+    if (props.officeRoom.members.includes(currUser.uid)) {
+      toast.error("You are already in this office room!");
+      return;
+    }
+
+    try {
+      const newMembers = [...props.officeRoom.members, currUser.uid];
+      await officeRoomService.updateMembersInOfficeRoom(
+        props.officeRoom.id,
+        newMembers
+      );
+    } catch (error) {
+      console.error(error);
+      toast.error("problem joining office room");
+    }
+  }
+
+  async function handleLeaveOfficeRoom() {
+    // leave the channel for agora
+
+    // leave from firestore database
+    if (!props.officeRoom.members.includes(currUser.uid)) {
+      toast.error("You are not in this office room!");
+      return;
+    }
+
+    try {
+      const newMembersInRoom = props.officeRoom.members.filter(
+        (memberId) => memberId != currUser.uid
+      );
+
+      await officeRoomService.updateMembersInOfficeRoom(
+        props.officeRoom.id,
+        newMembersInRoom
+      );
+    } catch (error) {
+      console.error(error);
+      toast.error("problem leaving office room");
+    }
+  }
+
+  // check if user is in the office room
+  var isUserInRoom: boolean = false;
+  if (props.officeRoom.members?.includes(currUser.uid)) {
+    isUserInRoom = true;
+  }
+
   return (
-    <span className="flex flex-col">
+    <span
+      className={`flex flex-col transition-all duration-300 hover:bg-gray-200 hover:bg-opacity-25
+     py-5 px-3 rounded-lg ${isUserInRoom ? "bg-orange-500 bg-opacity-25" : ""}`}
+    >
       <span className="flex flex-row justify-start items-center">
         {renderOfficePulse(props.officeRoom.state)}
 
@@ -35,19 +96,39 @@ export default function OfficeCard(props: IOfficeCard) {
         </span>
 
         {/* all members in room */}
-        <span className="ml-auto">
+        <span className="ml-auto items-center flex">
           <Avatar.Group>
             {allMembersInRoom.map((member) => {
-              <Avatar
+              return (
-                src={member.avatarUrl}
+                <Tooltip key={member.id} title={member.nickName}>
-                style={{ backgroundColor: "teal", verticalAlign: "middle" }}
+                  <Avatar
-                className="shadow-xl hover:z-20 hover:cursor-pointer"
+                    src={member.avatarUrl}
-              >
+                    style={{ backgroundColor: "teal", verticalAlign: "middle" }}
-                {member.nickName[0]}
+                    className="shadow-xl hover:z-20 hover:cursor-pointer"
-              </Avatar>;
+                  >
+                    {member.nickName[0]}
+                  </Avatar>
+                </Tooltip>
+              );
             })}
           </Avatar.Group>
         </span>
+
+        {isUserInRoom ? (
+          <button
+            onClick={handleLeaveOfficeRoom}
+            className="ml-2 bg-orange-500 bg-opacity-40 p-2 rounded"
+          >
+            <VscDebugDisconnect className="text-orange-500 text-xl" />
+          </button>
+        ) : (
+          <button
+            onClick={handleJoinOfficeRoom}
+            className="bg-gray-300 bg-opacity-25 p-2 rounded hover:bg-opacity-40"
+          >
+            <FaPlus className="text-lg text-white" />
+          </button>
+        )}
       </span>
     </span>
   );

services/officeRoomService.tsx

@@ -9,7 +9,7 @@ import {
   setDoc,
   writeBatch,
 } from "firebase/firestore";
-import OfficeRoom from "../models/officeRoom";
+import OfficeRoom, { OfficeRoomState } from "../models/officeRoom";
 import { Collections } from "./collections";
 
 export default class OfficeRoomService {
@@ -23,7 +23,7 @@ export default class OfficeRoomService {
     const corner = new OfficeRoom("Corner", teamId, createdByUserId);
     const main = new OfficeRoom("Team Hub", teamId, createdByUserId);
     const handsOnDeck = new OfficeRoom(
-      "All Hand On Deck",
+      "All Hands On Deck",
       teamId,
       createdByUserId
     );
@@ -58,24 +58,27 @@ export default class OfficeRoomService {
   //   }
   // }
 
-  // async updateMembersInRoom(roomId: string, newMembersInRoom: string[]) {
+  async updateMembersInOfficeRoom(
-  //   // if the room is going to be empty, then change status accordingly
+    officeRoomId: string,
-  //   var status: RoomStatus = RoomStatus.live;
+    newMembersInRoom: string[]
-  //   if (newMembersInRoom.length == 0) {
+  ) {
-  //     status = RoomStatus.empty;
+    // if the room is going to be empty, then change status accordingly
-  //   }
+    var state: OfficeRoomState = OfficeRoomState.active;
+    if (newMembersInRoom.length == 0) {
+      state = OfficeRoomState.idle;
+    }
 
-  //   const docRef = doc(this.db, Collections.rooms, roomId);
+    const docRef = doc(this.db, Collections.officeRooms, officeRoomId);
-  //   await setDoc(
+    await setDoc(
-  //     docRef,
+      docRef,
-  //     {
+      {
-  //       status,
+        state,
-  //       membersInRoom: newMembersInRoom,
+        members: newMembersInRoom,
-  //       lastUpdatedDate: serverTimestamp(),
+        lastUpdatedDate: serverTimestamp(),
-  //     },
+      },
-  //     { merge: true }
+      { merge: true }
-  //   );
+    );
-  // }
+  }
 
   // async updateRoom(room: Room) {
   //   const docRef = doc(this.db, Collections.rooms, room.id);