adding data listening, user getching and using more of recoil

packages/web/components/Conversations/LiveRoom.tsx

@@ -0,0 +1,37 @@
+import Conversation from "@nirvana/common/models/conversation";
+import { Avatar } from "antd";
+import { FaWalking } from "react-icons/fa";
+
+export default function LiveRoom(props: { conversation: Conversation }) {
+  return (
+    <span className="group relative flex flex-row items-center bg-slate-50 rounded-lg border p-5 animate-pulse">
+      <Avatar.Group
+        maxCount={3}
+        size={{ xs: 1000 }}
+        maxStyle={{ color: "#f56a00", backgroundColor: "#fde3cf" }}
+      >
+        <Avatar
+          src="https://joeschmoe.io/api/v1/random"
+          style={{ backgroundColor: "cyan" }}
+        />
+        <Avatar src="https://joeschmoe.io/api/v1/100" />
+        <Avatar src="https://joeschmoe.io/api/v1/2" />
+        <Avatar src="https://joeschmoe.io/api/v1/10" />
+        <Avatar src="https://joeschmoe.io/api/v1/8" />
+      </Avatar.Group>
+
+      <span className="text-md font-semibold ml-2 mr-10">Engineering</span>
+
+      <span className="text-xs text-slate-300 group-hover:invisible">
+        {"01:20"}
+      </span>
+
+      <span
+        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>
+    </span>
+  );
+}

packages/web/components/FullPageExperiences/CreateConversation.tsx.tsx

@@ -12,10 +12,11 @@ import Conversation, {
   ConversationMemberRole,
   ConversationMemberState,
 } from "@nirvana/common/models/conversation";
-import { useAuth } from "../../contexts/authContext";
 import { conversationService } from "@nirvana/common/services";
 import { QueryRoutes, Routes } from "@nirvana/common/helpers/routes";
 import { useRouter } from "next/router";
+import { useRecoilState } from "recoil";
+import { useAuth } from "../../contexts/authContext";
 
 const searchDebounceMsTime = 3000;
 
@@ -91,7 +92,7 @@ export default function CreateConversation() {
   }, []);
 
   const selectUser = (addUser: User) => {
-    if (addUser.id == currUser.uid) {
+    if (addUser.id == currUser!.uid) {
       toast.error("You cannot add yourself, silly!");
       return;
     }
@@ -137,25 +138,34 @@ export default function CreateConversation() {
     }
 
     try {
-      const newConversation = new Conversation(currUser.uid, conversationName);
+      const arrActiveMembers: string[] = [] as string[];
 
       // create each conversation member based on the selected people
       const members = selectedUsers.map((selUser) => {
+        arrActiveMembers.push(selUser.id);
+
         return new ConversationMember(
           selUser.id,
           ConversationMemberState.default,
           ConversationMemberRole.member
         );
       });
+
       // add myself to this collection of members
       members.push(
         new ConversationMember(
-          currUser.uid,
+          currUser!.uid,
           ConversationMemberState.default,
           ConversationMemberRole.admin
         )
       );
 
+      const newConversation = new Conversation(
+        currUser!.uid,
+        conversationName,
+        arrActiveMembers
+      );
+
       console.log(members);
       console.log(newConversation);
 

packages/web/components/Layouts/LandingPageLayout.tsx

@@ -3,8 +3,9 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import { useState } from "react";
 import { FaAngleRight, FaGripHorizontal } from "react-icons/fa";
-import { useAuth } from "../../contexts/authContext";
+import { useRecoilState } from "recoil";
 import MainLogo from "../Logo/MainLogo";
+import { useAuth } from "../../contexts/authContext";
 
 enum LandingPageNavigation {
   product = "/",

packages/web/components/MainTabsOrPages/Conversations.tsx

@@ -14,6 +14,8 @@ import {
   FaAtlassian,
 } from "react-icons/fa";
 import { Routes } from "@nirvana/common/helpers/routes";
+import LiveRoom from "../Conversations/LiveRoom";
+import Conversation from "@nirvana/common/models/conversation";
 
 export default function Conversations() {
   const router = useRouter();
@@ -37,35 +39,7 @@ export default function Conversations() {
       {/* row of live room cards */}
       <span className="flex flex-row flex-wrap">
         {/* engineering liveroom */}
-        <span className="group relative flex flex-row items-center bg-slate-50 rounded-lg border p-5 animate-pulse">
-          <Avatar.Group
-            maxCount={3}
-            size={{ xs: 1000 }}
-            maxStyle={{ color: "#f56a00", backgroundColor: "#fde3cf" }}
-          >
-            <Avatar
-              src="https://joeschmoe.io/api/v1/random"
-              style={{ backgroundColor: "cyan" }}
-            />
-            <Avatar src="https://joeschmoe.io/api/v1/100" />
-            <Avatar src="https://joeschmoe.io/api/v1/2" />
-            <Avatar src="https://joeschmoe.io/api/v1/10" />
-            <Avatar src="https://joeschmoe.io/api/v1/8" />
-          </Avatar.Group>
-
-          <span className="text-md font-semibold ml-2 mr-10">Engineering</span>
-
-          <span className="text-xs text-slate-300 group-hover:invisible">
-            {"01:20"}
-          </span>
-
-          <span
-            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>
-        </span>
+        {/* <LiveRoom conversation={} /> */}
       </span>
 
       {/* Today */}

packages/web/components/MainTabsOrPages/Header.tsx

@@ -10,10 +10,11 @@ import {
   FaHeadphones,
   FaMicrophoneAlt,
 } from "react-icons/fa";
-import { useAuth } from "../../contexts/authContext";
+import { useRecoilState } from "recoil";
 import { UserStatus } from "../../models/user";
 import MainLogo from "../Logo/MainLogo";
 import UserStatusBubble from "../UserDetails/UserStatusBubble";
+import { useAuth } from "../../contexts/authContext";
 
 export default function Header() {
   const { currUser } = useAuth();