feat: more chat fixes + message status + optimistic update for text m…

…essage + refactor queries/mutations (#1357) * wip * add optimistic update when sinding simple text message * more fixes * more fixes * moreee fixes * fix tsc
ephemeraHQ · Dec 18, 2024 · 9f30c7f · 9f30c7f
1 parent 9211def
commit 9f30c7f
Show file tree

Hide file tree

Showing 119 changed files with 2,597 additions and 3,184 deletions.
diff --git a/components/Connecting.tsx b/components/Connecting.tsx
@@ -5,7 +5,7 @@ import { useDebugEnabled } from "./DebugButton";
 import { useChatStore, useCurrentAccount } from "../data/store/accountsStore";
 import { useAppStore } from "../data/store/appStore";
 import { useSelect } from "../data/store/storeHelpers";
-import { useV3ConversationListQuery } from "@/queries/useV3ConversationListQuery";
+import { useConversationListQuery } from "@/queries/useConversationListQuery";
 
 export const useShouldShowConnecting = () => {
   const isInternetReachable = useAppStore((s) => s.isInternetReachable);
@@ -67,7 +67,7 @@ export const useShouldShowConnecting = () => {
 
 export const useShouldShowConnectingOrSyncing = () => {
   const currentAccount = useCurrentAccount();
-  const { isLoading } = useV3ConversationListQuery(currentAccount!);
+  const { isLoading } = useConversationListQuery({ account: currentAccount! });
   const initialLoadDoneOnce = !isLoading;
   const shouldShowConnecting = useShouldShowConnecting();
 

diff --git a/components/PinnedConversations/PinnedConversations.tsx b/components/PinnedConversations/PinnedConversations.tsx
@@ -1,9 +1,8 @@
 import { View, ViewStyle } from "react-native";
-
-import { PinnedV3Conversation } from "./PinnedV3Conversation";
-import { useV3ConversationListQuery } from "@queries/useV3ConversationListQuery";
-import { useCurrentAccount } from "@data/store/accountsStore";
+import { useConversationListQuery } from "@/queries/useConversationListQuery";
 import { ThemedStyle, useAppTheme } from "@/theme/useAppTheme";
+import { useCurrentAccount } from "@data/store/accountsStore";
+import { PinnedV3Conversation } from "./PinnedV3Conversation";
 
 type Props = {
   topics?: string[];
@@ -14,14 +13,14 @@ export const PinnedConversations = ({ topics }: Props) => {
 
   const { themed } = useAppTheme();
 
-  const { isLoading } = useV3ConversationListQuery(
-    currentAccount!,
-    {
+  const { isLoading } = useConversationListQuery({
+    account: currentAccount!,
+    context: "PinnedConversations",
+    queryOptions: {
       refetchOnWindowFocus: false,
       refetchOnMount: false,
     },
-    "PinnedConversations"
-  );
+  });
 
   if (isLoading) return null;
 

diff --git a/components/PinnedConversations/PinnedV3DMConversation.tsx b/components/PinnedConversations/PinnedV3DMConversation.tsx
@@ -1,25 +1,25 @@
-import { PinnedConversation } from "./PinnedConversation";
-import { useCallback, useMemo } from "react";
-import { navigate } from "@utils/navigation";
-import Avatar from "@components/Avatar";
-import { DmWithCodecsType } from "@utils/xmtpRN/client";
-import { usePreferredInboxName } from "@hooks/usePreferredInboxName";
-import { usePreferredInboxAvatar } from "@hooks/usePreferredInboxAvatar";
-import { useDmPeerInboxOnConversationList } from "@queries/useDmPeerInboxOnConversationList";
-import { useChatStore, useCurrentAccount } from "@data/store/accountsStore";
 import { useSelect } from "@/data/store/storeHelpers";
+import { VStack } from "@/design-system/VStack";
 import {
   resetConversationListContextMenuStore,
   setConversationListContextMenuConversationData,
 } from "@/features/conversation-list/ConversationListContextMenu.store";
-import { translate } from "@i18n";
-import { useToggleReadStatus } from "@/features/conversation-list/hooks/useToggleReadStatus";
-import { useConversationIsUnread } from "@/features/conversation-list/hooks/useMessageIsUnread";
 import { useHandleDeleteDm } from "@/features/conversation-list/hooks/useHandleDeleteDm";
+import { useConversationIsUnread } from "@/features/conversation-list/hooks/useMessageIsUnread";
+import { useToggleReadStatus } from "@/features/conversation-list/hooks/useToggleReadStatus";
+import { useDmPeerInboxId } from "@/queries/useDmPeerInbox";
 import { useAppTheme } from "@/theme/useAppTheme";
-import { ContextMenuIcon, ContextMenuItem } from "../ContextMenuItems";
+import Avatar from "@components/Avatar";
+import { useChatStore, useCurrentAccount } from "@data/store/accountsStore";
+import { usePreferredInboxAvatar } from "@hooks/usePreferredInboxAvatar";
+import { usePreferredInboxName } from "@hooks/usePreferredInboxName";
+import { translate } from "@i18n";
+import { navigate } from "@utils/navigation";
+import { DmWithCodecsType } from "@utils/xmtpRN/client";
+import { useCallback, useMemo } from "react";
 import { isTextMessage } from "../../features/conversation/conversation-message/conversation-message.utils";
-import { VStack } from "@/design-system/VStack";
+import { ContextMenuIcon, ContextMenuItem } from "../ContextMenuItems";
+import { PinnedConversation } from "./PinnedConversation";
 import { PinnedMessagePreview } from "./PinnedMessagePreview";
 
 type PinnedV3DMConversationProps = {
@@ -37,10 +37,10 @@ export const PinnedV3DMConversation = ({
 
   const topic = conversation.topic;
 
-  const { data: peerInboxId } = useDmPeerInboxOnConversationList(
-    currentAccount,
-    conversation
-  );
+  const { data: peerInboxId } = useDmPeerInboxId({
+    account: currentAccount!,
+    topic,
+  });
 
   const preferredName = usePreferredInboxName(peerInboxId);
 

diff --git a/components/StateHandlers/HydrationStateHandler.tsx b/components/StateHandlers/HydrationStateHandler.tsx
@@ -1,5 +1,5 @@
 import { prefetchInboxIdQuery } from "@/queries/use-inbox-id-query";
-import { fetchPersistedConversationListQuery } from "@/queries/useV3ConversationListQuery";
+import { fetchPersistedConversationListQuery } from "@/queries/useConversationListQuery";
 import logger from "@utils/logger";
 import { useEffect } from "react";
 import { getAccountsList } from "@data/store/accountsStore";
@@ -34,7 +34,7 @@ export default function HydrationStateHandler() {
 
           const results = await Promise.allSettled([
             getXmtpClient(account),
-            fetchPersistedConversationListQuery(account),
+            fetchPersistedConversationListQuery({ account }),
             prefetchInboxIdQuery({ account }),
           ]);
 

diff --git a/components/V3DMListItem.tsx b/components/V3DMListItem.tsx
@@ -1,32 +1,32 @@
-import { DmWithCodecsType } from "@utils/xmtpRN/client";
-import { ConversationListItemDumb } from "./ConversationListItem/ConversationListItemDumb";
-import { useCallback, useMemo, useRef } from "react";
-import Avatar from "./Avatar";
+import {
+  resetConversationListContextMenuStore,
+  setConversationListContextMenuConversationData,
+} from "@/features/conversation-list/ConversationListContextMenu.store";
+import { useHandleDeleteDm } from "@/features/conversation-list/hooks/useHandleDeleteDm";
+import { useDmPeerInboxId } from "@/queries/useDmPeerInbox";
+import { useAppTheme } from "@/theme/useAppTheme";
 import { useChatStore, useCurrentAccount } from "@data/store/accountsStore";
-import { AvatarSizes } from "@styles/sizes";
-import { getMinimalDate } from "@utils/date";
-import { useColorScheme } from "react-native";
+import { useSelect } from "@data/store/storeHelpers";
 import { IIconName } from "@design-system/Icon/Icon.types";
-import { useDmPeerInboxOnConversationList } from "@queries/useDmPeerInboxOnConversationList";
-import { usePreferredInboxName } from "@hooks/usePreferredInboxName";
 import { usePreferredInboxAvatar } from "@hooks/usePreferredInboxAvatar";
+import { usePreferredInboxName } from "@hooks/usePreferredInboxName";
+import { translate } from "@i18n/index";
+import { useRoute } from "@navigation/useNavigation";
+import { AvatarSizes } from "@styles/sizes";
+import { getMinimalDate } from "@utils/date";
+import { Haptics } from "@utils/haptics";
 import { navigate } from "@utils/navigation";
+import { DmWithCodecsType } from "@utils/xmtpRN/client";
+import { useCallback, useMemo, useRef } from "react";
+import { useColorScheme } from "react-native";
 import { Swipeable } from "react-native-gesture-handler";
-import { useSelect } from "@data/store/storeHelpers";
-import { Haptics } from "@utils/haptics";
 import { runOnJS } from "react-native-reanimated";
-import { translate } from "@i18n/index";
-import { useToggleReadStatus } from "../features/conversation-list/hooks/useToggleReadStatus";
-import { useMessageText } from "../features/conversation-list/hooks/useMessageText";
-import { useRoute } from "@navigation/useNavigation";
 import { useConversationIsUnread } from "../features/conversation-list/hooks/useMessageIsUnread";
-import {
-  resetConversationListContextMenuStore,
-  setConversationListContextMenuConversationData,
-} from "@/features/conversation-list/ConversationListContextMenu.store";
-import { useHandleDeleteDm } from "@/features/conversation-list/hooks/useHandleDeleteDm";
+import { useMessageText } from "../features/conversation-list/hooks/useMessageText";
+import { useToggleReadStatus } from "../features/conversation-list/hooks/useToggleReadStatus";
+import Avatar from "./Avatar";
 import { ContextMenuIcon, ContextMenuItem } from "./ContextMenuItems";
-import { useAppTheme } from "@/theme/useAppTheme";
+import { ConversationListItemDumb } from "./ConversationListItem/ConversationListItemDumb";
 
 type V3DMListItemProps = {
   conversation: DmWithCodecsType;
@@ -58,10 +58,10 @@ export const V3DMListItem = ({ conversation }: V3DMListItemProps) => {
     useSelect(["setPinnedConversations"])
   );
 
-  const { data: peer } = useDmPeerInboxOnConversationList(
-    currentAccount!,
-    conversation
-  );
+  const { data: peerInboxId } = useDmPeerInboxId({
+    account: currentAccount!,
+    topic,
+  });
 
   const timestamp = conversation?.lastMessage?.sentNs ?? 0;
   const timeToShow = getMinimalDate(timestamp);
@@ -79,8 +79,8 @@ export const V3DMListItem = ({ conversation }: V3DMListItemProps) => {
   const { theme } = useAppTheme();
 
   const messageText = useMessageText(conversation.lastMessage);
-  const preferredName = usePreferredInboxName(peer);
-  const avatarUri = usePreferredInboxAvatar(peer);
+  const preferredName = usePreferredInboxName(peerInboxId);
+  const avatarUri = usePreferredInboxAvatar(peerInboxId);
 
   const toggleReadStatus = useToggleReadStatus({
     topic,

diff --git a/containers/GroupScreenAddition.tsx b/containers/GroupScreenAddition.tsx
@@ -1,10 +1,10 @@
+import { useGroupNameQuery } from "@/queries/useGroupNameQuery";
 import { useChatStore, useCurrentAccount } from "@data/store/accountsStore";
 import { useSelect } from "@data/store/storeHelpers";
 import { Icon } from "@design-system/Icon/Icon";
 import { useExistingGroupInviteLink } from "@hooks/useExistingGroupInviteLink";
 import { useGroupDescription } from "@hooks/useGroupDescription";
 import { useGroupMembers } from "@hooks/useGroupMembers";
-import { useGroupName } from "@hooks/useGroupName";
 import { useGroupPermissions } from "@hooks/useGroupPermissions";
 import { useGroupPhoto } from "@hooks/useGroupPhoto";
 import { translate } from "@i18n";
@@ -31,16 +31,16 @@ import {
   Platform,
   StyleSheet,
   TouchableOpacity,
-  useColorScheme,
   View,
+  useColorScheme,
 } from "react-native";
 import { Portal, Snackbar, Text } from "react-native-paper";
 import {
-  saveGroupInviteLink,
-  deleteGroupInviteLink as deleteLinkFromStore,
-  saveInviteIdByGroupId,
   deleteInviteIdByGroupId,
+  deleteGroupInviteLink as deleteLinkFromStore,
   getInviteIdByGroupId,
+  saveGroupInviteLink,
+  saveInviteIdByGroupId,
 } from "../features/GroupInvites/groupInvites.utils";
 
 type GroupScreenAdditionProps = {
@@ -75,7 +75,10 @@ export const GroupScreenAddition: FC<GroupScreenAdditionProps> = ({
     currentAccountIsAdmin,
     currentAccountIsSuperAdmin
   );
-  const { groupName } = useGroupName(topic);
+  const { data: groupName } = useGroupNameQuery({
+    account: currentAccount,
+    topic,
+  });
   const { groupPhoto } = useGroupPhoto(topic);
   const { groupDescription } = useGroupDescription(topic);
 

diff --git a/containers/GroupScreenName.tsx b/containers/GroupScreenName.tsx
@@ -1,6 +1,6 @@
+import { useGroupName } from "@/hooks/useGroupName";
 import { useCurrentAccount } from "@data/store/accountsStore";
 import { useGroupMembers } from "@hooks/useGroupMembers";
-import { useGroupName } from "@hooks/useGroupName";
 import { useGroupPermissions } from "@hooks/useGroupPermissions";
 import { textPrimaryColor } from "@styles/colors";
 import {
@@ -13,12 +13,12 @@ import { formatGroupName } from "@utils/str";
 import type { ConversationTopic } from "@xmtp/react-native-sdk";
 import React, { FC, useCallback, useMemo, useState } from "react";
 import {
+  Alert,
+  Pressable,
   StyleSheet,
+  Text,
   TextInput,
   useColorScheme,
-  Text,
-  Alert,
-  Pressable,
 } from "react-native";
 
 type GroupScreenNameProps = {
@@ -28,9 +28,9 @@ type GroupScreenNameProps = {
 export const GroupScreenName: FC<GroupScreenNameProps> = ({ topic }) => {
   const styles = useStyles();
   const { permissions } = useGroupPermissions(topic);
-  const { groupName, setGroupName } = useGroupName(topic);
+  const currentAccount = useCurrentAccount()!;
+  const { updateGroupName, groupName } = useGroupName(topic);
   const formattedGroupName = formatGroupName(topic, groupName);
-  const currentAccount = useCurrentAccount() as string;
   const { members } = useGroupMembers(topic);
 
   const { currentAccountIsAdmin, currentAccountIsSuperAdmin } = useMemo(
@@ -49,12 +49,12 @@ export const GroupScreenName: FC<GroupScreenNameProps> = ({ topic }) => {
   const handleNameChange = useCallback(async () => {
     try {
       setEditing(false);
-      await setGroupName(editedName);
+      await updateGroupName(editedName);
     } catch (e) {
       logger.error(e);
       Alert.alert("An error occurred");
     }
-  }, [editedName, setGroupName]);
+  }, [editedName, updateGroupName]);
   const canEditGroupName = memberCanUpdateGroup(
     permissions?.updateGroupNamePolicy,
     currentAccountIsAdmin,