mapping out the selectors and starting to render data finally

packages/web/components/MainTabsOrPages/Conversations.tsx

@@ -16,10 +16,14 @@ import {
 import { Routes } from "@nirvana/common/helpers/routes";
 import LiveRoom from "../Conversations/LiveRoom";
 import Conversation from "@nirvana/common/models/conversation";
+import { useRecoilValue } from "recoil";
+import { liveRoomsSelector } from "../../recoil/main";
 
 export default function Conversations() {
   const router = useRouter();
 
+  const liveRooms = useRecoilValue(liveRoomsSelector);
+
   const handleViewConversationDetails = (convoId) => {
     router.push({
       pathname: Routes.home,
@@ -29,18 +33,23 @@ export default function Conversations() {
 
   return (
     <>
-      <span className="flex flex-row items-center mb-5 px-5 w-full">
-        <FaDotCircle className="text-orange-500 text-lg mr-1" />
-        <span className="text-md tracking-widest font-semibold text-slate-300 uppercase">
-          Live
-        </span>
-      </span>
+      {liveRooms?.length > 0 && (
+        <>
+          <span className="flex flex-row items-center mb-5 px-5 w-full">
+            <FaDotCircle className="text-orange-500 text-lg mr-1" />
+            <span className="text-md tracking-widest font-semibold text-slate-300 uppercase">
+              Live
+            </span>
+          </span>
 
-      {/* row of live room cards */}
-      <span className="flex flex-row flex-wrap">
-        {/* engineering liveroom */}
-        {/* <LiveRoom conversation={} /> */}
-      </span>
+          {/* row of live room cards */}
+          <span className="flex flex-row flex-wrap">
+            {liveRooms.map((lRoom) => (
+              <LiveRoom key={lRoom.id} conversation={lRoom} />
+            ))}
+          </span>
+        </>
+      )}
 
       {/* Today */}
       <span className="flex flex-row items-center mb-5 px-5 w-full mt-10">

packages/web/recoil/main.tsx

@@ -6,7 +6,7 @@ import Conversation, {
 } from "@nirvana/common/models/conversation";
 import { User as NirvanaUser } from "@nirvana/common/models/user";
 
-import { atom } from "recoil";
+import { atom, selector } from "recoil";
 
 export enum RecoilActions {
   TEST = "TEST",
@@ -17,6 +17,9 @@ export enum RecoilActions {
   ALL_USERS_CONVERSATION_RELATIONSHIPS = "ALL_USERS_CONVERSATION_RELATIONSHIPS",
   ALL_RELEVANT_CONVERSATIONS = "ALL_RELEVANT_CONVERSATIONS",
 
+  SORTED_CONVERSATIONS = "SORTED_CONVERSATIONS",
+  LIVE_ROOMS = "LIVE_ROOMS",
+
   USER_DATA = "USER_DATA",
 }
 
@@ -84,3 +87,41 @@ export const allRelevantConversations = atom({
   key: RecoilActions.ALL_RELEVANT_CONVERSATIONS,
   default: new Map<string, Conversation>(),
 });
+
+export const sortedRoomSelector = selector<Conversation[]>({
+  key: RecoilActions.SORTED_CONVERSATIONS,
+  get: ({ get }) => {
+    const relConvos = get(allRelevantConversations);
+    const convosArr: Conversation[] = Array.from(relConvos.values());
+
+    convosArr.sort((a, b) => {
+      if (!a.lastActivityDate) {
+        return -1;
+      }
+      if (!b.lastActivityDate) {
+        return 1;
+      }
+
+      if (a.lastActivityDate > b.lastActivityDate) {
+        return 1;
+      }
+
+      return -1;
+    });
+
+    return convosArr;
+  },
+});
+
+// get all rooms with active members in the room, and
+export const liveRoomsSelector = selector<Conversation[]>({
+  key: RecoilActions.LIVE_ROOMS,
+  get: ({ get }) => {
+    const sortedConvos = get(sortedRoomSelector);
+    const liveRooms = sortedConvos.filter(
+      (conv) => conv.membersInLiveRoom?.length > 0
+    );
+
+    return liveRooms;
+  },
+});