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

packages/web/components/Conversations/ConversationFullRow.tsx

@@ -28,6 +28,8 @@ import { Routes } from "@nirvana/common/helpers/routes";
 
 export default function ConversationFullRow(props: {
   conversation: Conversation;
+  handleJoinLive: (conversationId: string) => Promise<void>;
+  handleLeaveLive: (conversationId: string) => Promise<void>;
 }) {
   const { currUser } = useAuth();
   const usersConvosMap = useRecoilValue(allUsersConversationsAtom);
@@ -75,10 +77,6 @@ export default function ConversationFullRow(props: {
     audio.play();
   };
 
-  const joinLive = () => {
-    toast("connecting");
-  };
-
   /**
    * show actions based on which state it is currently in for this user
    */
@@ -134,7 +132,7 @@ export default function ConversationFullRow(props: {
           <span
             onClick={(e) => {
               e.stopPropagation();
-              joinLive();
+              props.handleJoinLive(props.conversation.id);
             }}
             className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200"
           >
@@ -164,7 +162,7 @@ export default function ConversationFullRow(props: {
           isNewIncoming ? "text-slate-400 font-semibold" : "text-slate-300"
         }`}
       >
-        {moment(props.conversation.lastActivityDate.toDate()).fromNow()}
+        {moment(props.conversation.lastActivityDate?.toDate()).fromNow()}
       </span>
 
       {/* actions */}

packages/web/components/Conversations/LiveRoom.tsx

@@ -1,9 +1,18 @@
 import Conversation from "@nirvana/common/models/conversation";
+import { agoraService, conversationService } from "@nirvana/common/services";
 import { Avatar, Tooltip } from "antd";
-import { FaWalking } from "react-icons/fa";
+import toast from "react-hot-toast";
+import { FaPhoneSlash, FaWalking } from "react-icons/fa";
+import { useAuth } from "../../contexts/authContext";
 import { MasterAvatarGroupWithUserFetch } from "../UserDetails/MasterAvatarGroup";
 
-export default function LiveRoom(props: { conversation: Conversation }) {
+export default function LiveRoom(props: {
+  conversation: Conversation;
+  handleJoinLive: (conversationId: string) => Promise<void>;
+  handleLeaveLive: (conversationId: string) => Promise<void>;
+}) {
+  const { currUser } = useAuth();
+
   return (
     <span className="group relative flex flex-row items-center bg-slate-50 rounded-lg border p-5 animate-pulse">
       <MasterAvatarGroupWithUserFetch
@@ -19,14 +28,27 @@ export default function LiveRoom(props: { conversation: Conversation }) {
         {"01:20"}
       </span>
 
-      <Tooltip title={"Join live conversation"}>
-        <span
-          className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200
+      {props.conversation.membersInLiveRoom.includes(currUser!.uid) ? (
+        <Tooltip title={"Leave"}>
+          <span
+            onClick={() => props.handleLeaveLive(props.conversation.id)}
+            className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200
+          absolute right-5 text-slate-50 group-hover:text-red-600 text-lg transition-all -z-10 group-hover:z-10"
+          >
+            <FaPhoneSlash className="text-lg" />
+          </span>
+        </Tooltip>
+      ) : (
+        <Tooltip title={"Join live conversation"}>
+          <span
+            onClick={() => props.handleJoinLive(props.conversation.id)}
+            className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200
           absolute right-5 text-slate-50 group-hover:text-teal-600 text-lg transition-all -z-10 group-hover:z-10"
-        >
-          <FaWalking className="text-lg" />
-        </span>
-      </Tooltip>
+          >
+            <FaWalking className="text-lg" />
+          </span>
+        </Tooltip>
+      )}
     </span>
   );
 }