@planningcenter/chat-react-native 4.1.0 → 4.1.1-qa-staging.0

package/src/components/conversation/message_list.tsx

@@ -0,0 +1,157 @@
+import { date as formatDate } from '@planningcenter/datetime-fmt'
+import React, { RefObject } from 'react'
+import { FlatList, FlatListProps, StyleSheet, View } from 'react-native'
+import { useTheme } from '../../hooks'
+import { ConversationResource } from '../../types/resources/conversation'
+import { MessageResource } from '../../types/resources/message'
+import { getRelativeDateStatus } from '../../utils/date'
+import { groupMessages, type DateSeparator, type EnrichedMessage } from '../../utils/group_messages'
+import { CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL } from '../../utils/styles'
+import { isSystemMessage } from '../../utils/system_messages'
+import { Text } from '../display'
+import { ConversationStartBanner } from './conversation_start_banner'
+import { Message } from './message'
+import { ReplyShadowMessage } from './reply_shadow_message'
+import { SystemMessage } from './system_message'
+
+type ScrollHandlers = Pick<
+  FlatListProps<EnrichedMessage>,
+  'onScroll' | 'onLayout' | 'onContentSizeChange' | 'onScrollEndDrag' | 'onMomentumScrollEnd'
+>
+
+interface MessageListProps extends ScrollHandlers {
+  listRef: RefObject<FlatList | null>
+  conversation: ConversationResource
+  conversationId: number
+  messages: MessageResource[]
+  replyRootId?: string | null
+  hasNextPage: boolean
+  onEndReached: () => void
+}
+
+/** MessageList
+ * The inverted list of messages, reply previews, and date separators for a conversation
+ */
+export function MessageList({
+  listRef,
+  conversation,
+  conversationId,
+  messages,
+  replyRootId,
+  hasNextPage,
+  onEndReached,
+  onScroll,
+  onLayout,
+  onContentSizeChange,
+  onScrollEndDrag,
+  onMomentumScrollEnd,
+}: MessageListProps) {
+  const styles = useStyles()
+  const inReplyScreen = !!replyRootId
+  const canDeleteNonAuthoredMessages =
+    conversation.memberAbility?.canDeleteNonAuthoredMessages ?? false
+  const latestRead = conversation.latestReadMessageSortKey
+  const messagesWithSeparators = groupMessages({ ms: messages, inReplyScreen })
+
+  return (
+    <FlatList
+      inverted
+      ref={listRef}
+      contentContainerStyle={styles.listContainer}
+      data={messagesWithSeparators}
+      keyExtractor={item => item.id}
+      onScroll={onScroll}
+      onLayout={onLayout}
+      onContentSizeChange={onContentSizeChange}
+      onScrollEndDrag={onScrollEndDrag}
+      onMomentumScrollEnd={onMomentumScrollEnd}
+      scrollEventThrottle={10}
+      ListFooterComponent={
+        hasNextPage ? null : (
+          <ConversationStartBanner conversation={conversation} hasMessages={true} />
+        )
+      }
+      renderItem={({ item }) => {
+        if (item.type === 'DateSeparator') {
+          return <InlineDateSeparator {...item} />
+        }
+
+        if (item.type === 'ReplyShadowMessage') {
+          return (
+            <ReplyShadowMessage
+              {...(item as any)}
+              conversation_id={conversationId}
+              inReplyScreen={inReplyScreen}
+            />
+          )
+        }
+
+        if (isSystemMessage(item)) {
+          return <SystemMessage message={item} conversationId={conversationId} />
+        }
+
+        const readByOthers = item.mine && !!latestRead && item.id <= latestRead
+        return (
+          <Message
+            {...item}
+            canDeleteNonAuthoredMessages={canDeleteNonAuthoredMessages}
+            conversation_id={conversationId}
+            readByOthers={readByOthers}
+            inReplyScreen={inReplyScreen}
+          />
+        )
+      }}
+      onEndReached={onEndReached}
+      ListHeaderComponent={<View style={styles.listHeader} />}
+    />
+  )
+}
+
+function InlineDateSeparator({ date }: DateSeparator) {
+  const styles = useDateSeparatorStyles()
+  const { isThisYear } = getRelativeDateStatus(date)
+  const showYear = !isThisYear
+  const dateStamp = formatDate(date, { style: 'long', year: showYear })
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.separator} />
+      <Text variant="footnote" style={styles.dateText}>
+        {dateStamp}
+      </Text>
+      <View style={styles.separator} />
+    </View>
+  )
+}
+
+const useDateSeparatorStyles = () => {
+  const theme = useTheme()
+  return StyleSheet.create({
+    container: {
+      alignItems: 'center',
+      flexDirection: 'row',
+      paddingHorizontal: CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,
+      paddingVertical: 16,
+    },
+    separator: {
+      flex: 1,
+      height: 1,
+      borderTopWidth: 1,
+      borderTopColor: theme.colors.borderColorDefaultBase,
+    },
+    dateText: {
+      paddingHorizontal: 8,
+    },
+  })
+}
+
+const useStyles = () =>
+  StyleSheet.create({
+    listContainer: {
+      paddingVertical: 12,
+    },
+    listHeader: {
+      // Just whitespace to provide space where the typing indicator can be
+      height: 16,
+    },
+  })

package/src/components/conversation/message_read_receipts.tsx

@@ -1,17 +1,15 @@
 import React from 'react'
 import { StyleSheet, View } from 'react-native'
 import { useTheme } from '../../hooks'
-import { MessageResource } from '../../types'
 import { Icon, Text } from '../display'
 
 interface Props {
-  message: MessageResource
-  latestReadMessageSortKey?: string
+  read?: boolean
 }
 
-export function MessageReadReceipts({ message, latestReadMessageSortKey }: Props) {
+export function MessageReadReceipts({ read }: Props) {
   const styles = useStyles()
-  if (!latestReadMessageSortKey || message.id > latestReadMessageSortKey) {
+  if (!read) {
     return (
       <View style={styles.badgeContainer}>
         <Icon name="general.check" style={styles.icon} />

package/src/components/conversation/reply_shadow_message.tsx

@@ -1,6 +1,6 @@
 import { useNavigation } from '@react-navigation/native'
 import { some } from 'lodash'
-import React from 'react'
+import React, { memo } from 'react'
 import { Pressable, StyleSheet, useWindowDimensions, View } from 'react-native'
 import Animated from 'react-native-reanimated'
 import {
@@ -37,18 +37,20 @@ interface ReplyShadowMessageProps extends MessageResource {
   nextRendersAuthor: boolean
 }
 
-export function ReplyShadowMessage({
+export const ReplyShadowMessage = memo(function ReplyShadowMessageRow({
   conversation_id,
   inReplyScreen,
   messageId,
+  replyRoot,
   isReplyShadowMessage,
   nextRendersAuthor,
 }: ReplyShadowMessageProps) {
-  const { message, isError, isLoading } = useConversationMessage({ conversation_id, messageId })
+  const fetched = useConversationMessage({ conversation_id, messageId, enabled: !replyRoot })
+  const message = replyRoot ?? fetched.message
 
   if (inReplyScreen) return null
-  if (isLoading) return <ShadowMessageFallback text="Loading..." />
-  if (isError || !message) return <ShadowMessageFallback text="Message deleted" />
+  if (!message && fetched.isLoading) return <ShadowMessageFallback text="Loading..." />
+  if (!message) return <ShadowMessageFallback text="Message deleted" />
 
   const enrichedMessage = {
     ...message,
@@ -57,7 +59,7 @@ export function ReplyShadowMessage({
   }
 
   return <ShadowMessageContent conversation_id={conversation_id} {...enrichedMessage} />
-}
+})
 
 interface ShadowMessageContentProps extends MessageResource {
   conversation_id: number
@@ -82,7 +84,7 @@ function ShadowMessageContent({ conversation_id, ...message }: ShadowMessageCont
   const handleNavigateToReplies = () => {
     navigation.navigate('ConversationReply', {
       conversation_id,
-      reply_root_id: message.replyRootId,
+      reply_root_id: message.replyRootId ?? message.id,
       reply_root_author_name: message.author.name,
     })
   }

package/src/contexts/api_provider.tsx

@@ -10,6 +10,7 @@ import { ViewProps } from 'react-native'
 import { ApiClient, useApiClient } from '../hooks/use_api_client'
 import { useAppState } from '../hooks/use_app_state'
 import { appGrantsRequestArgs } from '../hooks/use_chat_permissions'
+import { featuresQueryOptions } from '../hooks/use_features'
 import { getRequestQueryKey, RequestQueryKey } from '../hooks/use_suspense_api'
 import { emitAuthRefresh } from '../utils/auth_events'
 import { ResponseError } from '../utils/response_error'
@@ -81,10 +82,13 @@ export function ApiProvider({ children }: ViewProps) {
 // This needs to live in the provider so that it can access the api client
 // and the chat query client
 const PrefetchQueries = () => {
+  const client = useApiClient()
+
   usePrefetchQuery({
     queryKey: getRequestQueryKey(appGrantsRequestArgs),
     queryFn: defaultQueryFn,
   })
+  usePrefetchQuery(featuresQueryOptions(client))
 
   return null
 }

package/src/hooks/__tests__/use_message_create_or_update.test.tsx

@@ -0,0 +1,110 @@
+import { InfiniteData, QueryClientProvider, notifyManager } from '@tanstack/react-query'
+import { act, renderHook } from '@testing-library/react-native'
+import React from 'react'
+import { chatQueryClient } from '../../contexts/api_provider'
+import type { ApiCollection, MessageResource } from '../../types'
+import { getMessagesQueryKey } from '../../utils/request/get_messages'
+import { useMessageCreateOrUpdate } from '../use_message_create_or_update'
+
+jest.mock('../../contexts/api_provider', () => {
+  const { QueryClient } = require('@tanstack/react-query')
+  // gcTime 0 so nothing outlives the test and keeps jest from exiting
+  return {
+    chatQueryClient: new QueryClient({
+      defaultOptions: { queries: { gcTime: 0 }, mutations: { gcTime: 0 } },
+    }),
+  }
+})
+
+const mockPost = jest.fn()
+jest.mock('../use_api_client', () => ({
+  useApiClient: () => ({ chat: { post: mockPost, patch: jest.fn() } }),
+}))
+
+jest.mock('../use_current_person', () => ({
+  useCurrentPerson: () => ({ type: 'Person', id: 1, name: 'Me', avatar: null }),
+}))
+
+// Flush TanStack's batched state updates inside act, as its own tests do
+notifyManager.setNotifyFunction(fn => act(fn))
+
+type MessagesQueryData = InfiniteData<ApiCollection<MessageResource>>
+
+const conversationId = 7
+const queryKey = getMessagesQueryKey({ conversation_id: conversationId })
+
+const wrapper = ({ children }: { children: React.ReactNode }) => (
+  <QueryClientProvider client={chatQueryClient}>{children}</QueryClientProvider>
+)
+
+const pendingMessagesInCache = () =>
+  (chatQueryClient.getQueryData<MessagesQueryData>(queryKey)?.pages[0].data ?? []).filter(
+    m => m.pending
+  )
+
+const sentKey = (call: number): string =>
+  mockPost.mock.calls[call][0].data.data.attributes.idempotent_key
+
+// What the cache held when each request went out, i.e. after onMutate ran
+let pendingAtSend: MessageResource[][]
+
+describe('useMessageCreateOrUpdate idempotent key', () => {
+  beforeEach(() => {
+    chatQueryClient.clear()
+    chatQueryClient.setQueryData<MessagesQueryData>(queryKey, {
+      pages: [{ data: [], links: {}, meta: { count: 0, totalCount: 0 } }],
+      pageParams: [],
+    })
+    pendingAtSend = []
+    mockPost.mockReset()
+    mockPost.mockImplementation(async request => {
+      pendingAtSend.push(pendingMessagesInCache())
+      const key = request.data.data.attributes.idempotent_key
+      return { data: { type: 'Message', id: `real-${key}`, idempotentKey: key, mine: true } }
+    })
+  })
+
+  it('gives the optimistic message the same key that is sent to the server', async () => {
+    const { result } = renderHook(() => useMessageCreateOrUpdate({ conversationId }), { wrapper })
+
+    await act(() => result.current.mutateAsync({ text: 'ok' }))
+
+    expect(sentKey(0)).toEqual(expect.any(String))
+    expect(pendingAtSend[0].map(m => m.idempotentKey)).toEqual([sentKey(0)])
+  })
+
+  it('mints a distinct key for each send, even with identical text', async () => {
+    const { result } = renderHook(() => useMessageCreateOrUpdate({ conversationId }), { wrapper })
+
+    await act(() =>
+      Promise.all([
+        result.current.mutateAsync({ text: 'ok' }),
+        result.current.mutateAsync({ text: 'ok' }),
+      ])
+    )
+
+    expect(sentKey(0)).not.toBe(sentKey(1))
+    expect(pendingAtSend[1].map(m => m.idempotentKey).sort()).toEqual(
+      [sentKey(0), sentKey(1)].sort()
+    )
+  })
+
+  it('reuses the original key when retrying a failed send', async () => {
+    const failed = {
+      type: 'Message',
+      id: '01FAILED-temp',
+      text: 'ok',
+      idempotentKey: 'original-key',
+      error: 'Failed to send message',
+    } as MessageResource
+    const { result } = renderHook(
+      () => useMessageCreateOrUpdate({ conversationId, message: failed }),
+      { wrapper }
+    )
+
+    await act(() => result.current.mutateAsync({ text: 'ok' }))
+
+    expect(sentKey(0)).toBe('original-key')
+    expect(pendingAtSend[0].map(m => m.idempotentKey)).toEqual(['original-key'])
+  })
+})

package/src/hooks/use_conversation_messages.ts

@@ -1,5 +1,6 @@
 import { useMemo } from 'react'
 import { MessageResource } from '../types'
+import { replaceEqualById } from '../utils/replace_equal_by_id'
 import { getMessagesQueryKey, getMessagesRequestArgs } from '../utils/request/get_messages'
 import { SuspensePaginatorOptions, useSuspensePaginator } from './use_suspense_api'
 
@@ -10,7 +11,10 @@ export const useConversationMessages = (
   const { data, refetch, isRefetching, fetchNextPage, hasNextPage } =
     useSuspensePaginator<MessageResource>(
       getMessagesRequestArgs({ conversation_id, reply_root_id }),
-      opts
+      {
+        structuralSharing: replaceEqualById,
+        ...opts,
+      }
     )
   const queryKey = getMessagesQueryKey({ conversation_id, reply_root_id })
   const messages = useMemo(

package/src/hooks/use_conversation_messages_jolt_events.ts

@@ -11,6 +11,7 @@ import {
   updateCacheWithMessage,
   updateCacheWithIndividualMessage,
   updateCacheWithReaction,
+  updateCacheReplyRoots,
   getThreadedMessagesQueryKey,
 } from '../utils/cache/messages_cache'
 import { transformMessageEventDataToMessageResource } from '../utils/jolt/transform_message_event_data_to_message_resource'
@@ -44,6 +45,7 @@ export function useConversationMessagesJoltEvents({ conversationId }: Props) {
       data,
       currentPersonId: currentPerson.id,
     })
+    const isReplyRootUpdate = e.event === 'message.updated' && data.reply_root_id === data.sort_key
 
     if (e.event === 'message.created' && data.author_id) {
       removeAllTypingEventsByAuthorId(data.author_id)
@@ -62,6 +64,11 @@ export function useConversationMessagesJoltEvents({ conversationId }: Props) {
         data.reply_root_id
       )
       updateCacheWithMessage(queryClient, threadedMessagesQueryKey, message, e.event)
+
+      if (isReplyRootUpdate) {
+        updateCacheReplyRoots(queryClient, messagesQueryKey, message)
+        updateCacheReplyRoots(queryClient, threadedMessagesQueryKey, message)
+      }
     }
 
     // Update individual message query cache so reply shadow messages update immediately

package/src/hooks/use_features.ts

@@ -1,26 +1,20 @@
-import { useSuspenseQuery } from '@tanstack/react-query'
+import { queryOptions, useSuspenseQuery } from '@tanstack/react-query'
 import { useCallback } from 'react'
 import { ApiCollection } from '../types'
 import type { FeatureResource } from '../types/resources/feature_resource'
 import { getFeaturesRequestArgs, getFeaturesQueryKey } from '../utils/request/get_features'
-import { FIVE_MINUTES } from '../utils/time'
-import { useApiClient } from './use_api_client'
+import { FIVE_MINUTES, ONE_MINUTE } from '../utils/time'
+import { ApiClient, useApiClient } from './use_api_client'
 
 type FeatureName = (typeof availableFeatures)[keyof typeof availableFeatures]
 
+type FeaturesCollection = ApiCollection<FeatureResource> & {
+  failure?: { status?: number }
+}
+
 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: FIVE_MINUTES,
-  })
+  const { data } = useSuspenseQuery(featuresQueryOptions(apiClient))
 
   const features = data.data
 
@@ -36,6 +30,23 @@ export function useFeatures() {
   }
 }
 
+export const featuresQueryOptions = (apiClient: ApiClient) =>
+  queryOptions({
+    queryKey: getFeaturesQueryKey(),
+    queryFn: (): Promise<FeaturesCollection> => {
+      return apiClient.chat
+        .get<ApiCollection<FeatureResource>>(getFeaturesRequestArgs())
+        .catch(error => ({ ...stableEmptyFeatures, failure: { status: error?.status } }))
+    },
+    staleTime: query => {
+      const failure = query.state.data?.failure
+      if (!failure) return FIVE_MINUTES
+
+      return failure.status === 429 ? ONE_MINUTE : 0
+    },
+    gcTime: Infinity,
+  })
+
 export const availableFeatures = {
   gender_specific_conversations: 'ROLLOUT_gender_specific_conversations',
   message_reporting: 'ROLLOUT_MOBILE_message_reporting',
@@ -44,6 +55,7 @@ export const availableFeatures = {
   conversation_safety_lock: 'ROLLOUT_conversation_safety_lock',
   video_moderation: 'ROLLOUT_MOBILE_video_moderation',
   dm_search_clear_fix: 'ROLLOUT_MOBILE_dm_search_clear_fix',
+  search: 'ROLLOUT_search',
 } as const satisfies Record<string, `ROLLOUT_${string}`>
 
 const stableEmptyFeatures: ApiCollection<FeatureResource> = {

package/src/hooks/use_message_create_or_update.ts

@@ -22,6 +22,14 @@ interface Props {
   replyRootId?: string | null
 }
 
+interface MessageMutationVariables {
+  text: string
+  attachments?: DenormalizedAttachmentResourceForCreate[]
+  idempotentKey?: string
+}
+
+type ResolvedMessageMutationVariables = MessageMutationVariables & { idempotentKey: string }
+
 export function useMessageCreateOrUpdate({ conversationId, message, replyRootId }: Props) {
   const messageId = message?.id || null
   const isEditing = !isNewMessage(message)
@@ -29,13 +37,7 @@ export function useMessageCreateOrUpdate({ conversationId, message, replyRootId
   const currentPerson = useCurrentPerson()
 
   const mutation = useMutation({
-    mutationFn: ({
-      text,
-      attachments,
-    }: {
-      text: string
-      attachments?: DenormalizedAttachmentResourceForCreate[]
-    }) => {
+    mutationFn: ({ text, attachments, idempotentKey }: ResolvedMessageMutationVariables) => {
       const requestParams = getMessagesRequestArgs({ conversation_id: conversationId })
       const fieldsWithValueJoined = Object.fromEntries(
         Object.entries(requestParams.data.fields).map(([k, v]) => [k, v.join(',')])
@@ -46,7 +48,6 @@ export function useMessageCreateOrUpdate({ conversationId, message, replyRootId
         ...(!isEditing && replyRootId ? { reply_root: { id: replyRootId } } : {}),
       }
       if (!isEditing) {
-        const idempotentKey = insecureUUID()
         attributes.idempotent_key = idempotentKey
         startMessageCreationTracking(idempotentKey)
       }
@@ -71,13 +72,7 @@ export function useMessageCreateOrUpdate({ conversationId, message, replyRootId
         })
       }
     },
-    onMutate: async ({
-      text,
-      attachments,
-    }: {
-      text: string
-      attachments?: DenormalizedAttachmentResourceForCreate[]
-    }) => {
+    onMutate: async ({ text, attachments, idempotentKey }: ResolvedMessageMutationVariables) => {
       if (message && isEditing) {
         const optimisticMessage = optimisticallyUpdateMessage({
           conversationId,
@@ -96,6 +91,7 @@ export function useMessageCreateOrUpdate({ conversationId, message, replyRootId
         attachments,
         currentPerson,
         replyRootId,
+        idempotentKey,
       })
 
       return { message: optimisticMessage }
@@ -155,7 +151,24 @@ export function useMessageCreateOrUpdate({ conversationId, message, replyRootId
     },
   })
 
-  return mutation
+  const resolveVariables = (
+    variables: MessageMutationVariables
+  ): ResolvedMessageMutationVariables => ({
+    ...variables,
+    idempotentKey: variables.idempotentKey ?? message?.idempotentKey ?? insecureUUID(),
+  })
+
+  const mutate = (
+    variables: MessageMutationVariables,
+    options?: Parameters<typeof mutation.mutate>[1]
+  ) => mutation.mutate(resolveVariables(variables), options)
+
+  const mutateAsync = (
+    variables: MessageMutationVariables,
+    options?: Parameters<typeof mutation.mutateAsync>[1]
+  ) => mutation.mutateAsync(resolveVariables(variables), options)
+
+  return { ...mutation, mutate, mutateAsync }
 }
 
 /**