showing later and done convos

packages/web/components/MainTabsOrPages/Done.tsx

@@ -1,19 +1,34 @@
 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() {
-  return (
-    <div className="mx-auto my-auto flex flex-col">
-      <img
-        src="/illustrations/undraw_scooter_re_lrsb.svg"
-        className="h-[15rem] mx-auto my-auto"
-      />
+  const doneConvos = useRecoilValue(doneConvosSelector);
 
-      <span></span>
-      <span className="text-slate-400 text-center mt-5">
-        Add things to <FaCheck className="inline" /> done to <br></br> clear
-        your mind.
-      </span>
-    </div>
+  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"
+            className="h-[15rem] mx-auto my-auto"
+          />
+
+          <span></span>
+          <span className="text-slate-400 text-center mt-5">
+            Add things to <FaCheck className="inline" /> done to <br></br> clear
+            your mind.
+          </span>
+        </div>
+      )}
+    </>
   );
 }

packages/web/components/MainTabsOrPages/Later.tsx

@@ -1,21 +1,35 @@
 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");
-  return (
-    <div className="mx-auto my-auto flex flex-col">
-      <img
-        src="/illustrations/undraw_season_change_f99v.svg"
-        className="h-[15rem] mx-auto my-auto"
-      />
+  const laterConvos = useRecoilValue(laterConvosSelector);
 
-      <span></span>
-      <span className="text-slate-400 text-center mt-5">
-        Focusing right now? <br></br> No worries, go through low-priority{" "}
-        <br></br>
-        conversations <FaRegClock className="inline" /> later.
-      </span>
-    </div>
+  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"
+            className="h-[15rem] mx-auto my-auto"
+          />
+
+          <span></span>
+          <span className="text-slate-400 text-center mt-5">
+            Focusing right now? <br></br> No worries, go through low-priority{" "}
+            <br></br>
+            conversations <FaRegClock className="inline" /> later.
+          </span>
+        </div>
+      )}
+    </>
   );
 }