Fix inbox tabs

ephemeraHQ · Mar 1, 2024 · eb86ed4 · eb86ed4
1 parent 184df13
commit eb86ed4
Showing 1 changed file with 41 additions and 35 deletions.
diff --git a/src/controllers/ConversationListController.tsx b/src/controllers/ConversationListController.tsx
@@ -1,7 +1,6 @@
-import { useEffect, useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useConsent, useDb } from "@xmtp/react-sdk";
 import type { CachedConversation } from "@xmtp/react-sdk";
-import type { ActiveTab } from "../store/xmtp";
 import { useXmtpStore } from "../store/xmtp";
 import useListConversations from "../hooks/useListConversations";
 import { ConversationList } from "../component-library/components/ConversationList/ConversationList";
@@ -13,25 +12,20 @@ type ConversationListControllerProps = {
   setStartedFirstMessage: (startedFirstMessage: boolean) => void;
 };
 
-type ConsentProps = {
-  tab: ActiveTab;
-  convo: CachedConversation;
-};
-
-type NodeWithConsent = React.ReactElement<ConsentProps>;
-
 export const ConversationListController = ({
   setStartedFirstMessage,
 }: ConversationListControllerProps) => {
+  const [activeConversations, setActiveConversations] = useState<
+    CachedConversation[]
+  >([]);
   const { isLoaded, isLoading, conversations } = useListConversations();
-  const { isAllowed, isDenied } = useConsent();
+  const { isAllowed, isDenied, consentState } = useConsent();
 
   const { db } = useDb();
 
   useStreamAllMessages();
   const recipientInput = useXmtpStore((s) => s.recipientInput);
   const changedConsentCount = useXmtpStore((s) => s.changedConsentCount);
-
   const activeTab = useXmtpStore((s) => s.activeTab);
 
   // when the conversations are loaded, update their identities
@@ -44,34 +38,46 @@ export const ConversationListController = ({
     void runUpdate();
   }, [isLoaded, activeTab, changedConsentCount, conversations, db]);
 
-  const messagesToPass = useMemo(() => {
-    const conversationsWithTab = conversations.map(
-      (conversation: CachedConversation) => (
+  useEffect(() => {
+    const getActiveConversations = async () => {
+      const active = await Promise.all(
+        conversations.map(async (conversation) => {
+          if (
+            activeTab === "blocked" &&
+            (await isDenied(conversation.peerAddress))
+          ) {
+            return conversation;
+          }
+          if (
+            activeTab === "messages" &&
+            (await isAllowed(conversation.peerAddress))
+          ) {
+            return conversation;
+          }
+          if (
+            activeTab === "requests" &&
+            (await consentState(conversation.peerAddress)) === "unknown"
+          ) {
+            return conversation;
+          }
+          return null;
+        }),
+      );
+      setActiveConversations(active.filter(Boolean) as CachedConversation[]);
+    };
+    void getActiveConversations();
+  }, [activeTab, consentState, conversations, isAllowed, isDenied]);
+
+  const messagesToPass = useMemo(
+    () =>
+      activeConversations.map((conversation: CachedConversation) => (
         <MessagePreviewCardController
           key={conversation.topic}
           convo={conversation}
         />
-      ),
-    );
-    const sortedConvos = conversationsWithTab.filter(
-      (item: NodeWithConsent) => {
-        const isAddressBlocked = isDenied(item.props.convo.peerAddress);
-        const isAddressAllowed = isAllowed(item.props.convo.peerAddress);
-
-        if (activeTab === "messages") {
-          return isAddressAllowed;
-        }
-        if (activeTab === "blocked") {
-          return isAddressBlocked;
-        }
-        if (activeTab === "requests") {
-          return !isAddressBlocked && !isAddressAllowed;
-        }
-        return null;
-      },
-    );
-    return sortedConvos;
-  }, [activeTab, conversations, isAllowed, isDenied]);
+      )),
+    [activeConversations],
+  );
 
   return (
     <ConversationList