feat: clear chat

features/conversation/conversation-chat/conversation-composer/conversation-composer-text-input.tsx

@@ -34,19 +34,13 @@ export const ConversationComposerTextInput = memo(function ConversationComposerT
     onSubmitEditing()
   }, [onSubmitEditing])
 
-  // Focus the input when appropriate
-  const focusInput = useCallback(() => {
-    inputRef.current?.focus()
-  }, [])
-
   return (
     <TextInput
       style={themed($textInput)}
       editable={isEnabled}
       ref={inputRef}
       onSubmitEditing={handleSubmitEditing}
       onChangeText={handleChangeText}
-      onFocus={focusInput}
       multiline
       value={inputValue}
       placeholder="Message"

features/conversation/conversation-chat/conversation-message/conversation-message-group-update.tsx

@@ -5,6 +5,13 @@ import { memo, useCallback, useMemo } from "react"
 import { ViewStyle } from "react-native"
 import { Avatar } from "@/components/avatar"
 import { Center } from "@/design-system/Center"
+import { useSafeCurrentSender } from "@/features/authentication/multi-inbox.store"
+import { useConversationQuery } from "@/features/conversation/queries/conversation.query"
+import { isConversationDm } from "@/features/conversation/utils/is-conversation-dm"
+import {
+  CLEAR_CHAT_RETENTION_DURATION_NS,
+  getFormattedDisappearingDuration,
+} from "@/features/disappearing-messages/disappearing-messages.constants"
 import { usePreferredDisplayInfo } from "@/features/preferred-display-info/use-preferred-display-info"
 import { IXmtpConversationId, IXmtpInboxId } from "@/features/xmtp/xmtp.types"
 import { navigate } from "@/navigation/navigation.utils"
@@ -13,16 +20,14 @@ import {
   IConversationMessageGroupUpdated,
   IGroupUpdatedMetadataEntry,
 } from "./conversation-message.types"
-import { getFormattedDisappearingDuration } from "@/features/disappearing-messages/disappearing-messages.constants"
-import { useSafeCurrentSender } from "@/features/authentication/multi-inbox.store"
-import { useConversationQuery } from "@/features/conversation/queries/conversation.query"
-import { isConversationDm } from "@/features/conversation/utils/is-conversation-dm"
 
 type IConversationMessageGroupUpdateProps = {
   message: IConversationMessageGroupUpdated
 }
 
-export const ConversationMessageGroupUpdate = memo(function ConversationMessageGroupUpdate({ message }: IConversationMessageGroupUpdateProps) {
+export const ConversationMessageGroupUpdate = memo(function ConversationMessageGroupUpdate({
+  message,
+}: IConversationMessageGroupUpdateProps) {
   const { themed } = useAppTheme()
   const content = message.content
 
@@ -62,14 +67,19 @@ type IChatGroupMemberLeftProps = {
   inboxId: IXmtpInboxId
 }
 
-const ChatGroupMemberLeft = memo(function ChatGroupMemberLeft({ inboxId }: IChatGroupMemberLeftProps) {
+const ChatGroupMemberLeft = memo(function ChatGroupMemberLeft({
+  inboxId,
+}: IChatGroupMemberLeftProps) {
   const { themed, theme } = useAppTheme()
-
-  const displayInfoParams = useMemo(() => ({
-    inboxId,
-    caller: "ChatGroupMemberLeft" as const,
-  }), [inboxId]);
-
+
+  const displayInfoParams = useMemo(
+    () => ({
+      inboxId,
+      caller: "ChatGroupMemberLeft" as const,
+    }),
+    [inboxId],
+  )
+
   const { displayName, avatarUrl } = usePreferredDisplayInfo(displayInfoParams)
 
   const handlePress = useCallback(() => {
@@ -78,10 +88,7 @@ const ChatGroupMemberLeft = memo(function ChatGroupMemberLeft({ inboxId }: IChat
 
   return (
     <HStack style={themed($memberContainer)}>
-      <Pressable
-        style={themed($pressableContent)}
-        onPress={handlePress}
-      >
+      <Pressable style={themed($pressableContent)} onPress={handlePress}>
         <Avatar sizeNumber={theme.avatarSize.xs} uri={avatarUrl} name={displayName ?? ""} />
         <ChatGroupUpdateText weight="bold">{displayName ?? ""}</ChatGroupUpdateText>
       </Pressable>
@@ -96,28 +103,35 @@ type IChatGroupMemberJoinedProps = {
   xmtpConversationId: IXmtpConversationId
 }
 
-const ChatGroupMemberJoined = memo(function ChatGroupMemberJoined({ 
-  inboxId, 
+const ChatGroupMemberJoined = memo(function ChatGroupMemberJoined({
+  inboxId,
   initiatedByInboxId,
-  xmtpConversationId 
+  xmtpConversationId,
 }: IChatGroupMemberJoinedProps) {
   const { themed, theme } = useAppTheme()
 
   const currentSender = useSafeCurrentSender()
-
-  const memberDisplayInfoParams = useMemo(() => ({
-    inboxId,
-    caller: "ChatGroupMemberJoined" as const,
-  }), [inboxId]);
-
+
+  const memberDisplayInfoParams = useMemo(
+    () => ({
+      inboxId,
+      caller: "ChatGroupMemberJoined" as const,
+    }),
+    [inboxId],
+  )
+
   const { displayName, avatarUrl } = usePreferredDisplayInfo(memberDisplayInfoParams)
 
-  const initiatorDisplayInfoParams = useMemo(() => ({
-    inboxId: initiatedByInboxId,
-    caller: "ChatGroupMemberJoined" as const,
-  }), [initiatedByInboxId]);
-
-  const { displayName: initiatorDisplayName, avatarUrl: initiatorAvatarUrl } = usePreferredDisplayInfo(initiatorDisplayInfoParams)
+  const initiatorDisplayInfoParams = useMemo(
+    () => ({
+      inboxId: initiatedByInboxId,
+      caller: "ChatGroupMemberJoined" as const,
+    }),
+    [initiatedByInboxId],
+  )
+
+  const { displayName: initiatorDisplayName, avatarUrl: initiatorAvatarUrl } =
+    usePreferredDisplayInfo(initiatorDisplayInfoParams)
 
   const handleMemberPress = useCallback(() => {
     navigate("Profile", { inboxId })
@@ -138,23 +152,21 @@ const ChatGroupMemberJoined = memo(function ChatGroupMemberJoined({
 
   return (
     <HStack style={themed($memberContainer)}>
-      <Pressable
-        onPress={handleMemberPress}
-        style={themed($pressableContent)}
-      >
+      <Pressable onPress={handleMemberPress} style={themed($pressableContent)}>
         <Avatar sizeNumber={theme.avatarSize.xs} uri={avatarUrl} name={displayName ?? ""} />
         <ChatGroupUpdateText weight="bold">{displayName ?? ""}</ChatGroupUpdateText>
       </Pressable>
       <ChatGroupUpdateText>{isDm ? "joined" : "was invited"}</ChatGroupUpdateText>
 
       {/* Show inviter if their displayName is available and it's not a DM */}
       {!isDm && initiatorDisplayName && (
-        <Pressable
-          onPress={handleInitiatorPress}
-          style={themed($pressableContent)}
-        >
+        <Pressable onPress={handleInitiatorPress} style={themed($pressableContent)}>
           <ChatGroupUpdateText>by</ChatGroupUpdateText>
-          <Avatar sizeNumber={theme.avatarSize.xs} uri={initiatorAvatarUrl} name={initiatorDisplayName ?? ""} />
+          <Avatar
+            sizeNumber={theme.avatarSize.xs}
+            uri={initiatorAvatarUrl}
+            name={initiatorDisplayName ?? ""}
+          />
           <ChatGroupUpdateText weight="bold">{initiatorDisplayName ?? ""}</ChatGroupUpdateText>
         </Pressable>
       )}
@@ -172,12 +184,15 @@ const ChatGroupMetadataUpdate = memo(function ChatGroupMetadataUpdate({
   initiatorInboxId,
 }: IChatGroupMetadataUpdateProps) {
   const { themed, theme } = useAppTheme()
-
-  const displayInfoParams = useMemo(() => ({
-    inboxId: initiatorInboxId,
-    caller: "ChatGroupMetadataUpdate" as const,
-  }), [initiatorInboxId]);
-
+
+  const displayInfoParams = useMemo(
+    () => ({
+      inboxId: initiatorInboxId,
+      caller: "ChatGroupMetadataUpdate" as const,
+    }),
+    [initiatorInboxId],
+  )
+
   const { displayName, avatarUrl } = usePreferredDisplayInfo(displayInfoParams)
 
   const handlePress = useCallback(() => {
@@ -193,15 +208,21 @@ const ChatGroupMetadataUpdate = memo(function ChatGroupMetadataUpdate({
       case "description":
         return `changed group description to ${metadataEntry.newValue}`
       case "message_disappear_in_ns": {
+        const oldValue = parseInt(metadataEntry.oldValue, 10)
         const newValue = parseInt(metadataEntry.newValue, 10)
         const newTime = getFormattedDisappearingDuration(newValue)
 
-        if (newValue === 0) {
-          return `disabled disappearing messages`
-        } else if (metadataEntry.oldValue === "0") {
+        if (newValue === CLEAR_CHAT_RETENTION_DURATION_NS) {
+          // transition to cleared chat
+          return "cleared the chat"
+        } else if (oldValue === CLEAR_CHAT_RETENTION_DURATION_NS && newValue > 0) {
+          // transition from cleared chat
+          return `set messages to disappear in ${newTime}`
+        } else if (newValue === 0) {
+          return "turned off disappearing messages"
+        } else if (oldValue === 0) {
           return `set messages to disappear in ${newTime}`
         } else {
-          const oldValue = parseInt(metadataEntry.oldValue, 10)
           const oldTime = getFormattedDisappearingDuration(oldValue)
           return `changed disappearing messages from ${oldTime} to ${newTime}`
         }
@@ -222,10 +243,7 @@ const ChatGroupMetadataUpdate = memo(function ChatGroupMetadataUpdate({
 
   return (
     <HStack style={themed($memberContainer)}>
-      <Pressable
-        onPress={handlePress}
-        style={themed($pressableContent)}
-      >
+      <Pressable onPress={handlePress} style={themed($pressableContent)}>
         <Avatar sizeNumber={theme.avatarSize.xs} uri={avatarUrl} name={displayName ?? ""} />
         <ChatGroupUpdateText weight="bold">{displayName ?? ""}</ChatGroupUpdateText>
       </Pressable>

features/conversation/conversation-chat/conversation-messages.tsx

@@ -48,7 +48,10 @@ import { useConversationQuery } from "@/features/conversation/queries/conversati
 import { isConversationAllowed } from "@/features/conversation/utils/is-conversation-allowed"
 import { isConversationDm } from "@/features/conversation/utils/is-conversation-dm"
 import { isTmpConversation } from "@/features/conversation/utils/tmp-conversation"
-import { useDisappearingMessageSettings } from "@/features/disappearing-messages/disappearing-message-settings.query"
+import {
+  invalidateDisappearingMessageSettings,
+  useDisappearingMessageSettings,
+} from "@/features/disappearing-messages/disappearing-message-settings.query"
 import { refetchGroupQuery } from "@/features/groups/queries/group.query"
 import { IXmtpMessageId } from "@/features/xmtp/xmtp.types"
 import { useEffectOnce } from "@/hooks/use-effect-once"
@@ -376,6 +379,12 @@ function useHandleSrolling(props: {
 
     isRefreshingRef.current = true
 
+    invalidateDisappearingMessageSettings({
+      clientInboxId: currentSender.inboxId,
+      conversationId: xmtpConversationId,
+      caller: "Conversation Messages refetch on scroll past bottom",
+    }).catch(captureError)
+
     logger.debug("Refetching newest messages because we're scrolled past the bottom...")
     refetchConversationMessagesInfiniteQuery({
       clientInboxId: currentSender.inboxId,

features/current-user/current-user.query.ts

@@ -2,6 +2,7 @@ import { queryOptions, useQuery } from "@tanstack/react-query"
 import { useAuthenticationStore } from "@/features/authentication/authentication.store"
 import { IConvosCurrentUser } from "@/features/current-user/current-user.types"
 import { reactQueryClient } from "@/utils/react-query/react-query.client"
+import { ensureQueryDataBetter } from "@/utils/react-query/react-query.helpers"
 import { getReactQueryKey } from "@/utils/react-query/react-query.utils"
 import { fetchCurrentUser } from "./current-user.api"
 
@@ -15,7 +16,9 @@ export function getCurrentUserQueryOptions(args: { caller?: string }) {
     queryKey: getReactQueryKey({
       baseStr: "current-user",
     }),
-    queryFn: () => fetchCurrentUser(),
+    queryFn: () => {
+      return fetchCurrentUser()
+    },
   })
 }
 
@@ -44,5 +47,5 @@ export function getCurrentUserQueryData() {
 
 export function ensureCurrentUserQueryData(args: { caller: string }) {
   const { caller } = args
-  return reactQueryClient.ensureQueryData(getCurrentUserQueryOptions({ caller }))
+  return ensureQueryDataBetter(getCurrentUserQueryOptions({ caller }))
 }