adding data listening, user getching and using more of recoil

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();