@planningcenter/chat-react-native 3.18.0-rc.5 → 3.18.0-rc.7

package/src/components/conversations/conversations.tsx

@@ -1,7 +1,6 @@
 import { useNavigation } from '@react-navigation/native'
-import { FlashList } from '@shopify/flash-list'
 import React, { useMemo } from 'react'
-import { StyleSheet, View } from 'react-native'
+import { FlatList, StyleSheet, View } from 'react-native'
 import { useConversationsContext } from '../../contexts/conversations_context'
 import { useTheme } from '../../hooks'
 import { ConversationResource } from '../../types'
@@ -35,7 +34,7 @@ export const Conversations = ({ ListHeaderComponent }: ConversationsProps) => {
 
   const showBadges = !chat_group_graph_id
 
-  const data: FlashListItem[] = useMemo(() => {
+  const data: FlatListItem[] = useMemo(() => {
     if (isLoading) {
       return loadingPlaceholder
     }
@@ -54,9 +53,8 @@ export const Conversations = ({ ListHeaderComponent }: ConversationsProps) => {
 
   return (
     <View style={styles.container}>
-      <FlashList
+      <FlatList
         data={data}
-        estimatedItemSize={97}
         keyExtractor={item => item.id.toString()}
         contentContainerStyle={styles.contentContainer}
         onRefresh={refetch}
@@ -114,18 +112,18 @@ const useStyles = () => {
   })
 }
 
-interface FlashListLoadingItem {
+interface FlatListLoadingItem {
   type: 'loading'
   id: string
 }
-interface FlashListConversationItem {
+interface FlatListConversationItem {
   type: 'conversation'
   resource: ConversationResource
   id: number
 }
-type FlashListItem = FlashListLoadingItem | FlashListConversationItem
+type FlatListItem = FlatListLoadingItem | FlatListConversationItem
 
-const loadingPlaceholder: FlashListItem[] = Array.from({ length: 5 }, (_, i) => ({
+const loadingPlaceholder: FlatListItem[] = Array.from({ length: 5 }, (_, i) => ({
   type: 'loading',
   id: `loading${i}`,
 }))

package/src/hooks/use_conversation_messages_jolt_events.ts

@@ -1,22 +1,21 @@
 import { ApiCollection, MessageResource } from '../types'
 import { useJoltChannel, useJoltEvent } from './use_jolt'
-import {
-  deleteRecordInPagesData,
-  updateOrCreateRecordInPagesData,
-  updateRecordInPagesData,
-} from '../utils'
+import { deleteRecordInPagesData } from '../utils'
 import { MessageCreatedEvent, MessageDeletedEvent } from '../types/jolt_events/message_events'
 import { InfiniteData, useQueryClient } from '@tanstack/react-query'
 import { useCurrentPerson } from './use_current_person'
 import { transformMessageEventDataToMessageResource } from '../utils/jolt/transform_message_event_data_to_message_resource'
 import { getRequestQueryKey } from './use_suspense_api'
 import { JoltReactionEvent, JoltTypingEvent } from '../types/jolt_events'
-import { transformReactionEventDataToReactionCountResource } from '../utils/jolt/transform_reaction_event_data_to_reaction_count_resource'
 import { getMessagesRequestArgs } from '../utils/request/get_messages'
 import { TYPING_TIMEOUT_INTERVAL, useTypingStatusCache } from './use_typing_status_cache'
-import { isTemporaryMessageId } from './use_message_create_or_update'
 import { completeMessageCreationTracking } from '../utils/performance_tracking'
 import { useApiClient } from './use_api_client'
+import {
+  updateCacheWithMessage,
+  updateCacheWithReaction,
+  getThreadedMessagesQueryKey,
+} from '../utils/cache/messages_cache'
 
 interface Props {
   conversationId: number
@@ -47,42 +46,17 @@ export function useConversationMessagesJoltEvents({ conversationId }: Props) {
       }
     }
 
-    queryClient.setQueryData<QueryData>(messagesQueryKey, prev => {
-      if (e.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 }
-          },
-        })
-      }
-    })
+    // Update the main conversation cache
+    updateCacheWithMessage(queryClient, messagesQueryKey, message, e.event)
+
+    // If message has a reply_root_id, also update the threaded cache
+    if (data.reply_root_id) {
+      const threadedMessagesQueryKey = getThreadedMessagesQueryKey(
+        conversationId,
+        data.reply_root_id
+      )
+      updateCacheWithMessage(queryClient, threadedMessagesQueryKey, message, e.event)
+    }
   }
 
   const handleMessageDeleted = async (e: MessageDeletedEvent) => {
@@ -92,50 +66,34 @@ export function useConversationMessagesJoltEvents({ conversationId }: Props) {
       currentPersonId: currentPerson.id,
     })
 
+    // Update the main conversation cache
     queryClient.setQueryData<QueryData>(messagesQueryKey, prev =>
       deleteRecordInPagesData({ data: prev, record: message })
     )
+
+    // If message has a reply_root_id, also update the threaded cache
+    if (data.reply_root_id) {
+      const threadedMessagesQueryKey = getThreadedMessagesQueryKey(
+        conversationId,
+        data.reply_root_id
+      )
+      queryClient.setQueryData<QueryData>(threadedMessagesQueryKey, prev =>
+        deleteRecordInPagesData({ data: prev, record: message })
+      )
+    }
   }
 
   const handleReactionJoltEvent = async (e: JoltReactionEvent) => {
-    const { data } = e.data
-    const message = { id: data.message_sort_key } as MessageResource
-    queryClient.setQueryData<QueryData>(messagesQueryKey, prev =>
-      updateRecordInPagesData({
-        data: prev,
-        record: message,
-        processRecord: (record, oldMessage) => {
-          const reactionCounts = oldMessage.reactionCounts || []
-          let foundMatch = false
-          let newReactionCounts = reactionCounts.map(reactionCount => {
-            if (reactionCount.value === data.value) {
-              foundMatch = true
-              return transformReactionEventDataToReactionCountResource({
-                data,
-                oldData: reactionCount,
-                event: e.event,
-                currentPersonId: currentPerson.id,
-              })
-            }
-            return reactionCount
-          })
-
-          if (!foundMatch) {
-            const newReactionCount = transformReactionEventDataToReactionCountResource({
-              data,
-              event: e.event,
-              currentPersonId: currentPerson.id,
-            })
-
-            if (newReactionCount?.count) {
-              newReactionCounts = [...newReactionCounts, newReactionCount]
-            }
-          }
-
-          return { ...oldMessage, reactionCounts: newReactionCounts }
-        },
-      })
-    )
+    // Update the main conversation cache and capture the reply_root_id if present
+    updateCacheWithReaction(queryClient, messagesQueryKey, e, currentPerson.id)
+
+    const replyRootId = e.data.data.reply_root_id
+
+    // If the message has a reply_root_id, also update the threaded cache
+    if (replyRootId) {
+      const threadedMessagesQueryKey = getThreadedMessagesQueryKey(conversationId, replyRootId)
+      updateCacheWithReaction(queryClient, threadedMessagesQueryKey, e, currentPerson.id)
+    }
   }
 
   const handleTypingEvent = async (e: JoltTypingEvent) => {

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/screens/conversation_details_screen.tsx

@@ -9,6 +9,7 @@ import React, {
   useRef,
 } from 'react'
 import {
+  FlatList,
   StyleSheet,
   TextInput,
   View,
@@ -40,7 +41,6 @@ import {
 } from '../hooks/use_conversation'
 import { MemberResource, isDefined } from '../types'
 import { HeaderTextButton } from '../components/display/platform_modal_header_buttons'
-import { FlashList } from '@shopify/flash-list'
 import { tokens } from '../vendor/tapestry/tokens'
 import { ButtonAppearanceUnion } from '../components/display/utils/button_colors'
 import { GroupResource } from '../types/resources/group_resource'
@@ -300,9 +300,8 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
 
   return (
     <View style={styles.listContainer}>
-      <FlashList
+      <FlatList
         data={listData as SectionListData}
-        estimatedItemSize={52}
         contentContainerStyle={styles.contentContainer}
         renderItem={({ item, index }) => {
           const [isStart, isEnd] = [
@@ -375,7 +374,7 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
               return null
           }
         }}
-        onEndReached={fetchNextPageOfMembers}
+        onEndReached={() => fetchNextPageOfMembers()}
       />
     </View>
   )

package/src/screens/conversation_new/components/form_list.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
-import { StyleSheet, View } from 'react-native'
-import { FlashList, type FlashListProps } from '@shopify/flash-list'
+import { FlatList, type FlatListProps, StyleSheet, View } from 'react-native'
 import { MemberResource } from '../../../types'
 import { Person, Text } from '../../../components/display'
 import { useTheme } from '../../../hooks'
@@ -8,7 +7,7 @@ import { useTheme } from '../../../hooks'
 interface FormListProps {
   memberData: MemberResource[]
   loadingMore?: boolean
-  FormContent?: FlashListProps<MemberResource>['ListHeaderComponent']
+  FormContent?: FlatListProps<MemberResource>['ListHeaderComponent']
   listEmptyText?: string
   onEndReached?: () => void
 }
@@ -23,7 +22,7 @@ export const FormList = ({
   const styles = useStyles()
 
   return (
-    <FlashList
+    <FlatList
       data={memberData}
       ListHeaderComponent={FormContent}
       renderItem={({ item }) => <Person person={item} style={styles.person} />}
@@ -31,7 +30,6 @@ export const FormList = ({
         loadingMore ? <Text style={styles.loadingMore}>Loading more...</Text> : null
       }
       keyExtractor={item => item.id.toString()}
-      estimatedItemSize={45}
       ListEmptyComponent={<ListEmptyText text={listEmptyText || 'No members found'} />}
       onEndReached={onEndReached}
     />

package/src/screens/conversation_select_recipients/conversation_select_group_recipients_screen.tsx

@@ -1,7 +1,6 @@
 import { useNavigation } from '@react-navigation/native'
 import React from 'react'
-import { StyleSheet, View } from 'react-native'
-import { FlashList } from '@shopify/flash-list'
+import { FlatList, StyleSheet, View } from 'react-native'
 import { Heading } from '../../components'
 import { GroupsGroupResource } from '../../types'
 import { useGroupsGroups } from '../../hooks/use_groups_groups'
@@ -31,10 +30,9 @@ export const ConversationSelectGroupRecipientsScreen = ({
   }
 
   return (
-    <FlashList
+    <FlatList
       data={groupsWithCreatePermission}
       keyExtractor={item => item.id.toString()}
-      estimatedItemSize={65}
       contentContainerStyle={styles.contentContainer}
       ListHeaderComponent={
         <View style={styles.sectionHeader}>

package/src/screens/conversation_select_recipients/conversation_select_teams_i_lead_recipients_screen.tsx

@@ -1,7 +1,6 @@
 import { useNavigation } from '@react-navigation/native'
 import React from 'react'
-import { StyleSheet, View } from 'react-native'
-import { FlashList } from '@shopify/flash-list'
+import { FlatList, StyleSheet, View } from 'react-native'
 import { Heading } from '../../components'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { ConversationSelectRecipientsScreenProps } from './types/screen_props'
@@ -30,10 +29,9 @@ export const ConversationSelectTeamsILeadRecipientsScreen = ({
   }
 
   return (
-    <FlashList
+    <FlatList
       data={serviceTypes}
       keyExtractor={item => item.id.toString()}
-      estimatedItemSize={65}
       contentContainerStyle={styles.contentContainer}
       ListHeaderComponent={
         <View style={styles.sectionHeader}>

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/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({