diff --git a/src/controllers/ConversationListController.tsx b/src/controllers/ConversationListController.tsx index 7c574fd6..83906bdf 100644 --- 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; - 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) => ( - ), - ); - 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 (