maybe working full?

components/Dashboard/Office.tsx

@@ -1,3 +1,9 @@
+import {
+  ClientConfig,
+  IAgoraRTC,
+  IAgoraRTCClient,
+  IMicrophoneAudioTrack,
+} from "agora-rtc-sdk-ng";
 import { Tooltip } from "antd";
 import {
   collection,
@@ -7,9 +13,11 @@ import {
   where,
 } from "firebase/firestore";
 import { useEffect, useState } from "react";
+import toast from "react-hot-toast";
 import { useAuth } from "../../contexts/authContext";
 import { useTeamDashboardContext } from "../../contexts/teamDashboardContext";
 import OfficeRoom from "../../models/officeRoom";
+import { appId } from "../../services/agoraService";
 import { Collections } from "../../services/collections";
 import OfficeRoomService from "../../services/officeRoomService";
 import OfficeCard from "../OfficeCard";
@@ -18,9 +26,18 @@ const db = getFirestore();
 
 const officeRoomService = new OfficeRoomService();
 
+const config: ClientConfig = {
+  mode: "rtc",
+  codec: "vp8",
+};
+
 export default function Office() {
   const { currUser } = useAuth();
   const { team } = useTeamDashboardContext();
+  const [agoraRtc, setAgoraRtc] = useState<IAgoraRTC>(null);
+  const [agoraRtcClient, setAgoraRtcClient] = useState<IAgoraRTCClient>(null);
+  const [localAudioTrack, setLocalAudioTrack] =
+    useState<IMicrophoneAudioTrack>(null);
 
   const [officeRoomsMap, setOfficeRoomsMap] = useState<Map<string, OfficeRoom>>(
     new Map<string, OfficeRoom>()
@@ -66,6 +83,68 @@ export default function Office() {
     });
   }, []);
 
+  // set up agora stuff
+  useEffect(() => {
+    (async function () {
+      // dynamic import as the server side import doesn't work
+      const AgoraRTC = (await import("agora-rtc-sdk-ng")).default;
+      const agoraClient = AgoraRTC.createClient(config);
+
+      setAgoraRtcClient(agoraClient);
+      setAgoraRtc(AgoraRTC);
+    })();
+  }, []);
+
+  async function handleJoinChannel(channelName: string, agoraToken: string) {
+    const localTrack: IMicrophoneAudioTrack =
+      await agoraRtc.createMicrophoneAudioTrack();
+
+    setLocalAudioTrack(localTrack);
+
+    let init = async (chanName: string) => {
+      agoraRtcClient.on("user-published", async (user, mediaType) => {
+        await agoraRtcClient.subscribe(user, mediaType);
+        console.log("subscribe success");
+
+        if (mediaType === "audio") {
+          user.audioTrack?.play();
+        }
+      });
+
+      agoraRtcClient.on("user-unpublished", async (user, type) => {
+        console.log("unpublished", user, type);
+        if (type === "audio") {
+          user.audioTrack?.stop();
+        }
+
+        await agoraRtcClient.unsubscribe(user);
+      });
+
+      agoraRtcClient.on("user-left", (user) => {
+        console.log("user left", user);
+      });
+
+      await agoraRtcClient.join(appId, chanName, agoraToken, null);
+      if (localTrack) await agoraRtcClient.publish(localTrack);
+    };
+
+    if (localTrack) {
+      console.log("init ready");
+      init(channelName);
+    } else {
+      toast.error("Not ready for joining call");
+      return;
+    }
+  }
+
+  async function handleLeaveChannel() {
+    // destroy local track
+    localAudioTrack?.close();
+
+    // leave all channels
+    await agoraRtcClient.leave();
+  }
+
   const allOfficeRooms = Array.from(officeRoomsMap.values());
 
   allOfficeRooms.sort((a, b) => {
@@ -98,7 +177,12 @@ export default function Office() {
       {/* all office rooms  */}
       <span className="flex flex-col overflow-auto pr-2 space-y-2">
         {allOfficeRooms.map((officeRoom) => (
-          <OfficeCard key={officeRoom.id} officeRoom={officeRoom} />
+          <OfficeCard
+            key={officeRoom.id}
+            officeRoom={officeRoom}
+            handleJoinChannel={handleJoinChannel}
+            handleLeaveChannel={handleLeaveChannel}
+          />
         ))}
         {/* <OfficeCard /> */}
       </span>

components/OfficeCard.tsx

@@ -7,17 +7,16 @@ import OfficeRoom, { OfficeRoomState } from "../models/officeRoom";
 import { User } from "../models/user";
 import OfficeRoomService from "../services/officeRoomService";
 import { VscDebugDisconnect } from "react-icons/vsc";
-import {
-  AgoraVideoPlayer,
-  createClient,
-  createMicrophoneAudioTrack,
-} from "agora-rtc-react";
+import AgoraService from "../services/agoraService";
 
 interface IOfficeCard {
   officeRoom: OfficeRoom;
+  handleJoinChannel: Function;
+  handleLeaveChannel: Function;
 }
 
 const officeRoomService = new OfficeRoomService();
+const agoraService = new AgoraService();
 
 export default function OfficeCard(props: IOfficeCard) {
   const { currUser } = useAuth();
@@ -48,36 +47,43 @@ export default function OfficeCard(props: IOfficeCard) {
     }
 
     try {
-      // todo: pass in the right channel name based on the office room id
-      const agoraToken = await officeRoomService.getAgoraToken();
+      // agora token from CF
+      const agoraToken = await agoraService.getAgoraToken(props.officeRoom.id);
 
-      console.log(agoraToken);
+      // // function to do it all
+      // await officeRoomService.joinOfficeRoom(props.officeRoom, currUser.uid);
 
-      // join right channel on agora
+      // handle joining agora channel
+      await props.handleJoinChannel(props.officeRoom.id, agoraToken);
 
-      // const newMembers = [...props.officeRoom.members, currUser.uid];
-      // await officeRoomService.updateMembersInOfficeRoom(
-      //   props.officeRoom.id,
-      //   newMembers
-      // );
+      // update firestore to add ourselves in the office room
+      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");
     }
 
     toast.dismiss();
+    toast.success("joined office room");
   }
 
   async function handleLeaveOfficeRoom() {
-    // leave the channel for agora
+    toast.loading("leaving");
 
-    // leave from firestore database
     if (!props.officeRoom.members.includes(currUser.uid)) {
       toast.error("You are not in this office room!");
       return;
     }
 
     try {
+      // leave agora channel
+      await props.handleLeaveChannel();
+
+      // leave from firestore database
       const newMembersInRoom = props.officeRoom.members.filter(
         (memberId) => memberId != currUser.uid
       );
@@ -90,6 +96,8 @@ export default function OfficeCard(props: IOfficeCard) {
       console.error(error);
       toast.error("problem leaving office room");
     }
+    toast.dismiss();
+    toast.success("left office room");
   }
 
   // check if user is in the office room