diff --git a/components/GroupAvatar.tsx b/components/GroupAvatar.tsx index e54d288b3..5c7b3f567 100644 --- a/components/GroupAvatar.tsx +++ b/components/GroupAvatar.tsx @@ -42,9 +42,6 @@ type GroupAvatarProps = { topic?: ConversationTopic; pendingGroupMembers?: { address: string; uri?: string; name?: string }[]; excludeSelf?: boolean; - // Converstion List should not make requests across the bridge - // Use data from the initial sync, and as the query gets updated - onConversationListScreen?: boolean; }; type GroupAvatarDumbProps = { @@ -194,23 +191,10 @@ const GroupAvatar: React.FC = ({ topic, pendingGroupMembers, excludeSelf = true, - onConversationListScreen = false, }) => { const colorScheme = useColorScheme(); const styles = getStyles(colorScheme); - const { members: groupMembers } = useGroupMembers( - topic!, - onConversationListScreen - ? { - refetchOnWindowFocus: false, - refetchOnMount: false, - refetchOnReconnect: false, - refetchInterval: false, - staleTime: Infinity, - enabled: !!topic && !pendingGroupMembers, - } - : undefined - ); + const { members: groupMembers } = useGroupMembers(topic!); const profiles = useProfilesStore((s) => s.profiles); const account = useCurrentAccount(); diff --git a/features/conversation-list/useGroupConversationListAvatarInfo.ts b/features/conversation-list/useGroupConversationListAvatarInfo.ts index 30d981037..2d6abf9e8 100644 --- a/features/conversation-list/useGroupConversationListAvatarInfo.ts +++ b/features/conversation-list/useGroupConversationListAvatarInfo.ts @@ -1,3 +1,4 @@ +import { useConversationListMembersQuery } from "@/queries/useGroupMembersQuery"; import { useInboxProfileSocialsQueries } from "@queries/useInboxProfileSocialsQuery"; import { getPreferredInboxAddress, @@ -5,31 +6,21 @@ import { getPreferredInboxName, } from "@utils/profile"; import { GroupWithCodecsType } from "@utils/xmtpRN/client"; -import { InboxId, Member } from "@xmtp/react-native-sdk"; -import { useEffect, useMemo, useState } from "react"; +import type { InboxId } from "@xmtp/react-native-sdk"; +import { useMemo } from "react"; export const useGroupConversationListAvatarInfo = ( currentAccount: string, group?: GroupWithCodecsType ) => { - // TODO: Move this to a query to get persistence - const [members, setMembers] = useState([]); - - useEffect(() => { - if (!group) return; - if (group?.imageUrlSquare) { - return; - } - const fetchMembers = async () => { - const members = await group.members(); - setMembers(members || []); - }; - fetchMembers(); - }, [group]); + const { data: membersData } = useConversationListMembersQuery( + currentAccount, + group + ); const memberInboxIds = useMemo(() => { - return members.map((member) => member.inboxId); - }, [members]); + return membersData?.ids || []; + }, [membersData]); const data = useInboxProfileSocialsQueries(currentAccount, memberInboxIds); diff --git a/features/conversations/components/GroupConversationTitle.tsx b/features/conversations/components/GroupConversationTitle.tsx index 26ad878e3..8be7622f4 100644 --- a/features/conversations/components/GroupConversationTitle.tsx +++ b/features/conversations/components/GroupConversationTitle.tsx @@ -98,7 +98,7 @@ export const GroupConversationTitle = memo( onLongPress={onLongPress} onPress={onPress} subtitle={ - displayMemberText && ( + displayMemberText ? ( {memberText} {requestsCount > 0 && ( @@ -110,7 +110,7 @@ export const GroupConversationTitle = memo( )} - ) + ) : null } avatarComponent={avatarComponent} /> diff --git a/hooks/useGroupMembers.ts b/hooks/useGroupMembers.ts index 9819013c1..afa2da503 100644 --- a/hooks/useGroupMembers.ts +++ b/hooks/useGroupMembers.ts @@ -1,11 +1,6 @@ -import { QueryObserverOptions } from "@tanstack/react-query"; - import { currentAccount } from "../data/store/accountsStore"; import { useAddToGroupMutation } from "../queries/useAddToGroupMutation"; -import { - GroupMembersSelectData, - useGroupMembersQuery, -} from "../queries/useGroupMembersQuery"; +import { useGroupMembersQuery } from "../queries/useGroupMembersQuery"; import { usePromoteToAdminMutation } from "../queries/usePromoteToAdminMutation"; import { usePromoteToSuperAdminMutation } from "../queries/usePromoteToSuperAdminMutation"; import { useRemoveFromGroupMutation } from "../queries/useRemoveFromGroupMutation"; @@ -13,17 +8,14 @@ import { useRevokeAdminMutation } from "../queries/useRevokeAdminMutation"; import { useRevokeSuperAdminMutation } from "../queries/useRevokeSuperAdminMutation"; import type { ConversationTopic } from "@xmtp/react-native-sdk"; -export const useGroupMembers = ( - topic: ConversationTopic, - queryOptions?: Partial> -) => { +export const useGroupMembers = (topic: ConversationTopic) => { const account = currentAccount(); const { data: members, isLoading, isError, - } = useGroupMembersQuery(account, topic, queryOptions); + } = useGroupMembersQuery(account, topic); const { mutateAsync: promoteToAdmin } = usePromoteToAdminMutation( account, topic diff --git a/queries/useGroupMembersQuery.ts b/queries/useGroupMembersQuery.ts index 4acd32ac2..6c63697ad 100644 --- a/queries/useGroupMembersQuery.ts +++ b/queries/useGroupMembersQuery.ts @@ -1,7 +1,7 @@ import { - QueryObserverOptions, SetDataOptions, useQuery, + UseQueryOptions, } from "@tanstack/react-query"; import { getCleanAddress } from "@utils/evm/getCleanAddress"; import { ConversationTopic, Member } from "@xmtp/react-native-sdk"; @@ -11,65 +11,69 @@ import { groupMembersQueryKey } from "./QueryKeys"; import { EntityObjectWithAddress, entifyWithAddress } from "./entify"; import { queryClient } from "./queryClient"; import { useGroupQuery } from "./useGroupQuery"; +import { GroupWithCodecsType } from "@/utils/xmtpRN/client.types"; export type GroupMembersSelectData = EntityObjectWithAddress; +const fetchGroupMembers = async ( + group: GroupWithCodecsType | undefined | null +) => { + if (!group) { + return { + byId: {}, + byAddress: {}, + ids: [], + }; + } + const members = await group.members(); + + return entifyWithAddress( + members, + (member) => member.inboxId, + (member) => getCleanAddress(member.addresses[0]) + ); +}; + +const groupMembersQueryConfig = ( + account: string, + group: GroupWithCodecsType | undefined | null, + enabled: boolean +): UseQueryOptions => ({ + queryKey: groupMembersQueryKey(account, group?.topic!), + queryFn: () => fetchGroupMembers(group!), + enabled, +}); + export const useGroupMembersQuery = ( account: string, - topic: ConversationTopic, - queryOptions?: Partial> + topic: ConversationTopic ) => { const { data: group } = useGroupQuery(account, topic); - return useQuery({ - queryKey: groupMembersQueryKey(account, topic!), - queryFn: async () => { - if (!group) { - return { - byId: {}, - byAddress: {}, - ids: [], - }; - } - const updatedMembers = await group.members(); - return entifyWithAddress( - updatedMembers, - (member) => member.inboxId, - // TODO: Multiple addresses support - (member) => getCleanAddress(member.addresses[0]) - ); - }, - enabled: !!group && !!topic, - ...queryOptions, - }); + const enabled = !!group && !!topic; + return useQuery( + groupMembersQueryConfig(account, group, enabled) + ); }; export const useGroupMembersConversationScreenQuery = ( account: string, - topic: ConversationTopic, - queryOptions?: Partial> + topic: ConversationTopic ) => { const { data: group } = useGroupQuery(account, topic); - return useQuery({ - queryKey: groupMembersQueryKey(account, topic), - queryFn: async () => { - if (!group) { - return { - byId: {}, - byAddress: {}, - ids: [], - }; - } - const members = await group.members(); - return entifyWithAddress( - members, - (member) => member.inboxId, - // TODO: Multiple addresses support - (member) => getCleanAddress(member.addresses[0]) - ); - }, - enabled: !!group, - ...queryOptions, - }); + const enabled = !!group && !!topic; + return useQuery( + groupMembersQueryConfig(account, group, enabled) + ); +}; + +export const useConversationListMembersQuery = ( + account: string, + group: GroupWithCodecsType | undefined | null +) => { + const enabled = !!group && !group.imageUrlSquare; + return useQuery( + groupMembersQueryConfig(account, group, enabled) + ); }; export const getGroupMembersQueryData = ( @@ -84,7 +88,7 @@ export const setGroupMembersQueryData = ( members: GroupMembersSelectData, options?: SetDataOptions ) => { - queryClient.setQueryData( + queryClient.setQueryData( groupMembersQueryKey(account, topic), members, options