@planningcenter/chat-react-native 3.18.0-rc.6 → 3.18.0-rc.8

package/src/hooks/use_message_create_or_update.ts

@@ -14,6 +14,7 @@ import { useCurrentPerson } from './use_current_person'
 import { optimisticallyUpdateMessage } from '../utils/cache/optimistically_update_message'
 import { optimisticallyCreateMessage } from '../utils/cache/optimistically_create_message'
 import { startMessageCreationTracking } from '../utils/performance_tracking'
+import { isNewMessage } from '../utils/cache/messages_cache'
 
 interface Props {
   conversationId: number
@@ -93,6 +94,7 @@ export function useMessageCreateOrUpdate({ conversationId, message, replyRootId
         text,
         attachments,
         currentPerson,
+        replyRootId,
       })
 
       return { message: optimisticMessage }
@@ -103,7 +105,10 @@ export function useMessageCreateOrUpdate({ conversationId, message, replyRootId
 
       // Add error to the optimistic message from the cache on error
       if (optimisticMessage) {
-        const queryKey = getMessagesQueryKey({ conversation_id: conversationId })
+        const queryKey = getMessagesQueryKey({
+          conversation_id: conversationId,
+          reply_root_id: replyRootId,
+        })
         chatQueryClient.setQueryData(
           queryKey,
           (data: InfiniteData<ApiCollection<MessageResource>> | undefined) =>
@@ -123,7 +128,10 @@ export function useMessageCreateOrUpdate({ conversationId, message, replyRootId
       const { message: optimisticMessage } = context || {}
       const updatedMessage = result.data
       type QueryData = InfiniteData<ApiCollection<MessageResource>>
-      const queryKey = getMessagesQueryKey({ conversation_id: conversationId })
+      const queryKey = getMessagesQueryKey({
+        conversation_id: conversationId,
+        reply_root_id: replyRootId,
+      })
 
       // First remove the optimistic message if it exists
       if (optimisticMessage) {
@@ -148,13 +156,6 @@ export function useMessageCreateOrUpdate({ conversationId, message, replyRootId
   return mutation
 }
 
-export function isTemporaryMessageId(messageId?: string | null): boolean {
-  return !!messageId && messageId.endsWith('-temp')
-}
-export function isNewMessage(message?: MessageResource): boolean {
-  return !message?.id || isTemporaryMessageId(message.id)
-}
-
 /**
  * Generate a random UUID (v4) for idempotent keys.
  * Uses Math.random, which is not cryptographically secure.

package/src/hooks/use_typing_indicators.ts

@@ -2,6 +2,7 @@ import { useQuery } from '@tanstack/react-query'
 import { useMemo } from 'react'
 import { PersonTyping } from './use_typing_status_cache'
 import { useCurrentPerson } from './use_current_person'
+import { useConversationContext } from '../contexts/conversation_context'
 
 /**
  * Hook for getting people currently typing in a conversation
@@ -9,9 +10,12 @@ import { useCurrentPerson } from './use_current_person'
  * The query function itself doesn't do anything, but we add to the cache
  * from useTypingStatusCache when we receive a typing event.
  */
-export const useTypingIndicators = (conversationId: number) => {
+export const useTypingIndicators = () => {
+  const { conversationId, currentPageReplyRootId } = useConversationContext()
   const cacheKey = useMemo(() => ['conversationTyping', String(conversationId)], [conversationId])
   const currentPerson = useCurrentPerson()
+  const isCurrentPerson = (authorId: number) => authorId === currentPerson?.id
+  const inMainConversationView = !currentPageReplyRootId
   const now = Date.now()
   const { data } = useQuery({
     queryKey: cacheKey,
@@ -19,8 +23,16 @@ export const useTypingIndicators = (conversationId: number) => {
     initialData: stableArray,
   })
 
-  // Filter out expired entries and the current user
-  return data.filter(person => person.expires > now && person.author_id !== currentPerson?.id)
+  return data.filter(({ author_id, expires, reply_root_id }) => {
+    if (isCurrentPerson(author_id)) return false
+    if (now > expires) return false
+
+    // If you are in the main conversation view, you will see any message sent
+    if (inMainConversationView) return true
+
+    // If you are in a reply view, you will only see messages sent in this reply thread
+    return reply_root_id === currentPageReplyRootId
+  })
 }
 
 /**

package/src/screens/conversation_screen.tsx

@@ -36,6 +36,7 @@ import { useConversationJoltEvents } from '../hooks/use_conversation_jolt_events
 import { JumpToBottomButton } from '../components/conversation/jump_to_bottom_button'
 import { ReplyShadowMessage } from '../components/conversation/reply_shadow_message'
 import { availableFeatures, useFeatures } from '../hooks/use_features'
+import { ConversationContextProvider } from '../contexts/conversation_context'
 
 export type ConversationRouteProps = {
   conversation_id: number
@@ -53,6 +54,19 @@ export type ConversationRouteProps = {
 export type ConversationScreenProps = StaticScreenProps<ConversationRouteProps>
 
 export function ConversationScreen({ route }: ConversationScreenProps) {
+  const { conversation_id, reply_root_id } = route.params
+
+  return (
+    <ConversationContextProvider
+      conversationId={conversation_id}
+      currentPageReplyRootId={reply_root_id ?? null}
+    >
+      <ConversationScreenContent route={route} />
+    </ConversationContextProvider>
+  )
+}
+
+function ConversationScreenContent({ route }: ConversationScreenProps) {
   const styles = useStyles()
   const navigation = useNavigation()
   const { conversation_id, editing_message_id, reply_root_id, reply_root_author_name } =
@@ -179,7 +193,7 @@ export function ConversationScreen({ route }: ConversationScreenProps) {
           />
         )}
         <JumpToBottomButton onPress={handleReturnToBottom} visible={showJumpToBottomButton} />
-        {!noMessages && <TypingIndicator conversationId={conversation_id} />}
+        {!noMessages && <TypingIndicator />}
         {showLeaderDisabledReplyBanner && <LeaderDisabledRepliesBanner />}
         {canReply ? (
           <MessageForm.Root

package/src/types/jolt_events/reaction_events.ts

@@ -6,6 +6,7 @@ interface BaseReactionEventData extends Record<string, unknown> {
     author_id: number
     conversation_id: number
     message_sort_key: string
+    reply_root_id?: string | null
     created_at: string
     organization_id: number
     value: ReactionCountResource['value']

package/src/types/jolt_events/typing_events.ts

@@ -13,4 +13,5 @@ export interface TypingBroadcastDataAttributes {
   author_id: number
   author_name: string
   id: string
+  reply_root_id: string | null
 }

package/src/utils/cache/messages_cache.ts

@@ -0,0 +1,113 @@
+import { InfiniteData, QueryClient } from '@tanstack/react-query'
+import { ApiCollection, MessageResource } from '../../types'
+import { deleteRecordInPagesData } from './page_mutations'
+import { updateOrCreateRecordInPagesData, updateRecordInPagesData } from './page_mutations'
+import { JoltReactionEvent } from '../../types/jolt_events'
+import { transformReactionEventDataToReactionCountResource } from '../jolt/transform_reaction_event_data_to_reaction_count_resource'
+import { getMessagesRequestArgs } from '../request/get_messages'
+import { getRequestQueryKey } from '../../hooks/use_suspense_api'
+
+export function updateCacheWithMessage(
+  queryClient: QueryClient,
+  queryKey: unknown[],
+  message: MessageResource,
+  event: 'message.created' | 'message.updated'
+) {
+  queryClient.setQueryData<MessagesQueryData>(queryKey, prev => {
+    if (event === 'message.created') {
+      // Before adding the new message, remove any pending temporary messages
+      // with matching text to prevent duplicates from race conditions
+      let dataAfterTempRemoval = prev
+      if (prev && message.text && message.mine) {
+        dataAfterTempRemoval = deleteRecordInPagesData({
+          data: prev,
+          record: message,
+          matchFn: (existingMessage, _record) => {
+            return (
+              isTemporaryMessageId(existingMessage.id) &&
+              existingMessage.text === message.text &&
+              existingMessage.mine
+            )
+          },
+        })
+      }
+
+      return updateOrCreateRecordInPagesData({
+        data: dataAfterTempRemoval,
+        record: message,
+        processRecord: (record, current) => {
+          return { ...current, ...record }
+        },
+      })
+    } else {
+      return updateRecordInPagesData({
+        data: prev,
+        record: message,
+        processRecord: (record, current) => {
+          return { ...current, ...record }
+        },
+      })
+    }
+  })
+}
+
+export function updateCacheWithReaction(
+  queryClient: QueryClient,
+  queryKey: unknown[],
+  event: JoltReactionEvent,
+  currentPersonId: number
+) {
+  const message = { id: event.data.data.message_sort_key } as MessageResource
+  queryClient.setQueryData<MessagesQueryData>(queryKey, prev =>
+    updateRecordInPagesData({
+      data: prev,
+      record: message,
+      processRecord: (record, oldMessage) => {
+        const reactionCounts = oldMessage.reactionCounts || []
+        let foundMatch = false
+        let newReactionCounts = reactionCounts.map(reactionCount => {
+          if (reactionCount.value === event.data.data.value) {
+            foundMatch = true
+            return transformReactionEventDataToReactionCountResource({
+              data: event.data.data,
+              oldData: reactionCount,
+              event: event.event,
+              currentPersonId,
+            })
+          }
+          return reactionCount
+        })
+
+        if (!foundMatch) {
+          const newReactionCount = transformReactionEventDataToReactionCountResource({
+            data: event.data.data,
+            event: event.event,
+            currentPersonId,
+          })
+
+          if (newReactionCount?.count) {
+            newReactionCounts = [...newReactionCounts, newReactionCount]
+          }
+        }
+
+        return { ...oldMessage, reactionCounts: newReactionCounts }
+      },
+    })
+  )
+}
+
+type MessagesQueryData = InfiniteData<ApiCollection<MessageResource>>
+export function isTemporaryMessageId(messageId?: string | null): boolean {
+  return !!messageId && messageId.endsWith('-temp')
+}
+export function isNewMessage(message?: MessageResource): boolean {
+  return !message?.id || isTemporaryMessageId(message.id)
+}
+
+export function getThreadedMessagesQueryKey(conversationId: number, replyRootId: string) {
+  const requestArgs = getMessagesRequestArgs({
+    conversation_id: conversationId,
+    reply_root_id: replyRootId,
+  })
+  return getRequestQueryKey(requestArgs)
+}

package/src/utils/cache/optimistically_create_message.ts

@@ -14,12 +14,14 @@ export function optimisticallyCreateMessage({
   attachments,
   currentPerson,
   message,
+  replyRootId,
 }: {
   conversationId: number
   text: string
   attachments?: DenormalizedAttachmentResourceForCreate[]
   currentPerson: CurrentPersonResource
   message?: MessageResource
+  replyRootId?: string | null
 }) {
   const id = message?.id || generateTempMessageId()
 
@@ -49,12 +51,15 @@ export function optimisticallyCreateMessage({
     lastInGroup: true,
     pending: true,
     replyCount: 0,
-    replyRootId: null,
+    replyRootId: replyRootId || null,
   }
 
   // Add the optimistic message to the cache
   type QueryData = InfiniteData<ApiCollection<MessageResource>>
-  const queryKey = getMessagesQueryKey({ conversation_id: conversationId })
+  const queryKey = getMessagesQueryKey({
+    conversation_id: conversationId,
+    reply_root_id: replyRootId,
+  })
 
   chatQueryClient.setQueryData<QueryData>(queryKey, data =>
     updateOrCreateRecordInPagesData({