many fixes and refactor

Author: thierryskoda

features/consent/use-dm-consent.tsx

@@ -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 useDmConsent() {
   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/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() {
@@ -84,7 +85,9 @@ const PinnedConversationsSkeleton = memo(function () {
   const { avatarSize } = useConversationListPinnedConversationsStyles();
 
   return (
-    <AnimatedHStack style={themed($container)}>
+    <AnimatedHStack
+      style={[themed($container), { justifyContent: "space-between" }]}
+    >
       <ConversationListItemAvatarSkeleton
         color={hexToRGBA("#FF8080", 0.15)}
         size={avatarSize}
@@ -105,7 +108,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(

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

@@ -55,8 +55,6 @@ export function ConversationListScreen(props: IConversationListProps) {
     }
   }, [refetchConversations]);
 
-  console.log("conversations:", conversations);
-
   return (
     <Screen contentContainerStyle={$globalStyles.flex1}>
       <AnimatedVStack layout={theme.animation.reanimatedLayoutSpringTransition}>

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,29 @@ 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 deleteGroup = useDeleteGroup({ groupTopic: conversationTopic });
+  const deleteDm = useDeleteDm({ 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 handleDelete = useCallback(async () => {
+    if (!conversation) return;
+    try {
+      if (isConversationGroup(conversation)) {
+        await deleteGroup();
+      } else {
+        await deleteDm();
+      }
+    } catch (error) {
+      captureErrorWithToast(error);
+    }
+  }, [conversation, deleteGroup, deleteDm]);
 
   return {
     actionKey: "delete",
@@ -160,6 +173,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

@@ -7,49 +7,54 @@ import {
   getConversationMetadataQueryData,
   updateConversationMetadataQueryData,
 } from "@/queries/conversation-metadata-query";
+import { getConversationQueryOptions } from "@/queries/useConversationQuery";
 import { useDmPeerInboxId } from "@/queries/useDmPeerInbox";
 import { actionSheetColors } from "@/styles/colors";
 import { useAppTheme } from "@/theme/useAppTheme";
 import { deleteTopic } from "@/utils/api/topics";
 import { captureErrorWithToast } from "@/utils/capture-error";
-import { DmWithCodecsType } from "@/utils/xmtpRN/client.types";
-import { useMutation } from "@tanstack/react-query";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { ConversationTopic } from "@xmtp/react-native-sdk";
 import { useCallback } from "react";
 
-export const useDeleteDm = (dm: DmWithCodecsType) => {
+export const useDeleteDm = ({ topic }: { topic: ConversationTopic }) => {
   const { theme } = useAppTheme();
   const colorScheme = theme.isDark ? "dark" : "light";
 
   const currentAccount = useCurrentAccount()!;
 
+  const { data: conversationId } = useQuery({
+    ...getConversationQueryOptions({
+      account: currentAccount,
+      topic,
+    }),
+    select: (conversation) => conversation?.id,
+  });
+
   const { data: peerInboxId } = useDmPeerInboxId({
     account: currentAccount,
-    topic: dm.topic,
+    topic,
   });
 
-  const { mutateAsync: updateDmConsentAsync } = useDmConsent({
-    peerInboxId: peerInboxId!,
-    conversationId: dm.id,
-    topic: dm.topic,
-  });
+  const { mutateAsync: updateDmConsentAsync } = useDmConsent();
 
   const preferredName = usePreferredInboxName(peerInboxId);
 
   const { mutateAsync: deleteDmAsync } = useMutation({
     mutationFn: () =>
       deleteTopic({
         account: currentAccount,
-        topic: dm.topic,
+        topic,
       }),
     onMutate: () => {
       const previousIsDeleted = getConversationMetadataQueryData({
         account: currentAccount,
-        topic: dm.topic,
+        topic,
       })?.isDeleted;
 
       updateConversationMetadataQueryData({
         account: currentAccount,
-        topic: dm.topic,
+        topic,
         updateData: { isDeleted: true },
       });
 
@@ -58,7 +63,7 @@ export const useDeleteDm = (dm: DmWithCodecsType) => {
     onError: (error, _, context) => {
       updateConversationMetadataQueryData({
         account: currentAccount,
-        topic: dm.topic,
+        topic,
         updateData: { isDeleted: context?.previousIsDeleted },
       });
     },
@@ -67,6 +72,14 @@ export const useDeleteDm = (dm: DmWithCodecsType) => {
   return useCallback(() => {
     const title = `${translate("delete_chat_with")} ${preferredName}?`;
 
+    if (!conversationId) {
+      throw new Error("Conversation not found in useDeleteDm");
+    }
+
+    if (!peerInboxId) {
+      throw new Error("Peer inbox id not found in useDeleteDm");
+    }
+
     const actions = [
       {
         label: translate("delete"),
@@ -85,6 +98,9 @@ export const useDeleteDm = (dm: DmWithCodecsType) => {
             await deleteDmAsync();
             await updateDmConsentAsync({
               consent: "deny",
+              peerInboxId: peerInboxId,
+              conversationId,
+              topic,
             });
           } catch (error) {
             captureErrorWithToast(error);
@@ -111,5 +127,13 @@ export const useDeleteDm = (dm: DmWithCodecsType) => {
         }
       }
     );
-  }, [colorScheme, preferredName, deleteDmAsync, updateDmConsentAsync]);
+  }, [
+    colorScheme,
+    preferredName,
+    deleteDmAsync,
+    updateDmConsentAsync,
+    peerInboxId,
+    conversationId,
+    topic,
+  ]);
 };

features/conversation-list/hooks/use-delete-dm.ts

@@ -92,10 +92,5 @@ export const useConversationListConversations = () => {
      */
   }, [conversations, conversationsMetadataQueries]);
 
-  console.log(
-    "filteredAndSortedConversations:",
-    filteredAndSortedConversations
-  );
-
   return { data: filteredAndSortedConversations, refetch };
 };

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

@@ -57,16 +57,31 @@ export function useConversationRequestsListItem() {
 
   const isLoading =
     unkownConsentConversationsLoading || spamQueries.some((q) => q.isLoading);
-  const spamResults = spamQueries.map((q, i) => ({
-    conversation: unkownConsentConversations?.[i],
-    isSpam: q.data ?? true,
-  }));
+
+  const spamResults = spamQueries
+    .map((q, i) => ({
+      conversation: unkownConsentConversations?.[i],
+      isSpam: q.data ?? true,
+    }))
+    .filter((r) => !!r.conversation);
 
   return {
     likelyNotSpam:
-      spamResults.filter((r) => !r.isSpam).map((r) => r.conversation) ?? [],
+      spamResults
+        .filter((r) => !r.isSpam)
+        .map(
+          (r) =>
+            // ! because we do .filter above
+            r.conversation!
+        ) ?? [],
     likelySpam:
-      spamResults.filter((r) => r.isSpam).map((r) => r.conversation) ?? [],
+      spamResults
+        .filter((r) => r.isSpam)
+        .map(
+          (r) =>
+            // ! because we do .filter above
+            r.conversation!
+        ) ?? [],
     isLoading,
   };
 }