@planningcenter/chat-react-native 3.18.0-rc.1 → 3.18.0-rc.10

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/contexts/conversation_context.tsx

@@ -0,0 +1,34 @@
+import React, { createContext, PropsWithChildren, useContext, useMemo } from 'react'
+
+interface ConversationContextValue {
+  conversationId: number
+  currentPageReplyRootId: string | null
+}
+
+interface ConversationContextProviderProps extends PropsWithChildren {
+  conversationId: number
+  currentPageReplyRootId: string | null
+}
+
+const ConversationContext = createContext<ConversationContextValue>({
+  conversationId: 0,
+  currentPageReplyRootId: null,
+})
+
+export const ConversationContextProvider = ({
+  children,
+  conversationId,
+  currentPageReplyRootId,
+}: ConversationContextProviderProps) => {
+  const value = useMemo(
+    () => ({
+      conversationId,
+      currentPageReplyRootId,
+    }),
+    [conversationId, currentPageReplyRootId]
+  )
+
+  return <ConversationContext.Provider value={value}>{children}</ConversationContext.Provider>
+}
+
+export const useConversationContext = () => useContext(ConversationContext)

package/src/hooks/use_broadcast_typing_status.ts

@@ -1,5 +1,6 @@
 import { useCallback, useRef } from 'react'
 import { useApiClient } from './use_api_client'
+import { useConversationContext } from '../contexts/conversation_context'
 
 const THROTTLE_INTERVAL = 3000 // 3 seconds
 
@@ -10,7 +11,8 @@ const THROTTLE_INTERVAL = 3000 // 3 seconds
  * after receiving a typing event. This is how we can show a steady typing indicator even
  * if the user types once every 2.9 seconds.
  */
-export const useBroadcastTypingStatus = (conversationId: string | number) => {
+export const useBroadcastTypingStatus = () => {
+  const { conversationId, currentPageReplyRootId } = useConversationContext()
   const apiClient = useApiClient()
   const lastBroadcastTime = useRef<number>(0)
 
@@ -26,12 +28,14 @@ export const useBroadcastTypingStatus = (conversationId: string | number) => {
     apiClient.chat
       .post({
         url: `/me/conversations/${conversationId}/broadcast_typing_status`,
-        data: { data: { type: 'TypingStatus', attributes: {} } },
+        data: {
+          data: { type: 'TypingStatus', attributes: { reply_root_id: currentPageReplyRootId } },
+        },
       })
       .catch(error => {
         console.error('Failed to broadcast typing status:', error)
       })
-  }, [apiClient, conversationId])
+  }, [apiClient.chat, conversationId, currentPageReplyRootId])
 
   return broadcastTypingStatus
 }

package/src/hooks/use_conversation_messages.ts

@@ -16,7 +16,9 @@ export const useConversationMessages = (
     () =>
       data
         .filter(
-          message => !message.deletedAt && (message.attachments?.length || message.text?.length)
+          message =>
+            (!message.deletedAt || message.replyRootId) &&
+            (message.attachments?.length || message.text?.length)
         )
         .sort((a, b) => -a.id.localeCompare(b.id)),
     [data]

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_features.ts

@@ -0,0 +1,47 @@
+import { useSuspenseQuery } from '@tanstack/react-query'
+import { useCallback } from 'react'
+import { getFeaturesRequestArgs, getFeaturesQueryKey } from '../utils/request/get_features'
+import { useApiClient } from './use_api_client'
+import type { FeatureResource } from '../types/resources/feature_resource'
+import { ApiCollection } from '../types'
+
+export function useFeatures() {
+  const apiClient = useApiClient()
+  const requestArgs = getFeaturesRequestArgs()
+
+  const { data } = useSuspenseQuery({
+    queryKey: getFeaturesQueryKey(),
+    queryFn: () => {
+      return apiClient.chat
+        .get<ApiCollection<FeatureResource>>(requestArgs)
+        .catch(() => stableEmptyFeatures)
+    },
+    staleTime: 1000 * 60 * 5, // 5 minutes
+  })
+
+  const features = data.data
+
+  const featureEnabled = useCallback(
+    (featureName: string) =>
+      features.some(feature => feature.name === featureName && feature.enabled),
+    [features]
+  )
+
+  return {
+    features,
+    featureEnabled,
+  }
+}
+
+export const availableFeatures = {
+  threaded_replies: 'QA_MOBILE_threaded_replies',
+}
+
+const stableEmptyFeatures: ApiCollection<FeatureResource> = {
+  data: [],
+  links: {},
+  meta: {
+    count: 0,
+    totalCount: 0,
+  },
+}

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_details_screen.tsx

@@ -9,6 +9,7 @@ import React, {
   useRef,
 } from 'react'
 import {
+  FlatList,
   StyleSheet,
   TextInput,
   View,
@@ -40,10 +41,11 @@ 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'
+import { useFeatures } from '../hooks/use_features'
+import { availableFeatures } from '../hooks/use_features'
 
 // =========================================
 // ====== Factory Constants & Types ========
@@ -93,6 +95,8 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
   const { repliesDisabled, setRepliesDisabled } = useConversationDisableReplies(route.params)
   const { mutate: saveTitle } = useConversationUpdate(route.params)
   const { mutate: deleteConversation } = useConversationDelete(route.params)
+  const { featureEnabled } = useFeatures()
+  const repliesEnabled = featureEnabled(availableFeatures.threaded_replies)
 
   const trimmedTitle = title.trim()
   const emptyTitle = trimmedTitle === '' || title === null
@@ -250,8 +254,8 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
     {
       type: canUpdate ? SectionTypes.setting : SectionTypes.hidden,
       data: {
-        title: 'Freeze conversation',
-        subtitle: 'Disables replies for everyone except leaders.',
+        title: repliesEnabled ? 'Leader messages only' : 'Freeze conversation',
+        subtitle: repliesEnabled ? undefined : 'Disables replies for everyone except leaders.',
         rightItem: (
           <Switch value={repliesDisabled} onChange={() => setRepliesDisabled(!repliesDisabled)} />
         ),
@@ -300,9 +304,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 +378,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}
     />