joining and leaving backend side done and now agora test here we go

packages/web/components/MainTabsOrPages/Conversations.tsx

@@ -24,11 +24,139 @@ import {
   RelativeTimeSeparatedConvosSelector,
 } from "../../recoil/main";
 import ConversationFullRow from "../Conversations/ConversationFullRow";
+import LiveRooms from "../LiveRooms/LiveRoomsHandler";
+import LiveRoomsHandler from "../LiveRooms/LiveRoomsHandler";
+import {
+  ClientConfig,
+  IAgoraRTC,
+  IAgoraRTCClient,
+  IMicrophoneAudioTrack,
+} from "agora-rtc-sdk-ng";
+import { useEffect, useState } from "react";
+import { config, appId } from "@nirvana/common/services/agoraService";
+import toast from "react-hot-toast";
+import { agoraService, conversationService } from "@nirvana/common/services";
+import { useAuth } from "../../contexts/authContext";
 
 export default function Conversations() {
   const router = useRouter();
 
+  const { currUser } = useAuth();
+
   const liveRooms = useRecoilValue(liveRoomsSelector);
+
+  const [agoraRtc, setAgoraRtc] = useState<IAgoraRTC>();
+  const [agoraRtcClient, setAgoraRtcClient] = useState<IAgoraRTCClient>();
+  const [localAudioTrack, setLocalAudioTrack] =
+    useState<IMicrophoneAudioTrack>();
+
+  // 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);
+
+    const 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();
+  }
+
+  // click on join
+  // add me to the active list of people in the call
+  // update the conversation lastActivityDate as well
+
+  const handleJoinLive = async (conversationId: string) => {
+    const connectingToast = toast.loading("connecting");
+
+    try {
+      // agora token from CF
+      const agoraToken = await agoraService.getAgoraToken(conversationId);
+
+      console.log(agoraToken);
+
+      await conversationService.joinLiveConversation(
+        conversationId,
+        currUser!.uid
+      );
+    } catch {
+      toast.error("problem in joining");
+    }
+
+    toast.remove(connectingToast);
+  };
+
+  const handleLeaveLive = async (conversationId: string) => {
+    const leavingToast = toast.loading("leaving");
+
+    try {
+      await conversationService.leaveLiveConversation(
+        conversationId,
+        currUser!.uid
+      );
+    } catch {
+      toast.error("problem in joining");
+    }
+
+    toast.remove(leavingToast);
+  };
+
+  // agora start the call stream
+
+  // leave the call on before unload if in a call
+
+  // update the database to remove my userId from the list of people in the room
+
   const relativeConvoSections = useRecoilValue(
     RelativeTimeSeparatedConvosSelector
   );
@@ -68,7 +196,7 @@ export default function Conversations() {
 
   return (
     <>
-      {/*  live */}
+      {/* live rooms */}
       {liveRooms?.length > 0 && (
         <>
           <span className="flex flex-row items-center mb-5 px-5 w-full">
@@ -81,7 +209,12 @@ export default function Conversations() {
           {/* row of live room cards */}
           <span className="flex flex-col w-full items-stretch">
             {liveRooms.map((lRoom) => (
-              <LiveRoom key={lRoom.id} conversation={lRoom} />
+              <LiveRoom
+                key={lRoom.id}
+                conversation={lRoom}
+                handleJoinLive={handleJoinLive}
+                handleLeaveLive={handleLeaveLive}
+              />
             ))}
           </span>
         </>
@@ -97,7 +230,12 @@ export default function Conversations() {
           </span>
           <span className="flex flex-col w-full items-stretch">
             {todayConvos.map((tRoom) => (
-              <ConversationFullRow key={tRoom.id} conversation={tRoom} />
+              <ConversationFullRow
+                key={tRoom.id}
+                conversation={tRoom}
+                handleJoinLive={handleJoinLive}
+                handleLeaveLive={handleLeaveLive}
+              />
             ))}
           </span>
         </>
@@ -113,7 +251,12 @@ export default function Conversations() {
           </span>
           <span className="flex flex-col w-full items-stretch">
             {last7DaysConvos.map((tRoom) => (
-              <ConversationFullRow key={tRoom.id} conversation={tRoom} />
+              <ConversationFullRow
+                key={tRoom.id}
+                conversation={tRoom}
+                handleJoinLive={handleJoinLive}
+                handleLeaveLive={handleLeaveLive}
+              />
             ))}
           </span>
         </>
@@ -129,7 +272,12 @@ export default function Conversations() {
           </span>
           <span className="flex flex-col w-full items-stretch">
             {earlierMonthConvos.map((tRoom) => (
-              <ConversationFullRow key={tRoom.id} conversation={tRoom} />
+              <ConversationFullRow
+                key={tRoom.id}
+                conversation={tRoom}
+                handleJoinLive={handleJoinLive}
+                handleLeaveLive={handleLeaveLive}
+              />
             ))}
           </span>
         </>
@@ -145,7 +293,12 @@ export default function Conversations() {
           </span>
           <span className="flex flex-col w-full items-stretch">
             {oldJunkConvos.map((tRoom) => (
-              <ConversationFullRow key={tRoom.id} conversation={tRoom} />
+              <ConversationFullRow
+                key={tRoom.id}
+                conversation={tRoom}
+                handleJoinLive={handleJoinLive}
+                handleLeaveLive={handleLeaveLive}
+              />
             ))}
           </span>
         </>