showing later and done convos

packages/web/components/MainTabsOrPages/Done.tsx

@@ -1,8 +1,21 @@
 import React from "react";
 import { FaCheck } from "react-icons/fa";
+import { useRecoilValue } from "recoil";
+import { doneConvosSelector } from "../../recoil/main";
+import ConversationFullRow from "../Conversations/ConversationFullRow";
 
 export default function Done() {
+  const doneConvos = useRecoilValue(doneConvosSelector);
+
   return (
+    <>
+      {doneConvos?.length > 0 ? (
+        <span className="flex flex-col w-full items-stretch">
+          {doneConvos.map((tRoom) => (
+            <ConversationFullRow key={tRoom.id} conversation={tRoom} />
+          ))}
+        </span>
+      ) : (
         <div className="mx-auto my-auto flex flex-col">
           <img
             src="/illustrations/undraw_scooter_re_lrsb.svg"
@@ -15,5 +28,7 @@ export default function Done() {
             your mind.
           </span>
         </div>
+      )}
+    </>
   );
 }

packages/web/components/MainTabsOrPages/Later.tsx

@@ -1,9 +1,21 @@
 import React from "react";
 import { FaRegClock } from "react-icons/fa";
+import { useRecoilValue } from "recoil";
+import { laterConvosSelector } from "../../recoil/main";
+import ConversationFullRow from "../Conversations/ConversationFullRow";
 
 export default function Later() {
-  console.log("re-rendering later");
+  const laterConvos = useRecoilValue(laterConvosSelector);
+
   return (
+    <>
+      {laterConvos?.length > 0 ? (
+        <span className="flex flex-col w-full items-stretch">
+          {laterConvos.map((tRoom) => (
+            <ConversationFullRow key={tRoom.id} conversation={tRoom} />
+          ))}
+        </span>
+      ) : (
         <div className="mx-auto my-auto flex flex-col">
           <img
             src="/illustrations/undraw_season_change_f99v.svg"
@@ -17,5 +29,7 @@ export default function Later() {
             conversations <FaRegClock className="inline" /> later.
           </span>
         </div>
+      )}
+    </>
   );
 }

packages/web/recoil/main.tsx

@@ -27,6 +27,9 @@ export enum RecoilActions {
 
   SORTED_CONVERSATIONS = "SORTED_CONVERSATIONS",
   LIVE_ROOMS = "LIVE_ROOMS",
+  LATER_CONVERSATIONS_SELECTOR = "LATER_CONVERSATIONS_SELECTOR",
+  PRIORITY_CONVERSATIONS_SELECTOR = "PRIORITY_CONVERSATIONS_SELECTOR",
+  DONE_CONVERSATIONS_SELECTOR = "DONE_CONVERSATIONS_SELECTOR",
   RELATIVE_TIME_SECTIONS_CONVOS = "RELATIVE_TIME_SECTIONS_CONVOS",
 
   CHECK_INCOMING_MESSAGE = "CHECK_INCOMING_MESSAGE",
@@ -113,6 +116,65 @@ export const liveRoomsSelector = selector<Conversation[]>({
   },
 });
 
+export const laterConvosSelector = selector<Conversation[]>({
+  key: RecoilActions.LATER_CONVERSATIONS_SELECTOR,
+  get: ({ get }) => {
+    const sortedConvos = get(sortedRoomSelector);
+    const convoUserMap = get(allUsersConversationsAtom);
+
+    const laterConvos: Conversation[] = sortedConvos.filter((conv) => {
+      // get the userconvoAssoc and see the state
+      if (convoUserMap.get(conv.id)?.state == ConversationMemberState.later) {
+        return true;
+      }
+
+      return false;
+    });
+
+    return laterConvos;
+  },
+});
+
+export const priorityConvosSelector = selector<Conversation[]>({
+  key: RecoilActions.PRIORITY_CONVERSATIONS_SELECTOR,
+  get: ({ get }) => {
+    const sortedConvos = get(sortedRoomSelector);
+    const convoUserMap = get(allUsersConversationsAtom);
+
+    const priorityConvos: Conversation[] = sortedConvos.filter((conv) => {
+      // get the userconvoAssoc and see the state
+      if (
+        convoUserMap.get(conv.id)?.state == ConversationMemberState.priority
+      ) {
+        return true;
+      }
+
+      return false;
+    });
+
+    return priorityConvos;
+  },
+});
+
+export const doneConvosSelector = selector<Conversation[]>({
+  key: RecoilActions.DONE_CONVERSATIONS_SELECTOR,
+  get: ({ get }) => {
+    const sortedConvos = get(sortedRoomSelector);
+    const convoUserMap = get(allUsersConversationsAtom);
+
+    const doneConvos: Conversation[] = sortedConvos.filter((conv) => {
+      // get the userconvoAssoc and see the state
+      if (convoUserMap.get(conv.id)?.state == ConversationMemberState.done) {
+        return true;
+      }
+
+      return false;
+    });
+
+    return doneConvos;
+  },
+});
+
 export enum RelativeTimeConvosSections {
   today = "TODAY",