fix: 20 max conversations + many other fixes and cleaning (#1554)

Author: thierryskoda

components/StateHandlers/HydrationStateHandler.tsx

@@ -1,4 +1,4 @@
-import { prefetchConversationsQuery } from "@/queries/conversations-query";
+import { prefetchConversationsQuery } from "@/queries/use-conversations-query";
 import { prefetchInboxIdQuery } from "@/queries/use-inbox-id-query";
 import { captureError } from "@/utils/capture-error";
 import { getAccountsList } from "@data/store/accountsStore";
@@ -28,7 +28,9 @@ export default function HydrationStateHandler() {
       for (const account of accounts) {
         // Don't await because this is for performance but not critical
         prefetchInboxIdQuery({ account }).catch(captureError);
-        prefetchConversationsQuery({ account }).catch(captureError);
+        prefetchConversationsQuery({
+          account,
+        }).catch(captureError);
       }
 
       useAppStore.getState().setHydrationDone(true);

containers/GroupScreenConsentTable.tsx

@@ -1,4 +1,4 @@
-import { useGroupConsent } from "@/features/consent/use-group-consent";
+import { useGroupConsentForCurrentAccount } from "@/features/consent/use-group-consent-for-current-account";
 import { translate } from "@i18n";
 import { dangerColor, primaryColor } from "@styles/colors";
 import { groupRemoveRestoreHandler } from "@utils/groupUtils/groupActionHandlers";
@@ -21,7 +21,8 @@ export const GroupScreenConsentTable: FC<GroupScreenConsentTableProps> = ({
   group,
 }) => {
   const colorScheme = useColorScheme();
-  const { consent, allowGroup, blockGroup } = useGroupConsent(topic);
+  const { consent, allowGroup, blockGroup } =
+    useGroupConsentForCurrentAccount(topic);
 
   const consentTableViewItems = useMemo(() => {
     const items: TableViewItemType[] = [];

features/GroupInvites/joinGroup/JoinGroup.client.ts

@@ -1,4 +1,4 @@
-import { IGroupConsentOptions } from "@/features/consent/use-group-consent";
+import { IGroupConsentOptions } from "@/features/consent/use-group-consent-for-current-account";
 import {
   createGroupJoinRequest,
   getGroupJoinRequest,
@@ -24,7 +24,7 @@ import { AxiosInstance } from "axios";
 
 import {} from "../groupInvites.utils";
 import { JoinGroupResult } from "./joinGroup.types";
-import { IConversationsQuery } from "@/queries/conversations-query";
+import { IConversationsQuery } from "@/queries/use-conversations-query";
 import { entify } from "@/queries/entify";
 import { wait } from "@/utils/general";
 
@@ -94,11 +94,14 @@ export class JoinGroupClient {
       account: string
     ): Promise<ConversationDataEntity> => {
       const { fetchConversationsQuery } = await import(
-        "@/queries/conversations-query"
+        "@/queries/use-conversations-query"
       );
 
       const conversationList: IConversationsQuery =
-        await fetchConversationsQuery({ account });
+        await fetchConversationsQuery({
+          account,
+          caller: "liveFetchGroupsByAccount",
+        });
 
       const conversationEntity: ConversationDataEntity = entify(
         conversationList,

features/blocked-conversations/use-blocked-conversations-for-current-account.ts

@@ -1,6 +1,6 @@
 import { isConversationDenied } from "@/features/conversation/utils/is-conversation-denied";
 import { getConversationMetadataQueryOptions } from "@/queries/conversation-metadata-query";
-import { useConversationsQuery } from "@/queries/conversations-query";
+import { useConversationsQuery } from "@/queries/use-conversations-query";
 import { useCurrentAccount } from "@data/store/accountsStore";
 import { useQueries } from "@tanstack/react-query";
 import { useMemo } from "react";
@@ -10,6 +10,7 @@ export const useBlockedConversationsForCurrentAccount = () => {
 
   const { data } = useConversationsQuery({
     account: currentAccount!,
+    caller: "useBlockedConversationsForCurrentAccount",
   });
 
   const conversationsMetadataQueries = useQueries({

features/consent/use-allow-group.mutation.ts

@@ -1,4 +1,4 @@
-import { updateConversationInConversationsQueryData } from "@/queries/conversations-query";
+import { updateConversationInConversationsQueryData } from "@/queries/use-conversations-query";
 import { captureError } from "@/utils/capture-error";
 import { GroupWithCodecsType } from "@/utils/xmtpRN/client.types";
 import { queryClient } from "@queries/queryClient";
@@ -8,15 +8,15 @@ import {
   useMutation,
 } from "@tanstack/react-query";
 import { getV3IdFromTopic } from "@utils/groupUtils/groupId";
-import { updateInboxIdsConsentForAccount } from "./update-inbox-ids-consent-for-account";
-import { updateConsentForGroupsForAccount } from "./update-consent-for-groups-for-account";
 import {
   ConsentState,
   ConversationId,
   ConversationTopic,
   InboxId,
 } from "@xmtp/react-native-sdk";
 import { MutationKeys } from "../../queries/MutationKeys";
+import { updateConsentForGroupsForAccount } from "./update-consent-for-groups-for-account";
+import { updateInboxIdsConsentForAccount } from "./update-inbox-ids-consent-for-account";
 import {
   getGroupConsentQueryData,
   setGroupConsentQueryData,

features/consent/use-dm-consent.tsx renamed to features/consent/use-dm-consent-for-current-account.tsx

@@ -2,7 +2,7 @@ import {
   getCurrentAccount,
   useCurrentAccount,
 } from "@/data/store/accountsStore";
-import { updateConversationInConversationsQueryData } from "@/queries/conversations-query";
+import { updateConversationInConversationsQueryData } from "@/queries/use-conversations-query";
 import { getConversationQueryData } from "@/queries/useConversationQuery";
 import { getDmQueryData, setDmQueryData } from "@/queries/useDmQuery";
 import { updateObjectAndMethods } from "@/utils/update-object-and-methods";
@@ -16,17 +16,17 @@ import {
 import { updateConsentForGroupsForAccount } from "./update-consent-for-groups-for-account";
 import { updateInboxIdsConsentForAccount } from "./update-inbox-ids-consent-for-account";
 
-export function useDmConsent(args: {
-  peerInboxId: InboxId;
-  conversationId: ConversationId;
-  topic: ConversationTopic;
-}) {
-  const { peerInboxId, conversationId, topic } = args;
-
+export function useDmConsentForCurrentAccount() {
   const currentAccount = useCurrentAccount()!;
 
   return useMutation({
-    mutationFn: async (args: { consent: "allow" | "deny" }) => {
+    mutationFn: async (args: {
+      consent: "allow" | "deny";
+      peerInboxId: InboxId;
+      conversationId: ConversationId;
+      topic: ConversationTopic;
+    }) => {
+      const { peerInboxId, conversationId, topic } = args;
       if (!peerInboxId) {
         throw new Error("Peer inbox id not found");
       }
@@ -45,6 +45,7 @@ export function useDmConsent(args: {
       ]);
     },
     onMutate: (args) => {
+      const { peerInboxId, conversationId, topic } = args;
       const conversation = getConversationQueryData({
         account: currentAccount,
         topic,
@@ -70,7 +71,8 @@ export function useDmConsent(args: {
         return { previousDmConsent: conversation.state };
       }
     },
-    onError: (error, _, context) => {
+    onError: (error, variables, context) => {
+      const { topic } = variables;
       const { previousDmConsent } = context || {};
       if (previousDmConsent) {
         const dm = getDmQueryData({

features/consent/use-group-consent.ts renamed to features/consent/use-group-consent-for-current-account.ts

@@ -15,7 +15,7 @@ export type IGroupConsentOptions = {
   includeAddedBy?: boolean;
 };
 
-export const useGroupConsent = (topic: ConversationTopic) => {
+export const useGroupConsentForCurrentAccount = (topic: ConversationTopic) => {
   const account = currentAccount();
 
   const { data: group, isLoading: isGroupLoading } = useGroupQuery({

features/conversation-list/conversation-list-awaiting-requests.tsx

@@ -28,7 +28,7 @@ export const ConversationListAwaitingRequests = memo(
     const conversationsMetadataQueries = useQueries({
       queries: (likelyNotSpam ?? []).map((conversation) =>
         getConversationMetadataQueryOptions({
-          account: currentAccount!,
+          account: currentAccount,
           topic: conversation.topic,
         })
       ),

features/conversation-list/conversation-list-item/conversation-list-item-dm.tsx

@@ -44,7 +44,9 @@ export const ConversationListItemDm = memo(function ConversationListItemDm({
     topic: conversationTopic,
   });
 
-  const deleteDm = useDeleteDm(conversation as DmWithCodecsType);
+  const deleteDm = useDeleteDm({
+    topic: conversationTopic,
+  });
   const { restoreConversationAsync } = useRestoreConversation({
     topic: conversationTopic,
   });

features/conversation-list/conversation-list-pinned-conversations/conversation-list-pinned-conversations.tsx

@@ -1,3 +1,4 @@
+import { useCurrentAccount } from "@/data/store/accountsStore";
 import { AnimatedCenter } from "@/design-system/Center";
 import { AnimatedHStack } from "@/design-system/HStack";
 import { AnimatedVStack } from "@/design-system/VStack";
@@ -8,14 +9,14 @@ import { useConversationListPinnedConversationsStyles } from "@/features/convers
 import { useConversationsCount } from "@/features/conversation-list/hooks/use-conversations-count";
 import { usePinnedConversations } from "@/features/conversation-list/hooks/use-pinned-conversations";
 import { isConversationGroup } from "@/features/conversation/utils/is-conversation-group";
+import { useConversationQuery } from "@/queries/useConversationQuery";
 import { ThemedStyle, useAppTheme } from "@/theme/useAppTheme";
 import { captureError } from "@/utils/capture-error";
 import { hexToRGBA } from "@/utils/colors";
 import { chunk } from "@/utils/general";
 import { ConversationTopic } from "@xmtp/react-native-sdk";
 import { memo } from "react";
 import { ViewStyle } from "react-native";
-import { useConversationByTopic } from "../hooks/use-conversation-by-topic";
 
 export const ConversationListPinnedConversations = memo(
   function ConversationListPinnedConversations() {
@@ -43,6 +44,7 @@ export const ConversationListPinnedConversations = memo(
     if (!hasPinnedConversations) {
       return null;
     }
+
     return (
       <AnimatedVStack
         style={themed($container)}
@@ -105,7 +107,12 @@ const PinnedConversationWrapper = memo(
   function PinnedConversationWrapper(props: { topic: ConversationTopic }) {
     const { topic } = props;
 
-    const conversation = useConversationByTopic(topic);
+    const currentAccount = useCurrentAccount();
+
+    const { data: conversation } = useConversationQuery({
+      topic,
+      account: currentAccount!,
+    });
 
     if (!conversation) {
       captureError(
@@ -127,6 +134,7 @@ const $container: ThemedStyle<ViewStyle> = ({ spacing }) => ({
   paddingVertical: spacing.xs,
   paddingHorizontal: spacing.lg,
   rowGap: spacing.lg,
+  justifyContent: "space-between",
 });
 
 const $pinnedRow: ThemedStyle<ViewStyle> = ({ spacing }) => ({

features/conversation-list/conversation-list.screen-header.tsx

@@ -18,6 +18,7 @@ import { usePreferredName } from "@/hooks/usePreferredName";
 import { translate } from "@/i18n";
 import { useHeader } from "@/navigation/use-header";
 import { ThemedStyle, useAppTheme } from "@/theme/useAppTheme";
+import { converseEventEmitter } from "@/utils/events";
 import { shortDisplayName } from "@/utils/str";
 import { useAccountsProfiles } from "@/utils/useAccountsProfiles";
 import { useNavigation } from "@react-navigation/native";
@@ -131,6 +132,10 @@ function ProfileAvatar() {
   const preferredName = usePreferredInboxName(currentAccountInboxId);
   const avatarUri = usePreferredInboxAvatar(currentAccountInboxId);
 
+  const showDebugMenu = useCallback(() => {
+    converseEventEmitter.emit("showDebugMenu");
+  }, []);
+
   return (
     <Pressable
       onPress={() => {
@@ -139,6 +144,7 @@ function ProfileAvatar() {
         });
       }}
       hitSlop={theme.spacing.sm}
+      onLongPress={showDebugMenu}
     >
       <Center style={themed($avatarContainer)}>
         <Avatar

features/conversation-list/hooks/use-conversation-by-topic.ts

@@ -1,18 +1,20 @@
+import { useCurrentAccount } from "@/data/store/accountsStore";
 import { iconRegistry } from "@/design-system/Icon/Icon";
 import { VStack } from "@/design-system/VStack";
-import { useConversationByTopic } from "@/features/conversation-list/hooks/use-conversation-by-topic";
 import { useConversationIsPinned } from "@/features/conversation-list/hooks/use-conversation-is-pinned";
 import { useConversationIsUnread } from "@/features/conversation-list/hooks/use-conversation-is-unread";
 import { useDeleteDm } from "@/features/conversation-list/hooks/use-delete-dm";
 import { useDeleteGroup } from "@/features/conversation-list/hooks/use-delete-group";
 import { useToggleReadStatus } from "@/features/conversation-list/hooks/use-toggle-read-status";
+import { ConversationPreview } from "@/features/conversation/conversation-preview/conversation-preview";
 import { isConversationGroup } from "@/features/conversation/utils/is-conversation-group";
 import { translate } from "@/i18n";
-import { ConversationPreview } from "@/features/conversation/conversation-preview/conversation-preview";
+import { useConversationQuery } from "@/queries/useConversationQuery";
 import { useAppTheme } from "@/theme/useAppTheme";
 import { captureErrorWithToast } from "@/utils/capture-error";
 import { Haptics } from "@/utils/haptics";
 import { ConversationTopic } from "@xmtp/react-native-sdk";
+import { useCallback } from "react";
 import {
   ContextMenuViewProps,
   MenuActionConfig,
@@ -138,18 +140,33 @@ function useConversationContextMenuDeleteItem(args: {
   conversationTopic: ConversationTopic;
 }): IUseContextMenuItem {
   const { conversationTopic } = args;
-
+  const currentAccount = useCurrentAccount();
   const { theme } = useAppTheme();
 
-  const conversation = useConversationByTopic(conversationTopic);
+  const { data: conversation } = useConversationQuery({
+    account: currentAccount!,
+    topic: conversationTopic,
+  });
 
-  const handleDeleteFn = conversation
-    ? isConversationGroup(conversation)
-      ? // eslint-disable-next-line react-hooks/rules-of-hooks
-        useDeleteGroup({ groupTopic: conversationTopic })
-      : // eslint-disable-next-line react-hooks/rules-of-hooks
-        useDeleteDm(conversation)
-    : () => null;
+  const deleteGroup = useDeleteGroup({ groupTopic: conversationTopic });
+  const deleteDm = useDeleteDm({ topic: conversationTopic });
+
+  const handleDelete = useCallback(async () => {
+    try {
+      if (!conversation) {
+        throw new Error("Conversation not found");
+      }
+      if (isConversationGroup(conversation)) {
+        await deleteGroup();
+      } else {
+        await deleteDm();
+      }
+    } catch (error) {
+      captureErrorWithToast(error, {
+        message: "Error deleting conversation",
+      });
+    }
+  }, [conversation, deleteGroup, deleteDm]);
 
   return {
     actionKey: "delete",
@@ -160,6 +177,6 @@ function useConversationContextMenuDeleteItem(args: {
       iconTint: theme.colors.global.caution,
     },
     menuAttributes: ["destructive"],
-    onPress: handleDeleteFn,
+    onPress: handleDelete,
   } satisfies IUseContextMenuItem;
 }

features/conversation-list/hooks/use-conversation-list-item-context-menu-default-props.tsx

@@ -1,4 +1,4 @@
-import { getConversationsQueryOptions } from "@/queries/conversations-query";
+import { getConversationsQueryOptions } from "@/queries/use-conversations-query";
 import { useCurrentAccount } from "@data/store/accountsStore";
 import { useQuery } from "@tanstack/react-query";
 
@@ -8,6 +8,7 @@ export const useConversationsCount = () => {
   const { data: count, isLoading } = useQuery({
     ...getConversationsQueryOptions({
       account: account!,
+      caller: "useConversationsCount",
     }),
     select: (data) => data?.length ?? 0,
   });